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

UI updates

Browse Source
This commit is contained in:
Tobias Klika
2021-03-04 22:22:20 +01:00
parent 469e4d5e37
commit eb4dc6fa8d
9 changed files with 56 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zero.Web.UI/App/components/forms/form-header.vue
+1 -1
View File
@@ -128,7 +128,7 @@
.ui-toggle-switch.is-active
{
background: var(--color-checked);
background: var(--color-toggled);
box-shadow: none !important;
}
zero.Web.UI/App/components/overlays/dropdown-button.vue
-4
View File
@@ -42,10 +42,6 @@
type: Boolean,
default: false
},
action: {
type: Function,
default: () => { }
},
confirm: {
type: Boolean,
default: false
zero.Web.UI/App/components/tables/table.scss
+7 -2
View File
@@ -67,7 +67,7 @@ a.ui-table-row:hover, button.ui-table-row:hover
position: sticky;
top: 0;
//border-bottom: 1px solid var(--color-line);
z-index: 2;
z-index: 3;
background: var(--color-table-head);
/*border-bottom: 2px solid var(--color-bg);*/
@@ -76,6 +76,11 @@ a.ui-table-row:hover, button.ui-table-row:hover
display: inline-flex;
justify-content: space-between;
}
.ui-table.is-inline &
{
background: none;
}
}
.ui-table-cell
@@ -85,7 +90,7 @@ a.ui-table-row:hover, button.ui-table-row:hover
flex: 1 1 5%;
position: relative;
text-align: left;
padding: 18px 20px 17px 20px;
padding: 22px 20px 21px 20px;
border-left: 1px solid var(--color-table-line-vertical);
white-space: nowrap;
overflow: hidden;
zero.Web.UI/App/editor/editor.scss
+5
View File
@@ -73,6 +73,11 @@
border-top: 1px solid var(--color-line-onbg);
}
.theme-dark .editor-infos
{
border-top: none;
}
.editor-infos .ui-box
{
margin: 0;
zero.Web.UI/App/navigation.vue
+3 -6
View File
@@ -1,5 +1,5 @@
<template>
<div class="app-nav" :class="{'is-compact': compact }">
<div class="app-nav theme-dark" :class="{'is-compact': compact }">
<h1 class="app-nav-headline">
<img src="/Assets/zero-2-light.png" class="show-light" v-localize:alt="'@zero.name'" />
@@ -10,7 +10,7 @@
<template v-slot:button>
<ui-button type="light block" :label="currentApplication.name" caret="down" />
</template>
<ui-dropdown-button v-for="app in applications" :value="app" :key="app.id" :label="app.name" :selected="app.id === appId" @click="applicationChanged" />
<ui-dropdown-button v-for="app in applications" :value="app" :key="app.id" :label="app.name" :selected="app.id === appId" @click="applicationChanged" :prevent="true" />
<ui-dropdown-separator />
<ui-dropdown-button label="Add new application" icon="fth-plus" @click="addApplication" />
<ui-dropdown-button label="Manage apps" icon="fth-edit-2" @click="manageApplications" />
@@ -86,7 +86,6 @@
created()
{
console.info('created');
this.currentApplication = _find(this.applications, x => x.id === zero.appId);
this.compact = localStorage.getItem(compactCacheKey) === 'true';
this.buildUser(AuthApi.user);
@@ -158,14 +157,12 @@
applicationChanged(item, opts)
{
opts.loading(true);
AuthApi.switchApp(item.id).then(success =>
{
opts.loading(false);
opts.hide();
console.info('in', item);
//opts.hide();
});
},
zero.Web.UI/App/pages/settings/settings.vue
+7
View File
@@ -99,6 +99,13 @@
background: var(--color-box);
border-radius: var(--radius);
box-shadow: var(--shadow-short);
color: var(--color-text-dim);
transition: color 0.2s ease;
}
a.settings-group-item:hover .settings-group-item-icon
{
color: var(--color-text);
}
.settings-group-item-text
zero.Web.UI/Sass/Canvas/_navigation.scss
+1 -1
View File
@@ -91,7 +91,7 @@ a.app-nav-item, button.app-nav-item
.app-nav-item-icon
{
color: var(--color-text);
color: var(--color-primary);
}
.app-nav-item-arrow
zero.Web.UI/Sass/Settings/_dimensions.scss
+1 -1
View File
@@ -7,5 +7,5 @@
--padding-l: 64px;
--height-top: 74px;
--radius: 3px;
--radius: 5px;
}
zero.Web.UI/Sass/Settings/_theme-dark.scss
+31 -8
View File
@@ -2,8 +2,8 @@
.theme-dark
{
// accent colors
$color-primary: #0d83f0; //#0d83f0; #22272e
$color-primary-fg: #fff;
$color-primary: #fff; //#f9c202; //#0d83f0; #22272e
$color-primary-fg: #181c22;
$color-primary-low: #{rgba(#2c3036, 0.2)};
$color-secondary: #94c4bb;
$color-secondary-fg: #fff;
@@ -11,8 +11,8 @@
$color-tertiary-fg: #2c3036;
// foreground colors
$color-fg: #fff;
$color-fg-shade-1: #7d858a; // dim
$color-fg: #fafafa;
$color-fg-shade-1: #81878a; // dim
$color-fg-shade-2: #8c9094; // dim-two
// background colors
@@ -20,11 +20,34 @@
$color-bg-shade-0: #1d2229;
$color-bg-shade-1: #22272e; // bright
$color-bg-shade-2: #1c2026; // dim
$color-bg-shade-3: #282d36; // bright-two
$color-bg-shade-3: #2d323b; // bright-two
$color-bg-shade-4: #363c45; // bright-three
$color-bg-shade-5: #43484f;
$color-bg-shade-6: #43484f;
/*$color-primary: #eee; //#0d83f0; #22272e
$color-primary-fg: #222;
$color-primary-low: #{rgba(#2c3036, 0.2)};
$color-secondary: #94c4bb;
$color-secondary-fg: #fff;
$color-tertiary: #c4e4de;
$color-tertiary-fg: #2c3036;
// foreground colors
$color-fg: #eee;
$color-fg-shade-1: #838383; // dim
$color-fg-shade-2: #8c9094; // dim-two
// background colors
$color-bg: #1d1d1d;
$color-bg-shade-0: #232323;
$color-bg-shade-1: #282828; // bright
$color-bg-shade-2: #333333; // dim
$color-bg-shade-3: #3b3b3b; // bright-two
$color-bg-shade-4: #4a4a4a; // bright-three
$color-bg-shade-5: #43484f;
$color-bg-shade-6: #43484f;*/
// misc colors
$color-overlay-shade: rgba(0, 0, 0, 0.3);
@@ -76,8 +99,8 @@
--color-checked-fg: #{$color-primary-fg};
--color-toggle: #{$color-bg-shade-3};
--color-toggle-fg: #{$color-fg};
--color-toggled: #{$color-primary};
--color-toggled-fg: #{$color-primary-fg};
--color-toggled: #{$color-fg};
--color-toggled-fg: #{$color-bg-shade-3};
--color-input-focus-bg: #{$color-bg-shade-1};
--color-input-focus-border: 1px solid #{$color-bg-shade-5};
--color-input-focus-shadow: 0 0 0 4px #{$color-bg-shade-2};
@@ -108,7 +131,7 @@
--color-table: #{$color-bg-shade-1};
--color-table-line-horizontal: #{$color-bg}; //#{$color-bg-shade-3};
--color-table-line-vertical: transparent;
--color-table-head: #{$color-bg-shade-3};
--color-table-head: #{$color-bg-shade-1};
--color-table-hover: #{$color-bg-shade-2};
// misc