fix some UI bugs
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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)
|
||||
{
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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": {
|
||||
|
||||
Reference in New Issue
Block a user