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

Introduce modular UI framework

Browse source 
1. Modals wrapped
2. Toolbar icon actions: click and link-to navigation
3. Moved components into sub-folders
4. Replaced Bootstrap Tooltip and Dropdown libs with Ember specific add-ons

And more.

Co-Authored-By: Saul S <sauls8t@users.noreply.github.com>
Co-Authored-By: McMatts <matt@documize.com>
This commit is contained in:
Harvey Kandola 2018-12-11 18:00:08 +00:00
parent f140e7ef77
commit 6eb68f84e0
48 changed files with 330 additions and 240 deletions
Download patch file Download diff file Expand all files Collapse all files

18
gui/app/components/layout/page-desc.js Normal file
View file

@ -0,0 +1,18 @@
// 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 $ from 'jquery';
import Component from '@ember/component';
export default Component.extend({
tagName: 'p',
classNames: ['master-page-desc'],
});

18
gui/app/components/layout/page-heading.js Normal file
View file

@ -0,0 +1,18 @@
// 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 $ from 'jquery';
import Component from '@ember/component';
export default Component.extend({
tagName: 'h1',
classNames: ['master-page-heading'],
});

0
gui/app/components/documize-setup.js → gui/app/components/setup/documize-setup.js
View file

0
gui/app/components/empty-state.js → gui/app/components/ui/empty-state.js
View file

26
gui/app/components/ui/ui-button.js
View file

@ -16,12 +16,14 @@ export default Component.extend({
tagName: 'button',
classNames: [],
classNameBindings: ['calcClass'],
attributeBindings: ['calcAttrs:data-dismiss'],
label: '',
icon: '',
color: '',
light: false,
themed: false,
dismiss: false,
iconClass: '',
hasIcon: computed('iconClass', function() {
@ -30,15 +32,7 @@ export default Component.extend({
calcClass: computed(function() {
// Prepare icon class name
let ic = '';
let icon = this.icon;
if (icon === 'delete') ic = 'dicon-bin';
if (icon === 'print') ic = 'dicon-print';
if (icon === 'settings') ic = 'dicon-settings-gear';
if (icon === 'plus') ic = 'dicon-e-add';
if (icon === 'person') ic = 'dicon-single-01';
this.iconClass = ic;
this.iconClass = this.icon;
// Prepare button class name
let bc = 'dmz-button';
@ -55,7 +49,17 @@ export default Component.extend({
return bc;
}),
click() {
this.onClick();
calcAttrs: computed(function() {
if (this.dismiss) {
return 'modal';
}
return null;
}),
click(e) {
if (is.not.undefined(this.onClick)) {
this.onClick(e);
}
}
});

17
gui/app/components/ui/ui-modal-buttons.js Normal file
View file

@ -0,0 +1,17 @@
// 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 Component from '@ember/component';
export default Component.extend({
tagName: 'div',
classNames: ['modal-footer'],
});

28
gui/app/components/ui/ui-modal.js Normal file
View file

@ -0,0 +1,28 @@
// 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 $ from 'jquery';
import stringUtil from '../../utils/string';
import Component from '@ember/component';
export default Component.extend({
contentId: '',
title: '',
size: '',
didInsertElement() {
this._super(...arguments);
this.set("contentId", 'confirm-modal-' + stringUtil.makeId(10));
},
actions: {
}
});

7
gui/app/components/ui-select.js → gui/app/components/ui/ui-select.js
View file

@ -1,16 +1,15 @@
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
//
// This software (Documize Community Edition) is licensed under
// 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>.
// by contacting <sales@documize.com>.
//
// https://documize.com
import { reads } from '@ember/object/computed';
import Component from '@ember/component';
export default Component.extend({
@ -45,4 +44,4 @@ export default Component.extend({
changeCallback(selection);
}
}
});
});

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

@ -9,46 +9,41 @@
//
// 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: 'i',
classNames: ['dicon'],
classNameBindings: ['calcClass'],
color: '',
icon: '',
tooltip: '',
calcClass: computed(function() {
let c = '';
let icon = this.icon;
switch (this.color) {
case 'red':
c += 'red';
break;
case 'yellow':
c += 'yellow';
break;
case 'green':
c += 'green';
break;
}
c += ' ';
if (icon === 'delete') c += 'dicon-bin';
if (icon === 'print') c += 'dicon-print';
if (icon === 'settings') c += 'dicon-settings-gear';
if (icon === 'plus') c += 'dicon-e-add';
if (icon === 'person') c += 'dicon-single-01';
c += ' ';
if (this.color !== '') c += this.color + ' ';
if (icon !== '') c += icon + ' ';
return c.trim();
}),
click() {
this.onClick();
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);
}
}
});

57
gui/app/components/user-notification.js
View file

@ -1,57 +0,0 @@
// 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 { run } from '@ember/runloop';
import Component from '@ember/component';
import miscUtil from '../utils/misc';
export default Component.extend({
notifications : null,
init() {
this._super(...arguments);
},
didInsertElement() {
// this.eventBus.subscribe('notifyUser', this, 'showNotification');
},
willDestroyElement() {
// this.eventBus.unsubscribe('notifyUser');
},
showNotification(msg) {
let self = this;
let notifications = this.get('notifications');
notifications.pushObject(msg);
this.set('notifications', notifications);
let elem = this.$(".user-notification")[0];
run(() => {
self.$(elem).show();
// FIXME: need a more robust solution
miscUtil.interval(function() {
let notifications = self.get('notifications');
if (notifications.length > 0) {
notifications.removeAt(0);
self.set('notifications', notifications);
}
if (notifications.length === 0) {
self.$(elem).hide();
}
}, 2500, self.get('notifications').length);
});
},
});

0
gui/app/components/forgot-password.js → gui/app/components/user/forgot-password.js
View file

2
gui/app/components/password-reset.js → gui/app/components/user/password-reset.js
View file

@ -11,9 +11,9 @@
import $ from 'jquery';
import { empty, and } from '@ember/object/computed';
import Component from '@ember/component';
import { isEqual, isEmpty } from '@ember/utils';
import { set } from '@ember/object';
import Component from '@ember/component';
export default Component.extend({
password: "",

2
gui/app/components/user-profile.js → gui/app/components/user/user-profile.js
View file

@ -14,7 +14,7 @@ import { empty } from '@ember/object/computed';
import { computed, set } from '@ember/object';
import { isPresent, isEqual, isEmpty } from '@ember/utils';
import { inject as service } from '@ember/service';
import AuthProvider from '../mixins/auth';
import AuthProvider from '../../mixins/auth';
import Component from '@ember/component';
export default Component.extend(AuthProvider, {

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

@ -192,6 +192,31 @@ let constants = EmberObject.extend({
// Seats6 is unlimited.
Seats6: 9999
},
Icon: { // eslint-disable-line ember/avoid-leaking-state-in-ember-objects
Delete: 'dicon-bin',
Print: 'dicon-print',
Plus: 'dicon-e-add',
Person: 'dicon-single-01',
Settings: 'dicon-settings-gear',
},
Color: { // eslint-disable-line ember/avoid-leaking-state-in-ember-objects
Red: 'red',
Green: 'green',
Yellow: 'yellow',
Gray: 'gray'
},
Label: { // eslint-disable-line ember/avoid-leaking-state-in-ember-objects
Add: 'Add',
Cancel: 'Cancel',
Close: 'Close',
Delete: 'Delete',
Insert: 'Insert',
Save: 'Save',
Update: 'Update',
}
});

2
gui/app/pods/auth/forgot/template.hbs
View file

@ -5,7 +5,7 @@
<div class="url">{{appMeta.appHost}}</div>
</div>
<div class="login-form">
{{forgot-password forgot=(action "forgot")}}
{{user/forgot-password forgot=(action "forgot")}}
</div>
</div>
</div>

2
gui/app/pods/auth/reset/template.hbs
View file

@ -4,6 +4,6 @@
<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid">
<div class="url">{{appMeta.appHost}}</div>
</div>
{{password-reset reset=(action "reset")}}
{{user/password-reset reset=(action "reset")}}
</div>
</div>

34
gui/app/pods/folders/template.hbs
View file

@ -2,12 +2,26 @@
{{/layout/master-sidebar}}
{{#layout/master-content}}
<div class="grid-container-8-2">
<div class="grid-cell-1">
{{layout/page-heading title=appMeta.title}}
{{layout/page-desc desc=appMeta.message}}
</div>
<div class="grid-cell-2">
{{#if (or session.isEditor session.isAdmin)}}
{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
{{#if session.isEditor}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green tooltip="New space" onClick=(action "onShowModal")}}
{{/if}}
{{#if session.isAdmin}}
{{ui/ui-toolbar-icon icon=constants.Icon.Settings tooltip="Settings" linkTo="customize.general"}}
{{/if}}
{{/ui/ui-toolbar}}
{{/if}}
</div>
</div>
<h1>{{appMeta.title}}</h1>
<p>{{appMeta.message}}</p>
{{#if session.isEditor}}
<button type="button" class="btn btn-success font-weight-bold my-3" {{action "onShowModal"}}>+ SPACE</button>
{{/if}}
{{spaces/space-list spaces=model}}
<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
@ -19,11 +33,11 @@
<div class="form-group">
<label for="new-space-name">Space Name</label>
{{input type="text" id="new-space-name" class="form-control mousetrap" placeholder="Space name" value=spaceName}}
<small id="emailHelp" class="form-text text-muted">Characters and numbers only</small>
<small class="form-text text-muted">Characters and numbers only</small>
</div>
<div class="form-group">
<label for="clone-space-dropdown">Clone Space</label>
{{ui-select id="clone-space-dropdown" content=model prompt="select space" action=(action "onCloneSpaceSelect") optionValuePath="id" optionLabelPath="name" selection=clonedSpace}}
{{ui/ui-select id="clone-space-dropdown" content=model prompt="select space" action=(action "onCloneSpaceSelect") optionValuePath="id" optionLabelPath="name" selection=clonedSpace}}
<small id="emailHelp" class="form-text text-muted">Copy templates, permissions, documents from existing space</small>
<div class="margin-top-10" />
{{#if hasClone}}
@ -35,11 +49,11 @@
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" onclick={{action "onAddSpace"}}>Add</button>
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
{{ui/ui-button-gap}}
{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddSpace")}}
</div>
</div>
</div>
</div>
{{/layout/master-content}}

2
gui/app/pods/profile/template.hbs
View file

@ -3,7 +3,7 @@
{{#layout/middle-zone}}
{{#layout/middle-zone-content}}
{{user-profile model=model save=(action "save")}}
{{user/user-profile model=model save=(action "save")}}
{{/layout/middle-zone-content}}
{{#layout/middle-zone-sidebar}}

2
gui/app/pods/setup/template.hbs
View file

@ -9,7 +9,7 @@
</div>
</div>
<div class="col-8">
{{documize-setup model=model save=(action "save")}}
{{setup/documize-setup model=model save=(action "save")}}
</div>
</div>
</div>

100
gui/app/pods/theming/template.hbs
View file

@ -6,93 +6,105 @@
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
{{/layout/master-sidebar}}
{{#layout/master-content}}
{{ui/ui-button themed=true label="save" onClick=(action "onButtonClick" 1)}}
{{ui/ui-button themed=true label=constants.Label.Save onClick=(action "onButtonClick" 1)}}
{{ui/ui-button-gap}}
{{ui/ui-button themed=true light=true label="update" onClick=(action "onButtonClick" 2)}}
{{ui/ui-button themed=true light=true label=constants.Label.Update onClick=(action "onButtonClick" 2)}}
{{ui/ui-button-gap}}
<br>
<br>
{{ui/ui-button color="green" label="save" onClick=(action "onSuccess")}}
{{ui/ui-button color=constants.Color.Green label=constants.Label.Save onClick=(action "onSuccess")}}
{{ui/ui-button-gap}}
{{ui/ui-button color="yellow" label="update" onClick=(action "onInfo")}}
{{ui/ui-button color=constants.Color.Yellow label=constants.Label.Update onClick=(action "onInfo")}}
{{ui/ui-button-gap}}
{{ui/ui-button color="gray" label="Cancel" onClick=(action "onWarn")}}
{{ui/ui-button color=constants.Color.Gray label=constants.Label.Cancel onClick=(action "onWarn")}}
{{ui/ui-button-gap}}
{{ui/ui-button color="red" label="deletE" onClick=(action "onError")}}
{{ui/ui-button color=constants.Color.Red label=constants.Label.Delete onClick=(action "onError")}}
{{ui/ui-button-gap}}
<br>
<br>
{{ui/ui-button color="green" light=true label="save" onClick=(action "onSuccess")}}
{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Save onClick=(action "onSuccess")}}
{{ui/ui-button-gap}}
{{ui/ui-button color="yellow" light=true label="update" onClick=(action "onInfo")}}
{{ui/ui-button color=constants.Color.Yellow light=true label=constants.Label.Update onClick=(action "onInfo")}}
{{ui/ui-button-gap}}
{{ui/ui-button color="gray" light=true label="Cancel" onClick=(action "onWarn")}}
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel onClick=(action "onWarn")}}
{{ui/ui-button-gap}}
{{ui/ui-button color="red" light=true label="deletE" onClick=(action "onError")}}
{{ui/ui-button color=constants.Color.Red light=true label=constants.Label.Delete onClick=(action "onError")}}
{{ui/ui-button-gap}}
<br>
<br>
{{ui/ui-button color="green" light=true icon="plus" label="save" onClick=(action "onSuccess")}}
{{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Plus label=constants.Label.Save onClick=(action "onSuccess")}}
{{ui/ui-button-gap}}
{{ui/ui-button color="yellow" light=true icon="settings" label="update" onClick=(action "onInfo")}}
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.Settings label=constants.Label.Update onClick=(action "onInfo")}}
{{ui/ui-button-gap}}
{{ui/ui-button color="gray" light=true icon="print" label="Cancel" onClick=(action "onWarn")}}
{{ui/ui-button color=constants.Color.Gray light=true icon=constants.Icon.Print label=constants.Label.Cancel onClick=(action "onWarn")}}
{{ui/ui-button-gap}}
{{ui/ui-button color="red" light=true icon="delete" label="deletE" onClick=(action "onError")}}
{{ui/ui-button color=constants.Color.Red light=true icon=constants.Icon.Delete label=constants.Label.Delete onClick=(action "onError")}}
{{ui/ui-button-gap}}
<br>
<br>
{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
{{/ui/ui-toolbar}}
<br>
<br>
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
{{/ui/ui-toolbar}}
<br>
<br>
{{#ui/ui-toolbar dark=true light=false raised=true large=false bordered=true}}
{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
{{/ui/ui-toolbar}}
<br>
<br>
{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}}
{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
{{/ui/ui-toolbar}}
<br>
<br>
{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
{{/ui/ui-toolbar}}
<br>
<br>
{{#ui/ui-toolbar dark=true light=false raised=true large=true bordered=true}}
{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green tooltip="New space" onClick=(action "onToolbarClick" 5)}}
{{/ui/ui-toolbar}}
<br>
<br>
{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
{{/ui/ui-toolbar}}
<br>
<br>

1
gui/app/styles/core/bootstrap.scss vendored
View file

@ -34,6 +34,7 @@ $modal-footer-border-color: $color-white;
background-color: $theme-500;
color: map-get($gray-shades, 100);
font-size: 1.2rem;
font-weight: 600;
}
// rounded corners

1
gui/app/styles/core/layout/all.scss
View file

@ -4,4 +4,5 @@
@import "layout-footer.scss";
@import "layout-content.scss";
@import "common.scss";
@import "master-internal.scss";

60
gui/app/styles/core/layout/common.scss Normal file
View file

@ -0,0 +1,60 @@
// Styles that apply to all pages using master layout
$display-break-1: 700px;
$display-break-2: 900px;
$display-break-3: 1200px;
$display-break-4: 1600px;
$display-break-5: 1800px;
.master-page-heading {
font-size: 2rem;
font-weight: 700;
color: map-get($gray-shades, 800);
}
.master-page-desc {
font-size: 1.2rem;
font-weight: 400;
color: map-get($gray-shades, 700);
}
.grid-container-8-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr;
.grid-cell-1 {
grid-column-start: 1;
grid-row-start: 2;
padding: 0;
align-self: self-start;
justify-self: self-start;
}
.grid-cell-2 {
grid-column-start: 1;
grid-row-start: 1;
padding: 0;
align-self: self-start;
justify-self: self-start;
}
@media (min-width: $display-break-2) {
grid-template-columns: 8fr 2fr;
grid-template-rows: 1fr;
.grid-cell-1 {
grid-column-start: 1;
grid-row-start: 1;
padding: 0;
}
.grid-cell-2 {
grid-column-start: 2;
grid-row-start: 1;
padding: 0;
justify-self: self-end;
}
}
}

12
gui/app/styles/core/layout/master-internal.scss
View file

@ -1,9 +1,3 @@
$display-break-1: 700px;
$display-break-2: 900px;
$display-break-3: 1200px;
$display-break-4: 1600px;
$display-break-5: 1800px;
// CSS GRID WITH FIXED SIDEBAR OUTSIDE GRID
// Mobile-first layout
.master-container {
@ -121,7 +115,7 @@ $display-break-5: 1800px;
.master-content {
grid-column-start: 2;
padding: 10px;
padding: 20px;
}
}
@ -304,6 +298,7 @@ $display-break-5: 1800px;
.master-content {
grid-column-start: 2;
padding: 40px 30px;
}
}
@ -335,10 +330,11 @@ $display-break-5: 1800px;
@media (min-width: $display-break-4) {
.master-container {
display: grid;
grid-template-columns: 370px auto;
grid-template-columns: 370px minmax(auto, 1200px);
.master-content {
grid-column-start: 2;
padding: 40px 40px;
}
}

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

@ -78,53 +78,3 @@
.dmz-toolbar-bordered {
border: 1px solid map-get($gray-shades, 300);
}
// .dmz-toolbar-dark-small {
// @extend .dmz-toolbar;
// background-color: map-get($gray-shades, 200);
// border: 1px solid map-get($gray-shades, 300);
// @extend %toolbar-shadow;
// }
// .dmz-toolbar-dark-large {
// @extend .dmz-toolbar;
// background-color: map-get($gray-shades, 200);
// border: 1px solid map-get($gray-shades, 300);
// height: 40px;
// padding: 7px 10px;
// line-height: 33px;
// @extend %toolbar-shadow;
// > .dicon {
// font-size: 20px;
// font-weight: 500;
// padding: 0 0.5rem;
// }
// }
// .dmz-toolbar-small {
// @extend .dmz-toolbar;
// background-color: transparent;
// }
// .dmz-toolbar-large {
// @extend .dmz-toolbar-dark-large;
// background-color: transparent;
// border: none;
// box-shadow: none;
// }
// .dmz-toolbar-raised-small {
// @extend .dmz-toolbar;
// @extend %toolbar-shadow;
// background-color: map-get($gray-shades, 100);
// border: 1px solid map-get($gray-shades, 200);
// }
// .dmz-toolbar-raised-large {
// @extend .dmz-toolbar-dark-large;
// @extend %toolbar-shadow;
// background-color: map-get($gray-shades, 100);
// border: 1px solid map-get($gray-shades, 200);
// }

9
gui/app/styles/core/ui/ui-tooltip.scss
View file

@ -1,6 +1,11 @@
// https://github.com/kybishop/ember-attacher
.ember-attacher-tooltip {
font-size: 0.9rem;
padding: 0.5rem 0.75rem;
font-size: 0.9rem !important;
padding: 0.5rem 0.75rem !important;
background-color: map-get($gray-shades, 600) !important;
> div {
background-color: map-get($gray-shades, 600) !important;
}
}

1
gui/app/templates/application.hbs
View file

@ -1,2 +1 @@
{{outlet}}
{{user-notification notification="message"}}

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

@ -5,7 +5,7 @@
<div class="row">
<div class="col-12">
<div class="form-group">
{{ui-select tagName="span" class="revision-picker" content=revisions action=(action "onSelectRevision") optionValuePath="id" optionLabelPath="label"}}
{{ui/ui-select tagName="span" class="revision-picker" content=revisions action=(action "onSelectRevision") optionValuePath="id" optionLabelPath="label"}}
</div>
</div>
</div>

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

@ -59,9 +59,9 @@
{{/ui/ui-dialog}}
{{#if showAdd}}
{{empty-state icon="direct" message="Add documents via + DOCUMENT"}}
{{ui/empty-state icon="direct" message="Add documents via + DOCUMENT"}}
{{/if}}
{{#if showLockout}}
{{empty-state icon="visibility" message="Space permissions are preventing you from viewing and creating documents"}}
{{ui/empty-state icon="visibility" message="Space permissions are preventing you from viewing and creating documents"}}
{{/if}}

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

@ -8,7 +8,7 @@
<div class="form-group">
<label>Space Type</label>
{{ui-select id="spacetypes-dropdown" content=spaceTypeOptions optionValuePath="id" optionLabelPath="label" selection=spaceType action=(action "onSetSpaceType")}}
{{ui/ui-select id="spacetypes-dropdown" content=spaceTypeOptions optionValuePath="id" optionLabelPath="label" selection=spaceType action=(action "onSetSpaceType")}}
<small class="form-text text-muted">Who can see this space?</small>
</div>

1
gui/app/templates/components/layout/page-desc.hbs Normal file
View file

@ -0,0 +1 @@
{{desc}}

1
gui/app/templates/components/layout/page-heading.hbs Normal file
View file

@ -0,0 +1 @@
{{title}}

2
gui/app/templates/components/section/code/type-editor.hbs
View file

@ -1,7 +1,7 @@
{{#section/base-editor-inline document=document folder=folder page=page tip="Concise name that describes code snippet" isDirty=(action "isDirty") onCancel=(action "onCancel") onAction=(action "onAction")}}
<div class="section-code-editor">
<div class="syntax-selector">
{{ui-select id=syntaxId
{{ui/ui-select id=syntaxId
content=syntaxOptions
action=(action "onSyntaxChange")
optionValuePath="mode"

2
gui/app/templates/components/section/github/type-editor.hbs
View file

@ -5,7 +5,7 @@
<div class="col-6">
<div class="form-group">
<label>Select Organization</label>
{{ui-select id="owners-dropdown" content=owners action=(action "onOwnerChange") optionValuePath="id" optionLabelPath="name" selection=config.owner}}
{{ui/ui-select id="owners-dropdown" content=owners action=(action "onOwnerChange") optionValuePath="id" optionLabelPath="name" selection=config.owner}}
<small class="form-text text-muted">Select organization or user whose repository you want to show</small>
</div>
<div class="form-group">

2
gui/app/templates/components/section/papertrail/type-editor.hbs
View file

@ -33,7 +33,7 @@
</div>
<div class="form-group">
<label for="group-dropdown">Group</label>
{{ui-select id="group-dropdown" prompt="<group>" content=options.groups action=(action "onGroupsChange") optionValuePath="id" optionLabelPath="name" selection=config.group}}
{{ui/ui-select id="group-dropdown" prompt="<group>" content=options.groups action=(action "onGroupsChange") optionValuePath="id" optionLabelPath="name" selection=config.group}}
<small class="form-text text-muted">Optional Papertrail group</small>
</div>
</form>

2
gui/app/templates/components/section/trello/type-editor.hbs
View file

@ -9,7 +9,7 @@
{{else}}
<div class="form-group">
<label>Select Board</label>
{{ui-select id="boards-dropdown" content=boards action=(action "onBoardChange") optionValuePath="id" optionLabelPath="name" selection=config.board}}
{{ui/ui-select id="boards-dropdown" content=boards action=(action "onBoardChange") optionValuePath="id" optionLabelPath="name" selection=config.board}}
</div>
<div class="form-group">
<label for="airtable-embed-cod">Select Lists</label>

0
gui/app/templates/components/documize-setup.hbs → gui/app/templates/components/setup/documize-setup.hbs
View file

0
gui/app/templates/components/empty-state.hbs → gui/app/templates/components/ui/empty-state.hbs
View file

1
gui/app/templates/components/ui/ui-modal-buttons.hbs Normal file
View file

@ -0,0 +1 @@
{{yield}}

13
gui/app/templates/components/ui/ui-modal.hbs Normal file
View file

@ -0,0 +1,13 @@
<div id={{contentId}} class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog {{size}}" role="document">
<div class="modal-content">
<div class="modal-header">{{title}}</div>
<div class="modal-body">
{{yield}}
</div>
<div class="modal-footer">
{{outlet "buttons"}}
</div>
</div>
</div>
</div>

0
gui/app/templates/components/ui-select.hbs → gui/app/templates/components/ui/ui-select.hbs
View file

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

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

3
gui/app/templates/components/ui/ui-tooltip.hbs Normal file
View file

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

5
gui/app/templates/components/user-notification.hbs
View file

@ -1,5 +0,0 @@
<div class="user-notification">
{{#each notifications as |msg|}}
<p class="message">{{msg}}</p>
{{/each}}
</div>

0
gui/app/templates/components/forgot-password.hbs → gui/app/templates/components/user/forgot-password.hbs
View file

0
gui/app/templates/components/password-reset.hbs → gui/app/templates/components/user/password-reset.hbs
View file

0
gui/app/templates/components/user-profile.hbs → gui/app/templates/components/user/user-profile.hbs
View file

14
jsconfig.json
View file

@ -1,13 +1 @@
{
"compilerOptions": {
"target": "es6",
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true
},
"exclude": ["node_modules", "bower_components", "tmp", "vendor", ".git", "dist", "dist-prod", "gui/node_modules", "gui/dist", "gui/dist-prod", "gui/tmp"],
"typeAcquisition": {
"include": [
"underscore"
]
}
}
{"compilerOptions":{"target":"es6","experimentalDecorators":true},"exclude":["node_modules","bower_components","tmp","vendor",".git","dist"],"typeAcquisition":{"include":["underscore"]}}