swcs/mixtape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tree fixes

Browse Source
This commit is contained in:
Tobias Klika
2020-06-04 15:50:21 +02:00
parent 9a3bc7a080
commit 6fd8d4a144
5 changed files with 237 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zero.Core/Api/BackofficeApi.cs
+1 -1
View File
@@ -37,7 +37,7 @@ namespace zero.Core.Api
const string NEW_ID = "new:";
IBackofficeStore Backoffice;
protected IBackofficeStore Backoffice { get; private set; }
public BackofficeApi(IBackofficeStore store)
zero.Core/Api/BackofficeStore.cs
+7 -1
View File
@@ -1,4 +1,5 @@
using Raven.Client.Documents;
using zero.Core.Options;
namespace zero.Core.Api
{
@@ -8,11 +9,14 @@ namespace zero.Core.Api
public IApplicationContext AppContext { get; private set; }
public IZeroOptions Options { get; private set; }
public BackofficeStore(IDocumentStore raven, IApplicationContext appContext)
public BackofficeStore(IDocumentStore raven, IApplicationContext appContext, IZeroOptions options)
{
Raven = raven;
AppContext = appContext;
Options = options;
}
}
@@ -22,5 +26,7 @@ namespace zero.Core.Api
IDocumentStore Raven { get; }
IApplicationContext AppContext { get; }
IZeroOptions Options { get; }
}
}
zero.Core/Api/PageTreeApi.cs
+2 -7
View File
@@ -14,19 +14,14 @@ namespace zero.Core.Api
{
public class PageTreeApi<T> : AppAwareBackofficeApi, IPageTreeApi<T> where T : IPage
{
protected IZeroOptions Options { get; private set; }
public PageTreeApi(IZeroOptions options, IBackofficeStore store) : base(store)
{
Options = options;
}
public PageTreeApi(IBackofficeStore store) : base(store) { }
/// <inheritdoc />
public async Task<IList<TreeItem>> GetChildren(string parentId = null, string activeId = null)
{
IList<TreeItem> items = new List<TreeItem>();
IReadOnlyCollection<PageType> pageTypes = Options.Pages.GetAllItems();
IReadOnlyCollection<PageType> pageTypes = Backoffice.Options.Pages.GetAllItems();
string[] openIds = new string[0] { };
using (IAsyncDocumentSession session = Raven.OpenAsyncSession())
zero.Web.UI/App/components/tree/tree-item.vue
+219
View File
@@ -0,0 +1,219 @@
<template>
<div class="ui-tree-item" :class="getClasses(value)" v-on:contextmenu="onRightClicked(value, $event)">
<button v-if="value.hasChildren" @click="toggle(value)" type="button" class="ui-tree-item-toggle">
<i class="ui-tree-item-arrow" :class="['fth-chevron-' + (value.isOpen ? 'up' : 'down')]"></i>
</button>
<component :is="tag" type="button" :to="value.url" class="ui-tree-item-link" @click="onClick(value, $event)">
<i class="ui-tree-item-icon" :class="value.icon"></i>
<i v-if="value.modifier" :title="value.modifier.name" class="ui-tree-item-modifier" :class="value.modifier.icon"></i>
<span class="ui-tree-item-text">{{value.name | localize}}</span>
</component>
<ui-dot-button class="ui-tree-item-actions" v-if="value.hasActions" @click="onActionsClicked(value, $event)" />
</div>
</template>
<script>
import { each as _each, extend as _extend, debounce as _debounce, isArray as _isArray } from 'underscore';
export default {
name: 'uiTreeItem',
props: {
value: {
type: Object,
required: true
}
},
computed: {
isLink()
{
return this.value && this.value.url;
},
tag()
{
return this.isLink ? 'router-link' : 'button';
}
},
methods: {
onClick(item, ev)
{
if (this.isLink)
{
return;
}
else
{
this.$emit('click', item, ev);
}
},
// get all classes for a tree item
getClasses(item)
{
return {
'has-children': item.hasChildren,
'is-inactive': item.isInactive,
'is-open': item.isOpen
};
},
// toggles children of an item
toggle(item)
{
this.$emit('open', item);
},
// right clicked on an item
onRightClicked(item, ev)
{
this.$emit('rightclick', item, ev);
},
// actions button clicked on item
onActionsClicked(item, ev)
{
this.$emit('actions', item, ev);
}
}
}
</script>
<style lang="scss">
.ui-tree-item
{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
font-size: var(--font-size);
padding: 0 var(--padding);
height: 50px;
color: var(--color-fg);
position: relative;
transition: color 0.2s ease;
&.is-inactive .ui-tree-item-text
//&.is-inactive .ui-tree-item-icon
{
opacity: .5;
}
.ui-tree-item-arrow
{
transition: transform 0.2s ease;
}
&:hover > .ui-tree-item-actions
{
transition-delay: 0.2s;
opacity: 1;
}
&.is-open > .ui-tree-item-toggle .ui-tree-item-arrow
{
transform: rotate(180deg);
}
}
.ui-tree-item-link
{
display: grid;
grid-template-columns: 30px 1fr auto;
grid-gap: 6px;
height: 100%;
align-items: center;
position: relative;
color: var(--color-fg);
&.is-active
{
font-weight: bold;
}
}
.ui-tree-item-toggle
{
position: absolute;
color: var(--color-fg-mid);
height: 100%;
top: 0;
left: 0;
width: 30px;
text-align: right;
padding-right: 5px;
outline: none !important;
transition: color 0.2s ease;
&:hover
{
color: var(--color-fg);
}
}
.ui-tree-item-icon
{
font-size: 18px;
line-height: 1;
font-weight: 400;
position: relative;
top: -2px;
color: var(--color-fg-reverse-mid);
transition: color 0.2s ease;
}
.ui-tree-item-loading
{
display: block;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
height: 2px;
i
{
background-color: var(--color-line);
transform: translateX(-100%) scaleX(1);
animation: treeitemloading 1s linear infinite;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
}
@keyframes treeitemloading
{
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.ui-tree-item-modifier
{
position: absolute;
left: 10px;
bottom: 12px;
background: var(--color-bg-light);
border-radius: 50%;
width: 14px;
height: 14px;
/*color: var(--color-fg-mid);*/
font-size: 11px;
font-style: normal;
text-align: center;
line-height: 14px;
}
.ui-tree-item-actions
{
transition: opacity 0.2s ease 0;
opacity: 0;
color: var(--color-fg-mid);
}
</style>
zero.Web.UI/App/components/tree.vue → zero.Web.UI/App/components/tree/tree.vue
+8 -162
View File
@@ -6,19 +6,10 @@
<slot></slot>
<span v-if="status === 'loading'" class="ui-tree-item-loading"><i></i></span>
<template v-for="item in items">
<div class="ui-tree-item" :class="getClasses(item)" v-on:contextmenu="onRightClicked(item, $event)">
<button v-if="item.hasChildren" @click="toggle(item)" type="button" class="ui-tree-item-toggle">
<i class="ui-tree-item-arrow" :class="['fth-chevron-' + (item.isOpen ? 'up' : 'down')]"></i>
</button>
<router-link :to="item.url" class="ui-tree-item-link">
<i class="ui-tree-item-icon" :class="item.icon"></i>
<i v-if="item.modifier" :title="item.modifier.name" class="ui-tree-item-modifier" :class="item.modifier.icon"></i>
<span class="ui-tree-item-text">{{item.name | localize}}</span>
</router-link>
<ui-dot-button class="ui-tree-item-actions" v-if="configuration.onActionsRequested && item.hasActions" @click="onActionsClicked(item, $event)" />
</div>
<ui-tree-item :value="item" @rightclick="onRightClicked" @actions="onActionsClicked" @open="toggle" />
<ui-tree v-if="item.hasChildren && item.isOpen" :get="get" :parent="item.id" :depth="depth + 1" :active="active" :config="config" />
</template>
<slot name="bottom"></slot>
<div ref="dropdown" class="ui-dropdown ui-tree-dropdown theme-dark align-top" role="dialog" v-click-outside="hideActions" v-if="actionsOpen">
<ui-dropdown-list v-model="actions" @hide="hideActions" />
</div>
@@ -122,24 +113,6 @@
this.$emit('onStatusChange', status);
},
// toggles children of an item
toggle(item)
{
item.isOpen = !item.isOpen;
},
// get all classes for a tree item
getClasses(item)
{
return {
'has-children': item.hasChildren,
'is-inactive': item.isInactive,
'is-open': item.isOpen
};
},
// hide actions overlay
hideActions()
{
@@ -149,6 +122,12 @@
}
},
// toggles children of an item
toggle(item)
{
item.isOpen = !item.isOpen;
},
// right clicked on an item
onRightClicked(item, ev)
{
@@ -227,139 +206,6 @@
margin-top: -18px;
}
.ui-tree-item
{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
font-size: var(--font-size);
padding: 0 var(--padding);
height: 50px;
color: var(--color-fg);
position: relative;
transition: color 0.2s ease;
&.is-inactive .ui-tree-item-text
//&.is-inactive .ui-tree-item-icon
{
opacity: .5;
}
.ui-tree-item-arrow
{
transition: transform 0.2s ease;
}
&:hover > .ui-tree-item-actions
{
transition-delay: 0.2s;
opacity: 1;
}
&.is-open > .ui-tree-item-toggle .ui-tree-item-arrow
{
transform: rotate(180deg);
}
}
.ui-tree-item-link
{
display: grid;
grid-template-columns: 30px 1fr auto;
grid-gap: 6px;
height: 100%;
align-items: center;
position: relative;
color: var(--color-fg);
&.is-active
{
font-weight: bold;
}
}
.ui-tree-item-toggle
{
position: absolute;
color: var(--color-fg-mid);
height: 100%;
top: 0;
left: 0;
width: 30px;
text-align: right;
padding-right: 5px;
outline: none !important;
transition: color 0.2s ease;
&:hover
{
color: var(--color-fg);
}
}
.ui-tree-item-icon
{
font-size: 18px;
line-height: 1;
font-weight: 400;
position: relative;
top: -2px;
color: var(--color-fg-reverse-mid);
transition: color 0.2s ease;
}
.ui-tree-item-loading
{
display: block;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
height: 2px;
i
{
background-color: var(--color-line);
transform: translateX(-100%) scaleX(1);
animation: treeitemloading 1s linear infinite;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
}
@keyframes treeitemloading
{
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.ui-tree-item-modifier
{
position: absolute;
left: 10px;
bottom: 12px;
background: var(--color-bg-light);
border-radius: 50%;
width: 14px;
height: 14px;
/*color: var(--color-fg-mid);*/
font-size: 11px;
font-style: normal;
text-align: center;
line-height: 14px;
}
.ui-tree-item-actions
{
transition: opacity 0.2s ease 0;
opacity: 0;
color: var(--color-fg-mid);
}
.ui-tree-dropdown
{
position: fixed;