mirror of
https://github.com/documize/community.git
synced 2025-07-24 15:49:44 +02:00
new UX for category management
This commit is contained in:
Harvey Kandola
parent
1c08a7fbcf
commit
1f0fc844a8
29 changed files with 287 additions and 397 deletions
|
|
@ -10,7 +10,6 @@
|
|||
// https://documize.com
|
||||
|
||||
import Component from '@ember/component';
|
||||
|
||||
import { inject as service } from '@ember/service';
|
||||
import NotifierMixin from '../../mixins/notifier';
|
||||
import TooltipMixin from '../../mixins/tooltip';
|
||||
|
|
@ -22,19 +21,20 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
|
|||
appMeta: service(),
|
||||
store: service(),
|
||||
newCategory: '',
|
||||
deleteId: '',
|
||||
dropdown: null,
|
||||
users: [],
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
|
||||
this.renderTooltips();
|
||||
this.load();
|
||||
},
|
||||
|
||||
|
||||
willDestroyElement() {
|
||||
this._super(...arguments);
|
||||
|
||||
this.destroyDropdown();
|
||||
this.removeTooltips();
|
||||
},
|
||||
|
||||
load() {
|
||||
|
|
@ -88,15 +88,17 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
|
|||
},
|
||||
|
||||
actions: {
|
||||
onAdd() {
|
||||
onAdd(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let cat = this.get('newCategory');
|
||||
|
||||
if (cat === '') {
|
||||
$('#new-category-name').addClass('error').focus();
|
||||
$('#new-category-name').addClass('is-invalid').focus();
|
||||
return;
|
||||
}
|
||||
|
||||
$('#new-category-name').removeClass('error').focus();
|
||||
$('#new-category-name').removeClass('is-invalid').focus();
|
||||
this.set('newCategory', '');
|
||||
|
||||
let c = {
|
||||
|
|
@ -109,8 +111,19 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
|
|||
});
|
||||
},
|
||||
|
||||
onDelete(id) {
|
||||
this.get('categoryService').delete(id).then(() => {
|
||||
onShowDelete(id) {
|
||||
let cat = this.get('category').findBy('id', id);
|
||||
this.set('deleteId', cat.get('id'));
|
||||
|
||||
$('#category-delete-modal').modal('dispose');
|
||||
$('#category-delete-modal').modal({show: true});
|
||||
},
|
||||
|
||||
onDelete() {
|
||||
$('#category-delete-modal').modal('hide');
|
||||
$('#category-delete-modal').modal('dispose');
|
||||
|
||||
this.get('categoryService').delete(this.get('deleteId')).then(() => {
|
||||
this.load();
|
||||
});
|
||||
},
|
||||
|
|
@ -127,12 +140,12 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
|
|||
onSave(id) {
|
||||
let cat = this.setEdit(id, true);
|
||||
if (cat.get('category') === '') {
|
||||
$('#edit-category-' + cat.get('id')).addClass('error').focus();
|
||||
return;
|
||||
$('#edit-category-' + cat.get('id')).addClass('is-invalid').focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
cat = this.setEdit(id, false);
|
||||
$('#edit-category-' + cat.get('id')).removeClass('error');
|
||||
$('#edit-category-' + cat.get('id')).removeClass('is-invalid');
|
||||
|
||||
this.get('categoryService').save(cat).then(() => {
|
||||
this.load();
|
||||
|
|
@ -140,7 +153,8 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
|
|||
},
|
||||
|
||||
onShowAccessPicker(catId) {
|
||||
this.closeDropdown();
|
||||
this.set('showCategoryAccess', true);
|
||||
|
||||
let users = this.get('users');
|
||||
let category = this.get('category').findBy('id', catId);
|
||||
|
||||
|
|
@ -155,26 +169,12 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
|
|||
|
||||
this.set('categoryUsers', users);
|
||||
this.set('currentCategory', category);
|
||||
|
||||
$(".category-access-dialog").css("display", "block");
|
||||
|
||||
let dropOptions = Object.assign(this.get('dropDefaults'), {
|
||||
target: $("#category-access-button-" + catId)[0],
|
||||
content: $(".category-access-dialog")[0],
|
||||
classes: 'drop-theme-basic',
|
||||
position: "bottom right",
|
||||
remove: false});
|
||||
|
||||
let drop = new Drop(dropOptions);
|
||||
this.set('dropdown', drop);
|
||||
});
|
||||
},
|
||||
|
||||
onGrantCancel() {
|
||||
this.closeDropdown();
|
||||
},
|
||||
|
||||
onGrantAccess() {
|
||||
this.set('showCategoryAccess', false);
|
||||
|
||||
let folder = this.get('folder');
|
||||
let category = this.get('currentCategory');
|
||||
let users = this.get('categoryUsers').filterBy('selected', true);
|
||||
|
|
@ -196,8 +196,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
|
|||
this.get('categoryService').setViewers(folder.get('id'), category.get('id'), viewers).then(() => {
|
||||
this.load();
|
||||
});
|
||||
|
||||
this.closeDropdown();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { inject as service } from '@ember/service';
|
|||
import { all } from 'rsvp';
|
||||
import { schedule } from '@ember/runloop';
|
||||
import { gt } from '@ember/object/computed';
|
||||
import { computed } from '@ember/object';
|
||||
import AuthMixin from '../../mixins/auth';
|
||||
|
||||
export default Component.extend(AuthMixin, {
|
||||
|
|
@ -23,6 +24,10 @@ export default Component.extend(AuthMixin, {
|
|||
localStorage: service('localStorage'),
|
||||
hasCategories: gt('categories.length', 0),
|
||||
filteredDocs: [],
|
||||
categoryLinkName: 'Manage',
|
||||
spaceSettings: computed('permissions', function() {
|
||||
return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
|
||||
}),
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
|
|
@ -50,6 +55,7 @@ export default Component.extend(AuthMixin, {
|
|||
});
|
||||
|
||||
this.set('categories', categories);
|
||||
this.set('categoryLinkName', categories.length > 0 ? 'manage' : 'add');
|
||||
|
||||
schedule('afterRender', () => {
|
||||
if (this.get('rootDocCount') > 0) {
|
||||
|
|
|
|||
|
|
@ -14,9 +14,10 @@ import { schedule } from '@ember/runloop';
|
|||
import { computed } from '@ember/object';
|
||||
import { inject as service } from '@ember/service';
|
||||
import NotifierMixin from '../../mixins/notifier';
|
||||
import TooltipMixin from '../../mixins/tooltip';
|
||||
import AuthMixin from '../../mixins/auth';
|
||||
|
||||
export default Component.extend(NotifierMixin, AuthMixin, {
|
||||
export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
|
||||
spaceService: service('folder'),
|
||||
session: service(),
|
||||
appMeta: service(),
|
||||
|
|
@ -75,15 +76,7 @@ export default Component.extend(NotifierMixin, AuthMixin, {
|
|||
|
||||
willDestroyElement() {
|
||||
this._super(...arguments);
|
||||
|
||||
$('[data-toggle="tooltip"]').tooltip('dispose');
|
||||
},
|
||||
|
||||
renderTooltips() {
|
||||
schedule('afterRender', () => {
|
||||
$('[data-toggle="tooltip"]').tooltip('dispose');
|
||||
$('body').tooltip({selector: '[data-toggle="tooltip"]', delay: 250});
|
||||
});
|
||||
this.removeTooltips();
|
||||
},
|
||||
|
||||
getDefaultInvitationMessage() {
|
||||
|
|
|
|||
|
|
@ -10,9 +10,21 @@
|
|||
// https://documize.com
|
||||
|
||||
import Mixin from '@ember/object/mixin';
|
||||
import { schedule } from '@ember/runloop';
|
||||
|
||||
export default Mixin.create({
|
||||
tooltips: [],
|
||||
tooltips: [],
|
||||
|
||||
renderTooltips() {
|
||||
schedule('afterRender', () => {
|
||||
$('[data-toggle="tooltip"]').tooltip('dispose');
|
||||
$('body').tooltip({selector: '[data-toggle="tooltip"]', delay: 250});
|
||||
});
|
||||
},
|
||||
|
||||
removeTooltips() {
|
||||
$('[data-toggle="tooltip"]').tooltip('dispose');
|
||||
},
|
||||
|
||||
addTooltip(elem) {
|
||||
if (elem == null) {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@ export default Route.extend(AuthenticatedRouteMixin, {
|
|||
return hash({
|
||||
folder: this.modelFor('folder').folder,
|
||||
permissions: this.modelFor('folder').permissions,
|
||||
folders: this.modelFor('folder').folders
|
||||
folders: this.modelFor('folder').folders,
|
||||
templates: this.modelFor('folder').templates,
|
||||
});
|
||||
}
|
||||
});
|
||||
12
gui/app/pods/folder/category/template.hbs
Normal file
12
gui/app/pods/folder/category/template.hbs
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{{layout/nav-bar}}
|
||||
|
||||
<div class="container">
|
||||
{{#toolbar/t-toolbar}}
|
||||
{{#toolbar/t-links}}
|
||||
{{#link-to "folders" class="link" tagName="li"}}SPACES{{/link-to}}
|
||||
{{#link-to "folder" model.folder.id model.folder.slug class="link" tagName="li"}}{{model.folder.name}}{{/link-to}}
|
||||
{{/toolbar/t-links}}
|
||||
{{/toolbar/t-toolbar}}
|
||||
|
||||
{{folder/category-admin folders=model.folders folder=model.folder}}
|
||||
</div>
|
||||
|
|
@ -1 +0,0 @@
|
|||
{{folder/category-admin folders=model.folders folder=model.folder}}
|
||||
|
|
@ -1,22 +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 { inject as service } from '@ember/service';
|
||||
|
||||
import Controller from '@ember/controller';
|
||||
import NotifierMixin from '../../../mixins/notifier';
|
||||
import AuthProvider from '../../../mixins/auth';
|
||||
|
||||
export default Controller.extend(AuthProvider, NotifierMixin, {
|
||||
documentService: service('document'),
|
||||
folderService: service('folder'),
|
||||
localStorage: service('localStorage'),
|
||||
});
|
||||
|
|
@ -1,15 +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 Controller from '@ember/controller';
|
||||
|
||||
export default Controller.extend({
|
||||
});
|
||||
|
|
@ -1,27 +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 { hash } from 'rsvp';
|
||||
|
||||
import Route from '@ember/routing/route';
|
||||
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
|
||||
|
||||
export default Route.extend(AuthenticatedRouteMixin, {
|
||||
model() {
|
||||
this.get('browser').setTitle(this.modelFor('folder').folder.get('name'));
|
||||
|
||||
return hash({
|
||||
folder: this.modelFor('folder').folder,
|
||||
permissions: this.modelFor('folder').permissions,
|
||||
folders: this.modelFor('folder').folders
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
{{folder/invite-user folders=model.folders folder=model.folder}}
|
||||
|
|
@ -1,33 +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 { hash } from 'rsvp';
|
||||
|
||||
import Route from '@ember/routing/route';
|
||||
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
|
||||
|
||||
export default Route.extend(AuthenticatedRouteMixin, {
|
||||
beforeModel: function (transition) {
|
||||
if (is.equal(transition.targetName, 'folder.settings.index')) {
|
||||
this.transitionTo('folder.settings.security');
|
||||
}
|
||||
},
|
||||
|
||||
model() {
|
||||
this.get('browser').setTitle(this.modelFor('folder').folder.get('name'));
|
||||
|
||||
return hash({
|
||||
folder: this.modelFor('folder').folder,
|
||||
permissions: this.modelFor('folder').permissions,
|
||||
folders: this.modelFor('folder').folders
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1,15 +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 Controller from '@ember/controller';
|
||||
|
||||
export default Controller.extend({
|
||||
});
|
||||
|
|
@ -1,27 +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 { hash } from 'rsvp';
|
||||
|
||||
import Route from '@ember/routing/route';
|
||||
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
|
||||
|
||||
export default Route.extend(AuthenticatedRouteMixin, {
|
||||
model() {
|
||||
this.get('browser').setTitle(this.modelFor('folder').folder.get('name'));
|
||||
|
||||
return hash({
|
||||
folder: this.modelFor('folder').folder,
|
||||
permissions: this.modelFor('folder').permissions,
|
||||
folders: this.modelFor('folder').folders
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
{{folder/permission-admin folders=model.folders folder=model.folder}}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
{{#layout/zone-container}}
|
||||
{{#layout/zone-sidebar}}
|
||||
<div class="sidebar-common">
|
||||
{{layout/sidebar-intro title="Space Settings" message="Invite users, configure space permissions, and set up categories to sub-divide the space."}}
|
||||
</div>
|
||||
<div class="sidebar-wrapper">
|
||||
<div class="sidebar-menu">
|
||||
<ul class="options">
|
||||
{{#if isAuthProviderDocumize}}
|
||||
{{#link-to 'folder.settings.invitation' activeClass='selected' class="option" tagName="li"}}Invite{{/link-to}}
|
||||
{{/if}}
|
||||
{{#link-to 'folder.settings.security' activeClass='selected' class="option" tagName="li"}}Permissions{{/link-to}}
|
||||
{{#link-to 'folder.settings.category' activeClass='selected' class="option" tagName="li"}}Categories{{/link-to}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{/layout/zone-sidebar}}
|
||||
{{#layout/zone-content}}
|
||||
<div class="back-to-space">
|
||||
{{#link-to 'folder' model.folder.id model.folder.slug}}
|
||||
<div class="regular-button button-nav">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
<div class="name">{{model.folder.name}}</div>
|
||||
</div>
|
||||
{{/link-to}}
|
||||
</div>
|
||||
<div class="margin-top-30" />
|
||||
|
||||
{{outlet}}
|
||||
|
||||
<div class="margin-top-50" />
|
||||
{{/layout/zone-content}}
|
||||
{{/layout/zone-container}}
|
||||
|
|
@ -24,18 +24,8 @@ export default Router.map(function () {
|
|||
this.route('folder', {
|
||||
path: 's/:folder_id/:folder_slug'
|
||||
}, function() {
|
||||
this.route('settings', {
|
||||
path: 'settings'
|
||||
}, function () {
|
||||
this.route('security', {
|
||||
path: 'security'
|
||||
});
|
||||
this.route('invitation', {
|
||||
path: 'invitation'
|
||||
});
|
||||
this.route('category', {
|
||||
path: 'category'
|
||||
});
|
||||
this.route('category', {
|
||||
path: 'category'
|
||||
})
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
@import "view/page-auth.scss";
|
||||
@import "view/page-onboard.scss";
|
||||
@import "view/page-exceptions.scss";
|
||||
@import "view/folder/all.scss";
|
||||
@import "view/document/all.scss";
|
||||
@import "view/common.scss";
|
||||
|
||||
|
|
|
|||
|
|
@ -25,12 +25,24 @@ body {
|
|||
}
|
||||
|
||||
a {
|
||||
@include ease-in();
|
||||
color: $color-link;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
|
||||
// text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.admin-link {
|
||||
// color: $color-gray;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
|
|
|
|||
|
|
@ -55,3 +55,13 @@
|
|||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin card-theme() {
|
||||
background-color: $color-primary-light;
|
||||
box-shadow: 1px 1px 3px 0px rgba(211,211,211,1);
|
||||
|
||||
&:hover {
|
||||
background-color: darken($color-primary-light, 5%);
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
@import "settings.scss";
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
.space-settings {
|
||||
.category-table {
|
||||
padding: 0;
|
||||
margin: 0 0 0 20px;
|
||||
width: 60%;
|
||||
|
||||
> .row {
|
||||
margin: 15px 0;
|
||||
padding: 15px;
|
||||
background-color: $color-off-white;
|
||||
@include border-radius(2px);
|
||||
|
||||
> .category {
|
||||
display: inline-block;
|
||||
|
||||
> .name {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
> .info {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 8px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
> .action {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
> .input-control {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
|
||||
> input {
|
||||
margin: 0 0 8px 0;
|
||||
padding: 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-access-dialog {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -119,10 +119,18 @@
|
|||
}
|
||||
|
||||
.space-admin {
|
||||
> .permission-table {
|
||||
// width: 100%;
|
||||
// overflow-x: auto;
|
||||
> .title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: $color-dark;
|
||||
}
|
||||
|
||||
> .sub-title {
|
||||
font-size: 1.1rem;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
> .permission-table {
|
||||
> tbody, > thead {
|
||||
> tr, > th {
|
||||
> td, > th {
|
||||
|
|
@ -151,4 +159,50 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .categories {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
> .item {
|
||||
margin: 15px 0;
|
||||
padding: 15px;
|
||||
@include card-theme();
|
||||
@include ease-in();
|
||||
|
||||
> .category {
|
||||
display: inline-block;
|
||||
|
||||
> .name {
|
||||
font-size: 1.2rem;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
> .info {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 8px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
> .action {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
> .input-control {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
|
||||
> input {
|
||||
margin: 0 0 8px 0;
|
||||
padding: 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
margin-right: 30px;
|
||||
cursor: pointer;
|
||||
@include ease-in();
|
||||
border-bottom: 2px solid $color-gray-light;
|
||||
// border-bottom: 2px solid $color-gray-light;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
|
|
|
|||
|
|
@ -452,6 +452,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
.button-icon-black {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
@include ease-in();
|
||||
|
||||
> i {
|
||||
color: $color-off-black;
|
||||
font-size: 2rem;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: darken($color-off-black, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-small {
|
||||
> i {
|
||||
font-size: 1.3rem;
|
||||
|
|
|
|||
|
|
@ -1,74 +1,77 @@
|
|||
<div class="space-settings">
|
||||
<div class="panel">
|
||||
<div class="form-header">
|
||||
<div class="title">Categories</div>
|
||||
<div class="tip">Sub-divide spaces and secure document access with categories</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="space-admin mt-4 mb-5">
|
||||
<h1 class="title">Categories</h1>
|
||||
<p class="sub-title">Sub-divide spaces into categories which can contain documents with restricted access.</p>
|
||||
<form class="form-inline" onsubmit={{action 'onAdd'}}>
|
||||
<div class="form-group mr-3">
|
||||
{{input id="new-category-name" type='text' class="form-control mousetrap" placeholder="Category name" value=newCategory}}
|
||||
</div>
|
||||
<button type="button" class="btn btn-success" onclick={{action 'onAdd'}}>Add</button>
|
||||
</form>
|
||||
</div>
|
||||
<form id="category-form" {{action 'onAdd' on='submit'}}>
|
||||
<div class="input-control">
|
||||
<div class="category-table">
|
||||
{{#each category as |cat|}}
|
||||
<div class="row">
|
||||
{{#if cat.editMode}}
|
||||
<div class="input-control input-transparent width-60">
|
||||
{{focus-input id=(concat 'edit-category-' cat.id) type="text" value=cat.category class="input-inline"}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="category">
|
||||
<div class="name">{{cat.category}}</div>
|
||||
<div class="info">
|
||||
{{cat.documents}} {{if (eq cat.documents 1) 'document' 'documents' }}, {{cat.users}} {{if (eq cat.users 1) 'person' 'people' }}</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="pull-right buttons">
|
||||
{{#if cat.editMode}}
|
||||
<button type="submit" class="round-button-mono" {{action 'onSave' cat.id}}>
|
||||
<i class="material-icons color-green">check</i>
|
||||
</button>
|
||||
<div class="round-button-mono" {{action 'onEditCancel' cat.id}}>
|
||||
<i class="material-icons color-gray">close</i>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="">
|
||||
<div id="category-access-button-{{cat.id}}" data-tooltip="Set user access" data-tooltip-position="top center" class="action round-button-mono button-white" {{action 'onShowAccessPicker' cat.id}}>
|
||||
<i class="material-icons">person</i>
|
||||
</div>
|
||||
<div {{action 'onEdit' cat.id}} class="action round-button-mono button-white">
|
||||
<i class="material-icons">edit</i>
|
||||
</div>
|
||||
<div id="{{concat 'delete-category-' cat.id}}" class="action round-button-mono button-white">
|
||||
<i class="material-icons">delete</i>
|
||||
</div>
|
||||
{{#dropdown-dialog target=(concat 'delete-category-' cat.id) position="bottom right" button="Delete" color="flat-red" onAction=(action 'onDelete' cat.id)}}
|
||||
<p>Are you sure you want to delete category <b>{{cat.category}}?</b></p>
|
||||
{{/dropdown-dialog}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="margin-top-30"><i>No categories defined yet</i></div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="input-control margin-top-50 width-60">
|
||||
<label>Add Category</label>
|
||||
<div class="tip">Provide a short name</div>
|
||||
{{focus-input id="new-category-name" type="text" value=newCategory}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="regular-button button-blue" {{action 'onAdd'}}>add</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-dialog category-access-dialog">
|
||||
<div class="content">
|
||||
<p class="heading">Select who can view documents within category</p>
|
||||
{{ui/ui-list-picker items=categoryUsers nameField='fullname'}}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="space-admin mt-4 mb-5">
|
||||
<div class="categories">
|
||||
{{#each category as |cat|}}
|
||||
<div class="item row">
|
||||
{{#if cat.editMode}}
|
||||
<form onsubmit={{action 'onSave' cat.id bubbles=false}} class="col-8">
|
||||
{{focus-input id=(concat 'edit-category-' cat.id) type="text" value=cat.category class="form-control"}}
|
||||
</form>
|
||||
{{else}}
|
||||
<div class="category col-8">
|
||||
<div class="name">{{cat.category}}</div>
|
||||
<div class="info">{{cat.documents}} {{if (eq cat.documents 1) 'document' 'documents' }}, {{cat.users}} {{if (eq cat.users 1) 'person' 'people' }}</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="col-4 buttons text-right">
|
||||
{{#if cat.editMode}}
|
||||
<button type="button" class="btn btn-outline-secondary" {{action 'onEditCancel' cat.id}}>Cancel</button>
|
||||
<button type="button" class="btn btn-outline-success" {{action 'onSave' cat.id}}>Save</button>
|
||||
{{else}}
|
||||
<div id="category-access-button-{{cat.id}}" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Category access" {{action 'onShowAccessPicker' cat.id}}>
|
||||
<i class="material-icons">security</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
<div class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Rename" {{action 'onEdit' cat.id}} >
|
||||
<i class="material-icons">edit</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
<div id="{{concat 'delete-category-' cat.id}}" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Delete" {{action 'onShowDelete' cat.id}}>
|
||||
<i class="material-icons">delete</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="margin-top-30"><i>No categories defined yet</i></div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="flat-button" {{action 'onGrantCancel'}}>cancel</div>
|
||||
<div class="flat-button flat-blue" {{action 'onGrantAccess'}}>set access</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div id="category-delete-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Category Deletion</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete this category?</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" onclick={{action 'onDelete'}}>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#ui/ui-dialog title="Set Cateogory Access" confirmCaption="Save" buttonType="btn-outline-success" show=showCategoryAccess onAction=(action 'onGrantAccess')}}
|
||||
<p>Select who can view documents within category</p>
|
||||
{{ui/ui-list-picker items=categoryUsers nameField='fullname' singleSelect=false}}
|
||||
{{/ui/ui-dialog}}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,43 @@
|
|||
{{folder/space-heading space=space permissions=permissions }}
|
||||
|
||||
{{#if hasCategories}}
|
||||
<div class="clearfix">
|
||||
<div class="float-left mr-5">
|
||||
<div class="view-space">
|
||||
<div class="filter-caption mt-4">{{documents.length}} documents</div>
|
||||
<ul class="tabnav-control">
|
||||
<li class="tab {{if spaceSelected 'selected'}}" {{action 'onDocumentFilter' 'space' space.id}}>All ({{documents.length}})</li>
|
||||
<div class="clearfix">
|
||||
<div class="float-left mr-5">
|
||||
<div class="view-space">
|
||||
<div class="filter-caption mt-4">{{documents.length}} documents</div>
|
||||
<ul class="tabnav-control">
|
||||
<li class="tab {{if spaceSelected 'selected'}}" {{action 'onDocumentFilter' 'space' space.id}}>All ({{documents.length}})</li>
|
||||
{{#if hasCategories}}
|
||||
{{#if (gt rootDocCount 0)}}
|
||||
<li class="tab {{if uncategorizedSelected 'selected'}}" {{action 'onDocumentFilter' 'uncategorized' space.id}}>Uncategorized ({{rootDocCount}})</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float-left">
|
||||
<div class="view-space">
|
||||
<div class="filter-caption mt-4">{{categories.length}} categories</div>
|
||||
<ul class="tabnav-control">
|
||||
{{#each categories as |cat index|}}
|
||||
<li class="tab {{if cat.selected 'selected'}}" {{action 'onDocumentFilter' 'category' cat.id}}>{{cat.category}} ({{cat.docCount}})</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
{{/if}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="view-space">
|
||||
<div class="filter-caption">{{documents.length}} documents</div>
|
||||
<div class="float-left">
|
||||
<div class="view-space">
|
||||
<div class="filter-caption mt-4">
|
||||
{{categories.length}} categories
|
||||
{{#if hasCategories}}
|
||||
{{#if spaceSettings}}
|
||||
{{#link-to 'folder.category' space.id space.slug class="admin-link margin-top-5"}}{{categoryLinkName}} →{{/link-to}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<ul class="tabnav-control">
|
||||
{{#each categories as |cat index|}}
|
||||
<li class="tab {{if cat.selected 'selected'}}" {{action 'onDocumentFilter' 'category' cat.id}}>{{cat.category}} ({{cat.docCount}})</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
{{#unless hasCategories}}
|
||||
{{#if spaceSettings}}
|
||||
{{#link-to 'folder.category' space.id space.slug class="admin-link margin-top-5"}}{{categoryLinkName}} →{{/link-to}}
|
||||
{{/if}}
|
||||
{{/unless}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{folder/documents-list documents=filteredDocs spaces=spaces space=space
|
||||
templates=templates permissions=permissions
|
||||
|
|
|
|||
|
|
@ -3,24 +3,7 @@
|
|||
{{#link-to "folders" class="link" tagName="li"}}SPACES{{/link-to}}
|
||||
{{/toolbar/t-links}}
|
||||
{{#toolbar/t-actions}}
|
||||
{{#if pinState.isPinned}}
|
||||
<div id="space-pin-button" class="button-icon-gold align-middle" data-toggle="tooltip" data-placement="top" title="Remove favorite" {{action 'onUnpin'}}>
|
||||
<i class="material-icons">star</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{else if session.authenticated}}
|
||||
<div id="space-pin-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save favorite" {{action 'onPin'}}>
|
||||
<i class="material-icons">star</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{/if}}
|
||||
|
||||
{{#if spaceSettings}}
|
||||
<div id="space-settings-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Set permissions">
|
||||
<i class="material-icons" data-toggle="modal" data-target="#space-permission-modal" data-backdrop="static">security</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
|
||||
<div id="space-invite-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Invite to space">
|
||||
<i class="material-icons" data-toggle="modal" data-target="#space-invite-modal" data-backdrop="static">person_add</i>
|
||||
</div>
|
||||
|
|
@ -49,6 +32,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="space-settings-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Set permissions">
|
||||
<i class="material-icons" data-toggle="modal" data-target="#space-permission-modal" data-backdrop="static">security</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.spaceOwner}}
|
||||
|
|
@ -79,6 +67,18 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if pinState.isPinned}}
|
||||
<div id="space-pin-button" class="button-icon-gold align-middle" data-toggle="tooltip" data-placement="top" title="Remove favorite" {{action 'onUnpin'}}>
|
||||
<i class="material-icons">star</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{else if session.authenticated}}
|
||||
<div id="space-pin-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save favorite" {{action 'onPin'}}>
|
||||
<i class="material-icons">star</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.documentAdd}}
|
||||
<button type="button" class="btn btn-success font-weight-bold" data-toggle="modal" data-target="#add-space-modal" data-backdrop="static">+ DOCUMENT</button>
|
||||
<div id="add-space-modal" class="modal" tabindex="-1" role="dialog">
|
||||
|
|
@ -103,4 +103,4 @@
|
|||
{{/toolbar/t-actions}}
|
||||
{{/toolbar/t-toolbar}}
|
||||
|
||||
{{folder/permission-admin folders=spaces folder=space}}
|
||||
{{folder/permission-admin folders=spaces folder=space}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue