fix some UI bugs

This commit is contained in:
2020-06-05 15:34:13 +02:00
parent 736761abd8
commit 002bf56fcd
12 changed files with 93 additions and 21 deletions
+3
View File
@@ -2,6 +2,7 @@
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
namespace zero.Core.Entities
@@ -24,6 +25,8 @@ namespace zero.Core.Entities
public bool OrderIsDescending { get; set; } = true;
public Func<IQueryable<T>, IQueryable<T>> OrderQuery = null;
public int Page { get; set; } = 1;
public int PageSize { get; set; } = 30;
+15
View File
@@ -0,0 +1,15 @@
namespace zero.Core.Entities
{
public class PreviewModel
{
public string Id { get; set; }
public string Icon { get; set; }
public string Text { get; set; }
public string Name { get; set; }
public bool HasError { get; set; }
}
}
+9
View File
@@ -0,0 +1,9 @@
namespace zero.Core.Entities
{
public class SelectModel
{
public string Id { get; set; }
public string Name { get; set; }
}
}
@@ -80,7 +80,11 @@ namespace zero.Core.Extensions
}
}
if (!query.OrderBy.IsNullOrEmpty())
if (query.OrderQuery != null)
{
rawQuery = query.OrderQuery(rawQuery);
}
else if (!query.OrderBy.IsNullOrEmpty())
{
rawQuery = rawQuery.OrderBy(query.OrderBy, query.OrderIsDescending, query.OrderType == ListQueryOrderType.String ? OrderingType.String : OrderingType.Double);
}
@@ -2,8 +2,8 @@
<button type="button" class="ui-select-button type-light" :disabled="disabled" @click="tryClick">
<i class="ui-select-button-icon" :class="icon"></i>
<content class="ui-select-button-content">
<strong class="ui-select-button-label" v-localize="label"></strong>
<span class="ui-select-button-description" v-if="description" v-localize:html="description"></span>
<strong class="ui-select-button-label" v-localize="{ key: label, tokens: tokens }"></strong>
<span class="ui-select-button-description" v-if="description" v-localize:html="{ key: description, tokens: tokens }"></span>
</content>
</button>
</template>
@@ -11,7 +11,7 @@
<script>
export default {
name: 'uiIconButton',
name: 'uiSelectButton',
props: {
icon: {
@@ -25,6 +25,10 @@
type: String,
default: null
},
tokens: {
type: Object,
default: () => {}
},
disabled: Boolean
},
@@ -54,11 +54,16 @@
button.ui-state-button-item
{
background: var(--color-bg-mid);
border: 1px solid transparent; // var(--color-line);
background: var(--color-bg-light);
border: 1px solid var(--color-line); // var(--color-line);
padding: 10px 16px;
color: var(--color-fg-mid);
& + .ui-state-button-item
{
border-left: none;
}
&:first-of-type
{
border-top-left-radius: var(--radius);
@@ -73,10 +78,9 @@
&.is-active
{
background: var(--color-bg-mid);
/*background: var(--color-primary);
border-color: var(--color-primary);*/
border-color: var(--color-line);
background: var(--color-bg-light);
color: var(--color-fg);
font-weight: bold;
}
+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
+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)
{
+1 -1
View File
@@ -79,7 +79,7 @@
// background color shades
--color-bg: #1c1e1f;
--color-bg-dark: #fff;
--color-bg-dark: #1c1e1f;
--color-bg-xmid: #292b2c;
--color-bg-mid: #292b2c;
--color-bg-light: #242526;
@@ -6,6 +6,7 @@ button
color: var(--color-fg);
outline: 0 solid transparent !important;
display: inline-block;
font-size: var(--font-size);
&:visited, &:link
{
@@ -40,7 +41,7 @@ button::-moz-focus-inner
padding: 0 20px;
height: 42px;
border-radius: 3px;
font-size: 14px;
font-size: var(--font-size);
font-weight: 700;
margin: 0;
-webkit-backface-visibility: hidden;
+10 -1
View File
@@ -9,7 +9,6 @@
border-radius: var(--radius);
box-shadow: var(--color-shadow-short);
/*max-width: 1104px;*/
h2
{
margin: -5px -32px var(--padding);
@@ -31,6 +30,16 @@
background: transparent;
box-shadow: none;
}
&.is-light
{
background: var(--color-bg);
}
}
.ui-box + .ui-box.is-connected
{
margin-top: -31px;
}
.ui-blank-box
@@ -29,6 +29,7 @@
"button": "Search"
},
"name": "Name",
"select": "Select",
"icon": "Icon",
"icon_select": "Select an icon",
"tab_general": "General"
@@ -63,6 +64,10 @@
"emptyfields": "Please fill out all fields",
"nouser": "User is invalid",
"newpasswordsnotmatching": "The new password does not match the confirmation"
},
"preview": {
"notfound": "Not found",
"notfound_text": "Could not find entity with ID \"{id}\""
}
},
@@ -77,7 +82,7 @@
"close": "Cancel",
"confirm": "Delete",
"title": "Delete entity",
"text": "Are you sure you want to delete this entity?",
"text": "Are you sure you want to delete this entity?"
},
"changepasswordoverlay": {