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

fix some UI bugs

Browse Source
This commit is contained in:
Tobias Klika
2020-06-05 15:34:13 +02:00
parent 736761abd8
commit 002bf56fcd
12 changed files with 93 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zero.Web.UI/App/components/tree/tree-item.vue
+19 -6
View File
@@ -1,14 +1,14 @@
<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">
<button :disabled="value.disabled" 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)">
<component :disabled="value.disabled" :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)" />
<ui-dot-button :disabled="value.disabled" class="ui-tree-item-actions" v-if="value.hasActions" @click="onActionsClicked(value, $event)" />
</div>
</template>
@@ -56,7 +56,9 @@
return {
'has-children': item.hasChildren,
'is-inactive': item.isInactive,
'is-open': item.isOpen
'is-open': item.isOpen,
'is-selected': item.isSelected,
'is-disabled': item.disabled
};
},
@@ -69,13 +71,19 @@
// right clicked on an item
onRightClicked(item, ev)
{
this.$emit('rightclick', item, ev);
if (!item.disabled)
{
this.$emit('rightclick', item, ev);
}
},
// actions button clicked on item
onActionsClicked(item, ev)
{
this.$emit('actions', item, ev);
if (!item.disabled)
{
this.$emit('actions', item, ev);
}
}
}
}
@@ -118,6 +126,11 @@
{
transform: rotate(180deg);
}
&.is-disabled
{
cursor: not-allowed;
}
}
.ui-tree-item-link
zero.Web.UI/App/components/tree/tree.vue
+8 -3
View File
@@ -6,8 +6,8 @@
<slot></slot>
<span v-if="status === 'loading'" class="ui-tree-item-loading"><i></i></span>
<template v-for="item in items">
<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" />
<ui-tree-item :value="item" @rightclick="onRightClicked" @click="onSelect(item, $event)" @actions="onActionsClicked" @open="toggle" />
<ui-tree v-if="item.hasChildren && item.isOpen" :get="get" :parent="item.id" :depth="depth + 1" :active="active" :config="config" @select="onSelect" />
</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">
@@ -77,7 +77,7 @@
initialize()
{
this.configuration = _extend(defaultConfig, this.config);
this.configuration = _extend(defaultConfig, this.config || {});
},
refresh()
@@ -128,6 +128,11 @@
item.isOpen = !item.isOpen;
},
onSelect(item, ev)
{
this.$emit('select', item, ev);
},
// right clicked on an item
onRightClicked(item, ev)
{