Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-23 07:09:43 +02:00
Code Releases Activity

Complete UI revamp for admin screens

Browse source
This commit is contained in:
Harvey Kandola 2018-12-14 15:47:41 +00:00
parent edb256e754
commit 0ec0c65002
26 changed files with 376 additions and 284 deletions
Download patch file Download diff file Expand all files Collapse all files

5
gui/app/components/customize/user-admin.js
View file

@ -12,9 +12,10 @@
import $ from 'jquery'; import $ from 'jquery';
import AuthProvider from '../../mixins/auth'; import AuthProvider from '../../mixins/auth';
import ModalMixin from '../../mixins/modal'; import ModalMixin from '../../mixins/modal';
import Notifier from '../../mixins/notifier';
import Component from '@ember/component'; import Component from '@ember/component';
export default Component.extend(AuthProvider, ModalMixin, { export default Component.extend(AuthProvider, ModalMixin, Notifier, {
bulkUsers: '', bulkUsers: '',
newUser: null, newUser: null,
@ -51,6 +52,7 @@ export default Component.extend(AuthProvider, ModalMixin, {
this.get('onAddUser')(user).then(() => { this.get('onAddUser')(user).then(() => {
this.set('newUser', { firstname: '', lastname: '', email: '', active: true }); this.set('newUser', { firstname: '', lastname: '', email: '', active: true });
this.notifySuccess('Added user');
}); });
this.modalClose("#add-user-modal"); this.modalClose("#add-user-modal");
@ -65,6 +67,7 @@ export default Component.extend(AuthProvider, ModalMixin, {
this.get('onAddUsers')(this.get('bulkUsers')).then(() => { this.get('onAddUsers')(this.get('bulkUsers')).then(() => {
this.set('bulkUsers', ''); this.set('bulkUsers', '');
this.notifySuccess('Added users');
}); });
this.modalClose("#add-user-modal"); this.modalClose("#add-user-modal");

11
gui/app/components/customize/user-list.js
View file

@ -15,9 +15,10 @@ import { inject as service } from '@ember/service';
import { schedule, debounce } from '@ember/runloop'; import { schedule, debounce } from '@ember/runloop';
import AuthProvider from '../../mixins/auth'; import AuthProvider from '../../mixins/auth';
import ModalMixin from '../../mixins/modal'; import ModalMixin from '../../mixins/modal';
import Notifier from '../../mixins/notifier';
import Component from '@ember/component'; import Component from '@ember/component';
export default Component.extend(AuthProvider, ModalMixin, { export default Component.extend(AuthProvider, ModalMixin, Notifier, {
groupSvc: service('group'), groupSvc: service('group'),
editUser: null, editUser: null,
deleteUser: null, deleteUser: null,
@ -171,9 +172,15 @@ export default Component.extend(AuthProvider, ModalMixin, {
let cb = this.get('onDelete'); let cb = this.get('onDelete');
cb(this.get('deleteUser.id')); cb(this.get('deleteUser.id'));
this.notifySuccess("Deleted user");
return true; return true;
}, },
onShowDeleteBulk() {
this.modalOpen("#admin-user-delete-modal", {"show": true});
},
onBulkDelete() { onBulkDelete() {
let su = this.get('selectedUsers'); let su = this.get('selectedUsers');
@ -185,6 +192,8 @@ export default Component.extend(AuthProvider, ModalMixin, {
this.set('selectedUsers', []); this.set('selectedUsers', []);
this.set('hasSelectedUsers', false); this.set('hasSelectedUsers', false);
this.notifySuccess("Deleted selected users");
this.modalClose('#admin-user-delete-modal'); this.modalClose('#admin-user-delete-modal');
}, },

1
gui/app/components/ui/ui-dialog.js
View file

@ -19,7 +19,6 @@ export default Component.extend({
confirmCaption: 'OK', confirmCaption: 'OK',
title: 'Confirm', title: 'Confirm',
show: false, show: false,
buttonType: 'btn-secondary',
size: '', // modal-lg, modal-sm size: '', // modal-lg, modal-sm
didInsertElement() { didInsertElement() {

3
gui/app/components/ui/ui-toolbar-icon.js
View file

@ -40,8 +40,7 @@ export default Component.extend({
return; return;
} }
if (is.not.undefined(this.linkTo)) { if (is.not.undefined(this.linkTo)) {
// TODO: // TODO: pass in linkModel, linkOptions
// Pass in linkModel, linkOptions
// https://emberjs.com/api/ember/3.5/classes/RouterService/methods/transitionTo?anchor=transitionTo // https://emberjs.com/api/ember/3.5/classes/RouterService/methods/transitionTo?anchor=transitionTo
this.router.transitionTo(this.linkTo); this.router.transitionTo(this.linkTo);
} }

44
gui/app/components/ui/ui-toolbar-label.js Normal file
View file

@ -0,0 +1,44 @@
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
//
// This software (Documize Community Edition) is licensed under
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
//
// You can operate outside the AGPL restrictions by purchasing
// Documize Enterprise Edition and obtaining a commercial license
// by contacting <sales@documize.com>.
//
// https://documize.com
import { inject as service } from '@ember/service';
import { computed } from '@ember/object';
import Component from '@ember/component';
export default Component.extend({
router: service(),
tagName: 'div',
classNames: ['label'],
classNameBindings: ['calcClass'],
color: '',
label: '',
tooltip: '',
calcClass: computed(function() {
let c = '';
if (this.color !== '') c += this.color + ' ';
return c.trim();
}),
click(e) {
if (is.not.undefined(this.onClick)) {
this.onClick(e);
return;
}
if (is.not.undefined(this.linkTo)) {
// TODO: pass in linkModel, linkOptions
// https://emberjs.com/api/ember/3.5/classes/RouterService/methods/transitionTo?anchor=transitionTo
this.router.transitionTo(this.linkTo);
}
}
});

4
gui/app/components/ui/ui-toolbar.js
View file

@ -24,7 +24,5 @@ export default Component.extend({
bordered: false, bordered: false,
dark: false, dark: false,
light: false, light: false,
tooltip: ''
actions: {
}
}); });

6
gui/app/constants/constants.js
View file

@ -206,6 +206,8 @@ let constants = EmberObject.extend({
BarChart: 'dicon-chart-bar-2', BarChart: 'dicon-chart-bar-2',
Bookmark: 'dicon-bookmark', Bookmark: 'dicon-bookmark',
ButtonAction: 'button-2', ButtonAction: 'button-2',
Checkbox: 'dicon-shape-rectangle',
CheckboxChecked: 'dicon-i-check',
Database: 'dicon-database', Database: 'dicon-database',
Download: 'dicon-download', Download: 'dicon-download',
Delete: 'dicon-bin', Delete: 'dicon-bin',
@ -220,6 +222,7 @@ let constants = EmberObject.extend({
Integrations: 'dicon-geometry', Integrations: 'dicon-geometry',
ListBullet: 'dicon-list-bullet-2', ListBullet: 'dicon-list-bullet-2',
Locked: 'dicon-lock', Locked: 'dicon-lock',
NotAllowed: 'dicon-ban',
Print: 'dicon-print', Print: 'dicon-print',
Pulse: 'dicon-pulse', Pulse: 'dicon-pulse',
Plus: 'dicon-e-add', Plus: 'dicon-e-add',
@ -250,7 +253,8 @@ let constants = EmberObject.extend({
Delete: 'Delete', Delete: 'Delete',
Export: 'Export', Export: 'Export',
Insert: 'Insert', Insert: 'Insert',
Join : 'Join', Join: 'Join',
Leave: 'Leave',
Next: 'Next', Next: 'Next',
Remove: 'Remove', Remove: 'Remove',
Reset: 'Reset', Reset: 'Reset',

11
gui/app/styles/core/icon.scss
View file

@ -427,3 +427,14 @@ icons
content: "\ea50"; content: "\ea50";
} }
.dicon-i-check::before {
content: "\ea51";
}
.dicon-shape-rectangle::before {
content: "\ea52";
}
.dicon-ban::before {
content: "\ea53";
}

21
gui/app/styles/core/ui/ui-toolbar.scss
View file

@ -3,13 +3,16 @@
} }
.dmz-toolbar { .dmz-toolbar {
display: inline-block; display: inline-flex;
// flex: 0 1 auto;
flex-basis: auto;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
border: 1px solid transparent; border: 1px solid transparent;
height: 30px; height: 30px;
padding: 5px 10px; width: auto;
padding: 6px 10px;
line-height: 24px; line-height: 24px;
@extend .no-select; @extend .no-select;
@include border-radius(6px); @include border-radius(6px);
@ -18,7 +21,7 @@
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: map-get($gray-shades, 600); color: map-get($gray-shades, 600);
padding: 0 0.25rem; padding: 0 0.5rem;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -26,6 +29,16 @@
} }
} }
> .label {
// display: inline-block;
font-size: 14px;
font-weight: 500;
color: map-get($gray-shades, 600);
padding: 0 0.5rem;
align-self: center;
cursor: pointer;
}
> .red { > .red {
color: map-get($red-shades, 500); color: map-get($red-shades, 500);
@ -53,7 +66,7 @@
.dmz-toolbar-large { .dmz-toolbar-large {
height: 40px; height: 40px;
padding: 7px 10px; padding: 9px 10px;
line-height: 33px; line-height: 33px;
> .dicon { > .dicon {

47
gui/app/styles/core/util.scss
View file

@ -10,25 +10,13 @@
// https://documize.com // https://documize.com
a { a {
// @include ease-in(); cursor: pointer;
color: $color-link; color: $color-link;
text-decoration: none; text-decoration: none;
cursor: pointer;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
a:focus, a:focus, a:hover {
a:hover {
text-decoration: none;
}
}
a.admin-link {
text-decoration: none;
font-weight: bold;
a:focus,
a:hover {
text-decoration: none; text-decoration: none;
} }
} }
@ -86,3 +74,34 @@ a.broken-link {
border: 1px solid map-get($gray-shades, 300); border: 1px solid map-get($gray-shades, 300);
} }
.hide {
display: none;
}
.display-block {
display: block;
}
.display-inline-block {
display: inline-block;
}
.visible {
visibility: visible;
}
.invisible {
visibility: none;
}
.align-top {
vertical-align: top!important;
}
.align-middle {
vertical-align: middle!important;
}
.text-center {
text-align: center;
}

87
gui/app/styles/core/view/customize.scss
View file

@ -1,4 +1,31 @@
.view-customize { .view-customize {
> .explain-user-perms {
padding: 15px 25px;
background-color: map-get($yellow-shades, 100);
border: 1px solid map-get($yellow-shades, 300);
@include border-radius(3px);
> .title {
font-weight: 700;
font-size: 1.1rem;
color: map-get($yellow-shades, 800);
}
> .perm-name {
font-size: 1rem;
font-weight: 600;
color: map-get($gray-shades, 800);
margin-top: 10px;
}
> .perm-desc {
font-size: 0.9rem;
font-weight: 300;
color: map-get($gray-shades, 800);
}
}
.user-table { .user-table {
tbody tr td, thead tr th { tbody tr td, thead tr th {
border-top: none !important; border-top: none !important;
@ -6,49 +33,53 @@
} }
.name { .name {
font-size: 1.2rem; font-size: 1.1rem;
font-weight: bold; font-weight: 500;
color: $color-link; color: map-get($gray-shades, 900);
margin: 0 0 0 10px; margin: 0 0 0 10px;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
> .email { > .email {
font-size: 0.9rem; font-size: 1rem;
color: $color-black-light-1; font-weight: 400;
color: map-get($gray-shades, 800);
margin: 0; margin: 0;
display: inline-block; display: block;
font-weight: normal;
} }
} }
.groups { .groups {
cursor: pointer;
margin: 5px 0 0 10px;
font-size: 1rem; font-size: 1rem;
color: map-get($gray-shades, 600); font-weight: 300;
color: map-get($yellow-shades, 900);
cursor: pointer;
margin: 0 0 0 10px;
&:hover { &:hover {
color: $color-link; color: $color-link;
} }
} }
.inactive-user .inactive-user {
{ > .name, > .name > .email, > .groups {
color: map-get($red-shades, 600); color: map-get($red-shades, 600) !important;
font-weight: normal; font-weight: normal !important;
text-decoration: line-through; text-decoration: line-through !important;
}
} }
.admin-user .admin-user {
{ > .name, > .name > .email, > .groups {
color: map-get($green-shades, 600); color: map-get($green-shades, 600);
font-weight: normal; font-weight: 600;
}
} }
.checkbox { .user-checkbox {
color: map-get($gray-shades, 900); color: map-get($green-shades, 700);
cursor: pointer; cursor: pointer;
font-weight: 600;
} }
} }
@ -119,8 +150,11 @@
// used for group admin // used for group admin
> .group-users-members { > .group-users-members {
text-align: center;
> .item { > .item {
margin: 5px 0; margin: 7px;
display: inline-block;
> .fullname { > .fullname {
color: map-get($gray-shades, 800); color: map-get($gray-shades, 800);
@ -135,10 +169,11 @@
margin: 10px 0; margin: 10px 0;
> .group-name { > .group-name {
color: $theme-500; color: map-get($gray-shades, 800);
font-size: 1.2rem; font-size: 1rem;
> .group-purpose { > .group-purpose {
color: map-get($gray-shades, 700);
font-size: 0.9rem; font-size: 0.9rem;
} }
} }
@ -169,10 +204,6 @@
} }
} }
> .max-results {
float: right;
}
> .backup-restore { > .backup-restore {
margin: 20px 0; margin: 20px 0;
font-size: 1.1rem; font-size: 1.1rem;

22
gui/app/templates/components/customize/user-admin.hbs
View file

@ -3,11 +3,10 @@
<div class="view-customize"> <div class="view-customize">
{{#if isAuthProviderDocumize}} {{#if isAuthProviderDocumize}}
{{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Person label=constants.Label.Add onClick=(action "onOpenUserModal")}} {{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Person label=constants.Label.Add onClick=(action "onOpenUserModal")}}
<div id="add-user-modal" class="modal" tabindex="-1" role="dialog"> <div id="add-user-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document"> <div class="modal-dialog modal-lg" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header">Add User</div> <div class="modal-header">Add Users</div>
<div class="modal-body"> <div class="modal-body">
<form onsubmit={{action "onAddUser"}}> <form onsubmit={{action "onAddUser"}}>
<div class="form-row"> <div class="form-row">
@ -24,31 +23,26 @@
{{input id="newUserEmail" type="email" class="form-control" placeholder="Email" value=newUser.email}} {{input id="newUserEmail" type="email" class="form-control" placeholder="Email" value=newUser.email}}
</div> </div>
</div> </div>
<div class="form-row"> {{ui/ui-spacer size=200}}
<div class="col mt-3 text-right"> {{ui/ui-button color=constants.Color.Green icon=constants.Icon.Person light=true label=constants.Label.Add onClick=(action "onAddUser")}}
<button type="submit" class="btn btn-success" {{action "onAddUser"}}>Add user</button> {{ui/ui-spacer size=300}}
</div>
</div>
</form> </form>
<form onsubmit={{action "onAddUser"}}> <form onsubmit={{action "onAddUser"}}>
<div class="form-group"> <div class="form-group">
<label for="edit-group-desc">Bulk create users</label> <label for="edit-group-desc">Bulk Upload</label>
{{textarea id="bulkUsers" value=bulkUsers class="form-control" rows="5" placeholder="firstname, lastname, email"}} {{textarea id="bulkUsers" value=bulkUsers class="form-control" rows="5" placeholder="firstname, lastname, email"}}
<small class="form-text text-muted">Comma-delimited list: firstname, lastname, email</small> <small class="form-text text-muted">Comma-delimited list: firstname, lastname, email</small>
</div> </div>
<div class="text-right"> {{ui/ui-button color=constants.Color.Green icon=constants.Icon.People light=true label=constants.Label.Add onClick=(action "onAddUsers")}}
<button type="submit" class="btn btn-success" {{action "onAddUsers"}}>Add users</button>
</div>
</form> </form>
</div> </div>
<div class="modal-footer mt-4"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button> {{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{{/if}} {{/if}}
</div> </div>
</div> </div>
</div> </div>

84
gui/app/templates/components/customize/user-groups.hbs
View file

@ -103,15 +103,13 @@
<div class="modal-header">Remove Member &mdash; {{membersGroup.name}} ({{members.length}})</div> <div class="modal-header">Remove Member &mdash; {{membersGroup.name}} ({{members.length}})</div>
<div class="modal-body"> <div class="modal-body">
<div class="view-customize"> <div class="view-customize">
<div class="group-users-members my-5"> <div class="group-users-members">
{{#each members as |member|}} {{#each members as |member|}}
<div class="row item"> <div class="item">
<div class="col-10 fullname">{{member.fullname}}</div> {{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
<div class="col-2 text-right"> {{ui/ui-toolbar-icon icon=constants.Icon.RemoveUser color=constants.Color.Red tooltip="Remove member" onClick=(action "onLeaveGroup" member.userId)}}
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}} {{ui/ui-toolbar-label color=constants.Color.Gray label=member.fullname onClick=(action "onLeaveGroup" member.userId)}}
{{ui/ui-toolbar-icon icon=constants.Icon.RemoveUser color=constants.Color.Red tooltip="Remove member" onClick=(action "onLeaveGroup" member.userId)}} {{/ui/ui-toolbar}}
{{/ui/ui-toolbar}}
</div>
</div> </div>
{{/each}} {{/each}}
</div> </div>
@ -130,58 +128,36 @@
<div class="modal-header">Add Member &mdash; {{membersGroup.name}} ({{members.length}})</div> <div class="modal-header">Add Member &mdash; {{membersGroup.name}} ({{members.length}})</div>
<div class="modal-body"> <div class="modal-body">
<div class="form-group"> <div class="form-group">
<label for="group-members-search">Search users to join this group</label> <label for="group-members-search">Find users</label>
{{input id="group-members-search" type="text" class="form-control mousetrap" placeholder="Search members and users..." value=searchText key-up=(action "onSearch")}} {{input id="group-members-search" type="text" class="form-control mousetrap" placeholder="Search members and users..." value=searchText key-up=(action "onSearch")}}
<small class="form-text text-muted">search firstname, lastname, email</small> <small class="form-text text-muted">firstname, lastname, email</small>
</div> </div>
<div class="view-customize"> <div class="view-customize">
<div class="text-center"> <div class="text-center">
<div class="btn-group btn-group-toggle"> {{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false tooltip="Maximum users to display"}}
{{#attach-tooltip showDelay=1000}}Number of users to display{{/attach-tooltip}} {{ui/ui-toolbar-label color=constants.Color.Gray label="1" onClick=(action "onLimit" 1)}}
<label class="btn btn-outline-secondary {{if (eq userLimit 1) "active"}}"> {{ui/ui-toolbar-label color=constants.Color.Gray label="10" onClick=(action "onLimit" 10)}}
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 1}}>1 {{ui/ui-toolbar-label color=constants.Color.Gray label="25" onClick=(action "onLimit" 25)}}
</label> {{ui/ui-toolbar-label color=constants.Color.Gray label="50" onClick=(action "onLimit" 50)}}
<label class="btn btn-outline-secondary {{if (eq userLimit 10) "active"}}"> {{ui/ui-toolbar-label color=constants.Color.Gray label="100" onClick=(action "onLimit" 100)}}
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 10}}>10 {{ui/ui-toolbar-label color=constants.Color.Gray label="250" onClick=(action "onLimit" 250)}}
</label> {{ui/ui-toolbar-label color=constants.Color.Gray label="500" onClick=(action "onLimit" 500)}}
<label class="btn btn-outline-secondary {{if (eq userLimit 25) "active"}}"> {{ui/ui-toolbar-label color=constants.Color.Gray label="1,000" onClick=(action "onLimit" 1000)}}
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 25}}>25 {{ui/ui-toolbar-label color=constants.Color.Gray label="ALL" onClick=(action "onLimit" 99999)}}
</label> {{/ui/ui-toolbar}}
<label class="btn btn-outline-secondary {{if (eq userLimit 50) "active"}}">
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 50}}>50
</label>
<label class="btn btn-outline-secondary {{if (eq userLimit 100) "active"}}">
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 100}}>100
</label>
<label class="btn btn-outline-secondary {{if (eq userLimit 250) "active"}}">
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 250}}>250
</label>
<label class="btn btn-outline-secondary {{if (eq userLimit 500) "active"}}">
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 500}}>500
</label>
<label class="btn btn-outline-secondary {{if (eq userLimit 1000) "active"}}">
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 1000}}>1,000
</label>
<label class="btn btn-outline-secondary {{if (eq userLimit 99999) "active"}}">
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 99999}}>all
</label>
</div>
</div> </div>
<div class="clearfix" /> {{ui/ui-spacer size=300}}
<div class="group-users-members">
<div class="group-users-members my-5">
{{#each users as |user|}} {{#each users as |user|}}
<div class="row item"> <div class="item">
<div class="col-10 fullname">{{user.firstname}} {{user.lastname}}</div> {{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
<div class="col-2 text-right"> {{#if user.isMember}}
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}} {{ui/ui-toolbar-icon icon=constants.Icon.RemoveUser color=constants.Color.Red tooltip="Remove member" onClick=(action "onLeaveGroup" user.id)}}
{{#if user.isMember}} {{else}}
{{ui/ui-toolbar-icon icon=constants.Icon.RemoveUser color=constants.Color.Red tooltip="Remove member" onClick=(action "onLeaveGroup" user.id)}} {{ui/ui-toolbar-icon icon=constants.Icon.AddUser color=constants.Color.Green tooltip="Add member" onClick=(action "onJoinGroup" user.id)}}
{{else}} {{ui/ui-toolbar-label color=constants.Color.Gray label=(concat user.firstname " " user.lastname) onClick=(action "onJoinGroup" user.id)}}
{{ui/ui-toolbar-icon icon=constants.Icon.AddUser color=constants.Color.Green tooltip="Add member" onClick=(action "onJoinGroup" user.id)}} {{/if}}
{{/if}} {{/ui/ui-toolbar}}
{{/ui/ui-toolbar}}
</div>
</div> </div>
{{/each}} {{/each}}
</div> </div>

282
gui/app/templates/components/customize/user-list.hbs
View file

@ -1,184 +1,165 @@
<div class="view-customize my-5"> <div class="view-customize">
{{#if isAuthProviderKeycloak}} {{#if isAuthProviderKeycloak}}
{{#if syncInProgress}} {{ui/ui-spacer size=300}}
<div class="btn btn-secondary mt-3 mb-3">Keycloak user sync running...</div> {{#if syncInProgress}}
{{else}} {{ui/ui-button color=constants.Color.Gray light=true icon=constants.Icon.Locked label="Keycloak user sync running..."}}
<div class="btn btn-success mt-3 mb-3" {{action "onSyncKeycloak"}}>Sync with Keycloak</div> {{else}}
{{/if}} {{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.Locked label="Sync with Keycloak" onClick=(action "onSyncKeycloak")}}
{{/if}}
{{/if}} {{/if}}
{{#if isAuthProviderLDAP}} {{#if isAuthProviderLDAP}}
{{#if syncInProgress}} {{ui/ui-spacer size=300}}
<div class="btn btn-secondary mt-3 mb-3">LDAP user sync running...</div> {{#if syncInProgress}}
{{else}} {{ui/ui-button color=constants.Color.Gray light=true icon=constants.Icon.Locked label="LDAP user sync running..."}}
<div class="btn btn-success mt-3 mb-3" {{action "onSyncLDAP"}}>Sync with LDAP</div> {{else}}
{{/if}} {{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.Locked label="Sync with LDAP" onClick=(action "onSyncLDAP")}}
{{/if}}
{{/if}} {{/if}}
<div class="my-2"> {{ui/ui-spacer size=300}}
<span class="bold-700">Spaces</span> <div class="explain-user-perms">
<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can add spaces, both personal and shared with others</span> <div class="title">User Permissions Explained</div>
</div> <div class="perm-name">Spaces</div>
<div class="my-2"> <div class="perm-desc">Can add spaces, both personal and shared with others</div>
<span class="bold-700">Visible</span> <div class="perm-name">Visible</div>
<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can see names of users and groups, can disable for external users <div class="perm-desc">Can see names of users and groups, can disable for external users like customers/partners</div>
like customers/partners</span> <div class="perm-name">Admin</div>
</div> <div class="perm-desc">Can manage all aspects of Documize, like this screen</div>
<div class="my-2"> <div class="perm-name">Analytics</div>
<span class="bold-700">Admin</span> <div class="perm-desc">Can view analytical reports<</div>
<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can manage all aspects of Documize, like this screen</span> <div class="perm-name">Active</div>
</div> <div class="perm-desc">Can login and use Documize</div>
<div class="my-2">
<span class="bold-700">Analytics</span>
<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can view analytical reports</span>
</div>
<div class="mt-2 mb-4">
<span class="bold-700">Active</span>
<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can login and use Documize</span>
</div> </div>
{{ui/ui-spacer size=300}}
<div class="form-group mt-5 mb-3"> <div class="form-group">
{{focus-input type="text" class="form-control" placeholder="filter users" value=filter}} {{focus-input type="text" class="form-control" placeholder="filter users" value=filter}}
<small class="form-text text-muted">search firstname, lastname, email</small> <small class="form-text text-muted">search firstname, lastname, email</small>
</div> </div>
<div class="max-results py-3"> <div class="text-center">
<div class="btn-group btn-group-toggle"> {{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false tooltip="Maximum users to display"}}
{{#attach-tooltip showDelay=1000}}Number of users to display{{/attach-tooltip}} {{ui/ui-toolbar-label color=constants.Color.Gray label="1" onClick=(action "onLimit" 1)}}
<label class="btn btn-outline-secondary {{if (eq userLimit 1) "active"}}"> {{ui/ui-toolbar-label color=constants.Color.Gray label="10" onClick=(action "onLimit" 10)}}
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 1}}>1 {{ui/ui-toolbar-label color=constants.Color.Gray label="25" onClick=(action "onLimit" 25)}}
</label> {{ui/ui-toolbar-label color=constants.Color.Gray label="50" onClick=(action "onLimit" 50)}}
<label class="btn btn-outline-secondary {{if (eq userLimit 10) "active"}}"> {{ui/ui-toolbar-label color=constants.Color.Gray label="100" onClick=(action "onLimit" 100)}}
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 10}}>10 {{ui/ui-toolbar-label color=constants.Color.Gray label="250" onClick=(action "onLimit" 250)}}
</label> {{ui/ui-toolbar-label color=constants.Color.Gray label="500" onClick=(action "onLimit" 500)}}
<label class="btn btn-outline-secondary {{if (eq userLimit 25) "active"}}"> {{ui/ui-toolbar-label color=constants.Color.Gray label="1,000" onClick=(action "onLimit" 1000)}}
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 25}}>25 {{ui/ui-toolbar-label color=constants.Color.Gray label="ALL" onClick=(action "onLimit" 99999)}}
</label> {{/ui/ui-toolbar}}
<label class="btn btn-outline-secondary {{if (eq userLimit 50) "active"}}">
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 50}}>50
</label>
<label class="btn btn-outline-secondary {{if (eq userLimit 100) "active"}}">
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 100}}>100
</label>
<label class="btn btn-outline-secondary {{if (eq userLimit 250) "active"}}">
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 250}}>250
</label>
<label class="btn btn-outline-secondary {{if (eq userLimit 500) "active"}}">
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 500}}>500
</label>
<label class="btn btn-outline-secondary {{if (eq userLimit 1000) "active"}}">
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 1000}}>1,000
</label>
<label class="btn btn-outline-secondary {{if (eq userLimit 99999) "active"}}">
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 99999}}>all
</label>
</div>
</div> </div>
<table class="table table-responsive table-borderless user-table"> <table class="table table-responsive table-borderless user-table">
<thead> <thead>
<tr> <tr>
<th class="text-muted"> <th class="no-width"></th>
<th>
{{#if hasSelectedUsers}} {{#if hasSelectedUsers}}
<button id="bulk-delete-users" type="button" class="btn btn-danger" data-toggle="modal" data-target="#admin-user-delete-modal" {{ui/ui-button
data-backdrop="static">Delete selected users</button> id="bulk-delete-users"
color=constants.Color.Red
light=false
icon=constants.Icon.Delete
label="Delete selected users"
onClick=(action "onShowDeleteBulk")}}
{{/if}} {{/if}}
</th> </th>
<th class="no-width">Spaces</th> <th class="no-width">Spaces</th>
<th class="no-width">Visible</th> <th class="no-width">Visible</th>
<th class="no-width">Admin</th>
<th class="no-width">Analytics</th> <th class="no-width">Analytics</th>
<th class="no-width">Admin</th>
<th class="no-width">Active</th> <th class="no-width">Active</th>
<th class="no-width"> <th class="no-width"></th>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{{#each users key="id" as |user|}} {{#each users key="id" as |user|}}
<tr> <tr>
<td class="{{unless user.active "inactive-user"}} {{if user.admin "admin-user"}}"> <td class="no-width text-center align-middle">
<div class="d-inline-block align-top">
{{#if user.me}} {{#if user.me}}
<i class="material-icons color-gray-700">check_box_outline_blank</i> <i class="user-checkbox dicon {{constants.Icon.NotAllowed}}" />
{{else if user.selected}} {{else if user.selected}}
<i class="material-icons checkbox" {{action "toggleSelect" user}}>check_box</i> <i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleSelect" user}} />
{{else}} {{else}}
<i class="material-icons checkbox" {{action "toggleSelect" user}}>check_box_outline_blank</i> <i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleSelect" user}} />
{{/if}} {{/if}}
</div> </td>
<div class="d-inline-block"> <td class="{{unless user.active "inactive-user"}} {{if user.admin "admin-user"}}">
<div class="name" {{action "onShowEdit" user.id}}>{{user.fullname}}<div class="email">&nbsp;&nbsp;({{user.email}})</div> <div class="name" {{action "onShowEdit" user.id}}>
{{user.fullname}}
<div class="email">{{user.email}}</div>
</div> </div>
<div class="groups" {{action "onShowGroupsModal" user.id}}> <div class="groups" {{action "onShowGroupsModal" user.id}}>
{{#each user.groups as |group|}} {{#each user.groups as |group|}}
<span class="group"> <span class="group">
{{group.name}}{{#if (not-eq group user.groups.lastObject)}}, {{/if}} {{group.name}}{{#if (not-eq group user.groups.lastObject)}}, {{/if}}
</span> </span>
{{else}} {{else}}
<span class="group">&lt;no groups&gt;</span> <span class="group">&lt;no groups&gt;</span>
{{/each}} {{/each}}
</div> </div>
</div> </td>
</td> <td class="no-width text-center align-middle">
<td class="no-width text-center"> {{#if user.editor}}
{{#if user.editor}} <i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleEditor" user.id}} />
<i class="material-icons checkbox" {{action "toggleEditor" user.id}}>check_box</i> {{else}}
{{else}} <i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleEditor" user.id}} />
<i class="material-icons checkbox" {{action "toggleEditor" user.id}}>check_box_outline_blank</i> {{/if}}
{{/if}} </td>
</td> <td class="no-width text-center align-middle">
<td class="no-width text-center"> {{#if user.viewUsers}}
{{#if user.viewUsers}} <i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleUsers" user.id}} />
<i class="material-icons checkbox" {{action "toggleUsers" user.id}}>check_box</i> {{else}}
{{else}} <i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleUsers" user.id}} />
<i class="material-icons checkbox" {{action "toggleUsers" user.id}}>check_box_outline_blank</i> {{/if}}
{{/if}} </td>
</td> <td class="no-width text-center align-middle">
<td class="no-width text-center"> {{#if user.analytics}}
{{#if user.me}} <i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleAnalytics" user.id}} />
<i class="material-icons color-gray-700">check_box</i> {{else}}
{{else if user.admin}} <i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleAnalytics" user.id}} />
<i class="material-icons checkbox" {{action "toggleAdmin" user.id}}>check_box</i> {{/if}}
{{else}} </td>
<i class="material-icons checkbox" {{action "toggleAdmin" user.id}}>check_box_outline_blank</i> <td class="no-width text-center align-middle">
{{/if}} {{#if user.me}}
</td> <i class="user-checkbox dicon {{constants.Icon.NotAllowed}}" />
<td class="no-width text-center"> {{else if user.admin}}
{{#if user.analytics}} <i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleAdmin" user.id}} />
<i class="material-icons checkbox" {{action "toggleAnalytics" user.id}}>check_box</i> {{else}}
{{else}} <i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleAdmin" user.id}} />
<i class="material-icons checkbox" {{action "toggleAnalytics" user.id}}>check_box_outline_blank</i> {{/if}}
{{/if}} </td>
</td> <td class="no-width text-center align-middle">
<td class="no-width text-center"> {{#if user.me}}
{{#if user.me}} <i class="user-checkbox dicon {{constants.Icon.NotAllowed}}" />
<i class="material-icons color-gray-700">check_box</i> {{else if user.active}}
{{else if user.active}} <i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleActive" user.id}} />
<i class="material-icons checkbox" {{action "toggleActive" user.id}}>check_box</i> {{else}}
{{else}} <i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleActive" user.id}} />
<i class="material-icons checkbox" {{action "toggleActive" user.id}}>check_box_outline_blank</i> {{/if}}
{{/if}} </td>
</td> <td class="no-width text-center align-middle">
<td class="no-width text-center"> {{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
<div class="user-button-{{user.id}} button-icon-gray button-icon-small" title="Edit" {{ui/ui-toolbar-icon icon=constants.Icon.Edit color=constants.Color.Gray tooltip="Edit user" onClick=(action "onShowEdit" user.id)}}
{{action "onShowEdit" user.id}}> {{ui/ui-toolbar-icon icon=constants.Icon.AddUser color=constants.Color.Gray tooltip="Assign user groups" onClick=(action "onShowGroupsModal" user.id)}}
<i class="material-icons">mode_edit</i> {{#unless user.me}}
{{#attach-tooltip showDelay=1000}}Edit user{{/attach-tooltip}} {{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red tooltip="Delete user" onClick=(action "onShowDelete" user.id)}}
</div> {{/unless}}
{{#unless user.me}} {{/ui/ui-toolbar}}
<div class="button-icon-gap" /> </td>
<div class="delete-button-{{user.id}} button-icon-red button-icon-small" title="Delete" </tr>
{{action "onShowDelete" user.id}}>
<i class="material-icons">delete</i>
{{#attach-tooltip showDelay=1000}}Delete user{{/attach-tooltip}}
</div>
{{/unless}}
</td>
</tr>
{{/each}} {{/each}}
</tbody> </tbody>
</table> </table>
</div> </div>
{{#ui/ui-dialog title="Delete User" confirmCaption="Delete" buttonColor=constants.Color.Red show=showDeleteDialog onAction=(action "onDelete")}}
<p>Are you sure you want to delete {{deleteUser.fullname}}?</p>
{{/ui/ui-dialog}}
<div id="edit-user-modal" class="modal" tabindex="-1" role="dialog"> <div id="edit-user-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
@ -218,18 +199,13 @@
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button> {{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
<button type="button" class="btn btn-success" onclick={{action "onUpdate"}}>Save</button> {{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Update onClick=(action "onUpdate")}}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{{#ui/ui-dialog title="Delete User" confirmCaption="Delete" buttonType="btn-danger" show=showDeleteDialog
onAction=(action "onDelete")}}
<p>Are you sure you want to delete {{deleteUser.fullname}}?</p>
{{/ui/ui-dialog}}
<div id="admin-user-delete-modal" class="modal" tabindex="-1" role="dialog"> <div id="admin-user-delete-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
@ -238,8 +214,8 @@ onAction=(action "onDelete")}}
<p>Are you sure you want to delete selected users?</p> <p>Are you sure you want to delete selected users?</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button> {{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
<button type="button" class="btn btn-success" onclick={{action "onBulkDelete"}}>Delete</button> {{ui/ui-button color=constants.Color.Red light=true label=constants.Label.Delete onClick=(action "onBulkDelete")}}
</div> </div>
</div> </div>
</div> </div>
@ -251,19 +227,19 @@ onAction=(action "onDelete")}}
<div class="modal-header">{{selectedUser.fullname}}</div> <div class="modal-header">{{selectedUser.fullname}}</div>
<div class="modal-body"> <div class="modal-body">
<div class="view-customize"> <div class="view-customize">
<div class="group-membership my-5"> <div class="group-membership">
{{#each groups as |group|}} {{#each groups as |group|}}
<div class="row item"> <div class="row item">
<div class="col-10 group-name">{{group.name}} <div class="col-10 group-name">{{group.name}}
{{#if group.purpose}} {{#if group.purpose}}
<span class="text-muted group-purpose">&nbsp;&nbsp;&mdash;&nbsp;{{group.purpose}}</span> <span class="group-purpose">&nbsp;&mdash;&nbsp;{{group.purpose}}</span>
{{/if}} {{/if}}
</div> </div>
<div class="col-2 text-right"> <div class="col-2 text-right">
{{#if group.isMember}} {{#if group.isMember}}
<button class="btn btn-danger" {{action "onLeaveGroup" group.id}}>Leave</button> {{ui/ui-button color=constants.Color.Red light=true label=constants.Label.Leave onClick=(action "onLeaveGroup" group.id)}}
{{else}} {{else}}
<button class="btn btn-success" {{action "onJoinGroup" group.id}}>Join</button> {{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Join onClick=(action "onJoinGroup" group.id)}}
{{/if}} {{/if}}
</div> </div>
</div> </div>
@ -272,7 +248,7 @@ onAction=(action "onDelete")}}
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button> {{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
</div> </div>
</div> </div>
</div> </div>

2
gui/app/templates/components/document/view-attachment.hbs
View file

@ -26,6 +26,6 @@
{{/if}} {{/if}}
</div> </div>
{{#ui/ui-dialog title="Delete Attachment" confirmCaption="Delete" buttonType="btn-danger" show=showDialog onAction=(action "onDelete")}} {{#ui/ui-dialog title="Delete Attachment" confirmCaption="Delete" buttonColor=constants.Color.Red show=showDialog onAction=(action "onDelete")}}
<p>Are you sure you want to delete {{deleteAttachment.name}}?</p> <p>Are you sure you want to delete {{deleteAttachment.name}}?</p>
{{/ui/ui-dialog}} {{/ui/ui-dialog}}

4
gui/app/templates/components/folder/documents-list.hbs
View file

@ -49,11 +49,11 @@
</ul> </ul>
</div> </div>
{{#ui/ui-dialog title="Delete Documents" confirmCaption="Delete" buttonType="btn-danger" show=showDeleteDialog onAction=(action "onDeleteDocuments")}} {{#ui/ui-dialog title="Delete Documents" confirmCaption="Delete" buttonColor=constants.Color.Red show=showDeleteDialog onAction=(action "onDeleteDocuments")}}
<p>Are you sure you want to delete {{selectedDocuments.length}} {{selectedCaption}}?</p> <p>Are you sure you want to delete {{selectedDocuments.length}} {{selectedCaption}}?</p>
{{/ui/ui-dialog}} {{/ui/ui-dialog}}
{{#ui/ui-dialog title="Move Documents" confirmCaption="Move" buttonType="btn-success" show=showMoveDialog onAction=(action "onMoveDocuments")}} {{#ui/ui-dialog title="Move Documents" confirmCaption="Move" buttonColor=constants.Color.Green show=showMoveDialog onAction=(action "onMoveDocuments")}}
<p>Select space for {{selectedDocuments.length}} {{selectedCaption}}</p> <p>Select space for {{selectedDocuments.length}} {{selectedCaption}}</p>
{{ui/ui-list-picker items=moveOptions nameField="name" singleSelect=true}} {{ui/ui-list-picker items=moveOptions nameField="name" singleSelect=true}}
{{/ui/ui-dialog}} {{/ui/ui-dialog}}

2
gui/app/templates/components/folder/settings-blocks.hbs
View file

@ -12,7 +12,7 @@
</div> </div>
{{#if isSpaceAdmin}} {{#if isSpaceAdmin}}
    {{#ui/ui-dialog title="Delete Content Block" confirmCaption="Delete" buttonType="btn-danger" show=showDeleteDialog onAction=(action "onDeleteBlock")}}     {{#ui/ui-dialog title="Delete Content Block" confirmCaption="Delete" buttonColor=constants.Color.Red show=showDeleteDialog onAction=(action "onDeleteBlock")}}
        <p>Are you sure you want to delete this re-usable content block?</p>         <p>Are you sure you want to delete this re-usable content block?</p>
    {{/ui/ui-dialog}}     {{/ui/ui-dialog}}
{{/if}} {{/if}}

2
gui/app/templates/components/folder/settings-category.hbs
View file

@ -68,7 +68,7 @@
</div> </div>
</div> </div>
{{#ui/ui-dialog title="Set Category Access" confirmCaption="Save" buttonType="btn-success" show=showCategoryAccess onAction=(action "onGrantAccess")}} {{#ui/ui-dialog title="Set Category Access" confirmCaption="Save" buttonColor=constants.Color.Green show=showCategoryAccess onAction=(action "onGrantAccess")}}
<p>Select who can view documents within category</p> <p>Select who can view documents within category</p>
<div class="widget-list-picker"> <div class="widget-list-picker">

4
gui/app/templates/components/ui/ui-dialog.hbs
View file

@ -8,8 +8,8 @@
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal" {{action "onCancel"}}>{{cancelCaption}}</button> {{ui/ui-button color=constants.Color.Gray light=true label=cancelCaption dismiss=true onClick=(action "onCancel")}}
<button type="button" class="btn {{buttonType}}" onclick={{action "onAction"}}>{{confirmCaption}}</button> {{ui/ui-button color=buttonColor light=true label=confirmCaption onClick=(action "onAction")}}
</div> </div>
</div> </div>
</div> </div>

4
gui/app/templates/components/ui/ui-toolbar-label.hbs Normal file
View file

@ -0,0 +1,4 @@
{{label}}
{{#if tooltip}}
{{#attach-tooltip showDelay=1000}}{{tooltip}}{{/attach-tooltip}}
{{/if}}

5
gui/app/templates/components/ui/ui-toolbar.hbs
View file

@ -1 +1,4 @@
{{yield}} {{yield}}
{{#if tooltip}}
{{#attach-tooltip showDelay=1000}}{{tooltip}}{{/attach-tooltip}}
{{/if}}

BIN
gui/public/assets/font/dmzui.eot
View file

Binary file not shown.

9
gui/public/assets/font/dmzui.svg
View file

@ -208,6 +208,15 @@
<glyph glyph-name="delete-28" <glyph glyph-name="delete-28"
unicode="&#xEA50;" unicode="&#xEA50;"
horiz-adv-x="256" d="M138.5 254.567C129.017 252.344 124.29 250.347 116.932 245.455C103.327 236.41 92.741 220.991 89.499 205.5C87.557 196.216 87.557 171.784 89.499 162.5C95.523 133.713 122.37 112.035 152 112.035C181.63 112.035 208.477 133.713 214.501 162.5C216.443 171.784 216.443 196.216 214.501 205.5C209.973 227.14 192.501 246.356 171.282 253.034C162.535 255.787 146.832 256.521 138.5 254.567M161.447 238.925C170.818 237.193 177.765 233.339 185.552 225.552C197.01 214.093 200 205.495 200 184C200 162.52 197.015 153.928 185.552 142.42C175.727 132.557 165.124 128 152 128C138.876 128 128.273 132.557 118.448 142.42C106.985 153.928 104 162.52 104 184C104 205.616 106.948 214.115 118.42 225.568C130.643 237.769 144.473 242.063 161.447 238.925M2.455 133.545C-0.734 130.357 -0.735 126.085 2.452 122.646L4.905 120L40 120L75.095 120L77.548 122.646C80.735 126.085 80.734 130.357 77.545 133.545L75.091 136L40 136L4.909 136L2.455 133.545M125.056 94.96C105.685 93.09 84.364 88.057 72.347 82.517C62.646 78.045 56.822 72.441 52.235 63.165L48.5 55.612L48.176 30.532L47.853 5.451L50.379 2.726L52.905 0L152 0L251.095 0L253.621 2.726L256.147 5.451L255.824 30.476L255.5 55.5L252.39 62C247.697 71.807 242.213 77.357 232.646 81.98C223.492 86.404 206.645 91.047 190.981 93.463C178.455 95.394 138.869 96.294 125.056 94.96M175.5 78.945C190.834 77.624 209.465 73.88 220.406 69.92C227.559 67.332 229.693 66.023 233.3 62.011C239.244 55.4 240 52.084 240 32.634L240 16L152 16L64 16L64 32.634C64 52.084 64.756 55.4 70.7 62.011C74.307 66.023 76.441 67.332 83.594 69.92C106.533 78.221 142.697 81.772 175.5 78.945" /> horiz-adv-x="256" d="M138.5 254.567C129.017 252.344 124.29 250.347 116.932 245.455C103.327 236.41 92.741 220.991 89.499 205.5C87.557 196.216 87.557 171.784 89.499 162.5C95.523 133.713 122.37 112.035 152 112.035C181.63 112.035 208.477 133.713 214.501 162.5C216.443 171.784 216.443 196.216 214.501 205.5C209.973 227.14 192.501 246.356 171.282 253.034C162.535 255.787 146.832 256.521 138.5 254.567M161.447 238.925C170.818 237.193 177.765 233.339 185.552 225.552C197.01 214.093 200 205.495 200 184C200 162.52 197.015 153.928 185.552 142.42C175.727 132.557 165.124 128 152 128C138.876 128 128.273 132.557 118.448 142.42C106.985 153.928 104 162.52 104 184C104 205.616 106.948 214.115 118.42 225.568C130.643 237.769 144.473 242.063 161.447 238.925M2.455 133.545C-0.734 130.357 -0.735 126.085 2.452 122.646L4.905 120L40 120L75.095 120L77.548 122.646C80.735 126.085 80.734 130.357 77.545 133.545L75.091 136L40 136L4.909 136L2.455 133.545M125.056 94.96C105.685 93.09 84.364 88.057 72.347 82.517C62.646 78.045 56.822 72.441 52.235 63.165L48.5 55.612L48.176 30.532L47.853 5.451L50.379 2.726L52.905 0L152 0L251.095 0L253.621 2.726L256.147 5.451L255.824 30.476L255.5 55.5L252.39 62C247.697 71.807 242.213 77.357 232.646 81.98C223.492 86.404 206.645 91.047 190.981 93.463C178.455 95.394 138.869 96.294 125.056 94.96M175.5 78.945C190.834 77.624 209.465 73.88 220.406 69.92C227.559 67.332 229.693 66.023 233.3 62.011C239.244 55.4 240 52.084 240 32.634L240 16L152 16L64 16L64 32.634C64 52.084 64.756 55.4 70.7 62.011C74.307 66.023 76.441 67.332 83.594 69.92C106.533 78.221 142.697 81.772 175.5 78.945" />
<glyph glyph-name="i-check"
unicode="&#xEA51;"
horiz-adv-x="256" d="M10.455 245.545L8 243.091L8 128.191L8 13.292L10.452 10.646L12.905 8L128 8L243.095 8L245.548 10.646L248 13.292L248 128.191L248 243.091L245.545 245.545L243.091 248L128 248L12.909 248L10.455 245.545M232 128L232 24L128 24L24 24L24 128L24 232L128 232L232 232L232 128M142.294 137.781L104.027 99.562L89.686 113.781C77.205 126.156 74.928 128 72.127 128C67.821 128 64 124.18 64 119.874C64 117.039 66.163 114.486 82.258 98.329C98.975 81.547 100.81 80 104.006 80C107.271 80 110.215 82.722 149.748 122.286C188.128 160.697 192 164.87 192 167.831C192 172.205 188.203 176 183.826 176C180.863 176 177.013 172.457 142.294 137.781" />
<glyph glyph-name="shape-rectangle"
unicode="&#xEA52;"
horiz-adv-x="256" d="M10.455 245.545L8 243.091L8 128.191L8 13.292L10.452 10.646L12.905 8L128 8L243.095 8L245.548 10.646L248 13.292L248 128.191L248 243.091L245.545 245.545L243.091 248L128 248L12.909 248L10.455 245.545M232 128L232 24L128 24L24 24L24 128L24 232L128 232L232 232L232 128" />
<glyph glyph-name="ban"
unicode="&#xEA53;"
horiz-adv-x="256" d="M108.5 254.445C52.322 244.952 9.966 202.042 1.455 146C-6.75 91.975 22.552 37.106 72.5 12.966C121.039 -10.492 177.702 -1.335 216.645 36.262C237.237 56.142 250.195 81.352 254.545 110C260.553 149.555 246.4 190.784 216.877 219.734C188.93 247.14 146.222 260.818 108.5 254.445M142.566 238.928C152.073 237.605 165.141 233.878 174.463 229.829C181.798 226.644 196.264 217.575 199.219 214.311C200.863 212.494 197.951 209.446 122.081 133.581L43.234 54.739L38.713 60.499C25.535 77.289 16 105.232 16 127.059C16 156.999 27.895 185.818 49 207.011C73.5 231.612 108.738 243.633 142.566 238.928M218.048 194.25C224.578 185.631 232.292 169.928 235.417 158.888C241.449 137.582 241.442 118.271 235.394 97.112C226.798 67.039 205.791 41.921 177.283 27.627C146.956 12.421 109.451 12.268 79.5 27.228C71.221 31.363 61.196 37.709 57.212 41.337L54.924 43.42L133.71 122.21C177.042 165.544 212.594 201 212.714 201C212.834 201 215.235 197.962 218.048 194.25" />
</font> </font>
</defs> </defs>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 84 KiB

Before After
Before After

BIN
gui/public/assets/font/dmzui.ttf
View file

Binary file not shown.

BIN
gui/public/assets/font/dmzui.woff
View file

Binary file not shown.

BIN
gui/public/assets/font/dmzui.woff2
View file

Binary file not shown.