mirror of
https://github.com/documize/community.git
synced 2025-07-22 14:49:42 +02:00
navigation merged into left sidebar
This commit is contained in:
Harvey Kandola
parent
ea38729f55
commit
775990f040
16 changed files with 149 additions and 261 deletions
|
|
@ -279,7 +279,7 @@ func (h *Handler) Delete(w http.ResponseWriter, r *http.Request) {
|
|||
}
|
||||
|
||||
/*
|
||||
7. link/unlink document to category
|
||||
6. add category view permission !!!
|
||||
7. link/unlink document to category
|
||||
8. filter space documents by category -- URL param? nested route?
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ export default Ember.Component.extend(TooltipMixin, {
|
|||
let permissions = this.get('permissions');
|
||||
|
||||
return permissions.get('documentDelete') || permissions.get('documentCopy') ||
|
||||
permissions.get('documentMove') || permissions.get('documentTemplate');;
|
||||
permissions.get('documentMove') || permissions.get('documentTemplate');
|
||||
}),
|
||||
|
||||
didRender() {
|
||||
|
|
|
|||
|
|
@ -1,172 +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 Ember from 'ember';
|
||||
import netUtil from '../../utils/net';
|
||||
import constants from '../../utils/constants';
|
||||
import TooltipMixin from '../../mixins/tooltip';
|
||||
|
||||
const {
|
||||
inject: { service }
|
||||
} = Ember;
|
||||
|
||||
export default Ember.Component.extend(TooltipMixin, {
|
||||
folderService: service('folder'),
|
||||
appMeta: service(),
|
||||
session: service(),
|
||||
store: service(),
|
||||
folder: null,
|
||||
view: {
|
||||
folder: false,
|
||||
search: false,
|
||||
settings: false,
|
||||
profile: false
|
||||
},
|
||||
pinned: service(),
|
||||
pins: [],
|
||||
enableLogout: true,
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
|
||||
if (this.get("session.authenticated") && this.get("session.user.id") !== '0') {
|
||||
this.get("session.accounts").forEach((account) => {
|
||||
// TODO: do not mutate account.active here
|
||||
account.active = account.orgId === this.get("appMeta.orgId");
|
||||
});
|
||||
}
|
||||
|
||||
this.set('pins', this.get('pinned').get('pins'));
|
||||
|
||||
if (this.get('appMeta.authProvider') === constants.AuthProvider.Keycloak) {
|
||||
let config = this.get('appMeta.authConfig');
|
||||
config = JSON.parse(config);
|
||||
this.set('enableLogout', !config.disableLogout);
|
||||
}
|
||||
},
|
||||
|
||||
didReceiveAttrs() {
|
||||
if (this.get('folder') === null) {
|
||||
this.set("folder", this.get('folderService.currentFolder'));
|
||||
}
|
||||
|
||||
let route = this.get('router.currentRouteName');
|
||||
this.set('view.folder', (is.startWith(route, 'folder')) ? true : false);
|
||||
this.set('view.settings', (is.startWith(route, 'customize')) ? true : false);
|
||||
this.set('view.profile', (route === 'profile') ? true : false);
|
||||
this.set('view.search', (route === 'search') ? true : false);
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
this._super(...arguments);
|
||||
|
||||
// Size the pinned items zone
|
||||
if (this.get("session.authenticated")) {
|
||||
this.eventBus.subscribe('resized', this, 'sizePinnedZone');
|
||||
this.eventBus.subscribe('pinChange', this, 'setupPins');
|
||||
this.sizePinnedZone();
|
||||
this.setupPins();
|
||||
|
||||
let self = this;
|
||||
|
||||
var sortable = Sortable.create(document.getElementById('pinned-zone'), {
|
||||
animation: 150,
|
||||
onEnd: function () {
|
||||
self.get('pinned').updateSequence(this.toArray()).then((pins) => {
|
||||
self.set('pins', pins);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.set('sortable', sortable);
|
||||
}
|
||||
},
|
||||
|
||||
didRender() {
|
||||
if (this.get('session.isAdmin')) {
|
||||
this.addTooltip(document.getElementById("workspace-settings"));
|
||||
}
|
||||
if (this.get("session.authenticated") && this.get('enableLogout')) {
|
||||
this.addTooltip(document.getElementById("workspace-logout"));
|
||||
} else {
|
||||
this.addTooltip(document.getElementById("workspace-login"));
|
||||
}
|
||||
if (this.get("session.authenticated")) {
|
||||
this.addTooltip(document.getElementById("user-profile-button"));
|
||||
}
|
||||
if (this.get('session.hasAccounts')) {
|
||||
this.addTooltip(document.getElementById("accounts-button"));
|
||||
}
|
||||
|
||||
this.addTooltip(document.getElementById("home-button"));
|
||||
this.addTooltip(document.getElementById("search-button"));
|
||||
},
|
||||
|
||||
setupPins() {
|
||||
if (this.get('isDestroyed') || this.get('isDestroying')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.get('pinned').getUserPins().then((pins) => {
|
||||
if (this.get('isDestroyed') || this.get('isDestroying')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.set('pins', pins);
|
||||
|
||||
pins.forEach((pin) => {
|
||||
this.addTooltip(document.getElementById(`pin-${pin.id}`));
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// set height for pinned zone so ti scrolls on spill
|
||||
sizePinnedZone() {
|
||||
let topofBottomZone = parseInt($('#bottom-zone').css("top").replace("px", ""));
|
||||
let heightOfTopZone = parseInt($('#top-zone').css("height").replace("px", ""));
|
||||
let size = topofBottomZone - heightOfTopZone - 40;
|
||||
$('#pinned-zone').css('height', size + "px");
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
let sortable = this.get('sortable');
|
||||
|
||||
if (!_.isUndefined(sortable)) {
|
||||
sortable.destroy();
|
||||
}
|
||||
|
||||
this.eventBus.unsubscribe('resized');
|
||||
this.eventBus.unsubscribe('pinChange');
|
||||
|
||||
this.destroyTooltips();
|
||||
},
|
||||
|
||||
actions: {
|
||||
switchAccount(domain) {
|
||||
window.location.href = netUtil.getAppUrl(domain);
|
||||
},
|
||||
|
||||
jumpToPin(pin) {
|
||||
let folderId = pin.get('folderId');
|
||||
let documentId = pin.get('documentId');
|
||||
|
||||
if (_.isEmpty(documentId)) {
|
||||
// jump to space
|
||||
let folder = this.get('store').peekRecord('folder', folderId);
|
||||
this.get('router').transitionTo('folder', folderId, folder.get('slug'));
|
||||
} else {
|
||||
// jump to doc
|
||||
let folder = this.get('store').peekRecord('folder', folderId);
|
||||
this.get('router').transitionTo('document', folderId, folder.get('slug'), documentId, 'document');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -10,6 +10,74 @@
|
|||
// https://documize.com
|
||||
|
||||
import Ember from 'ember';
|
||||
import constants from '../../utils/constants';
|
||||
|
||||
const {
|
||||
computed,
|
||||
inject: { service }
|
||||
} = Ember;
|
||||
|
||||
export default Ember.Component.extend({
|
||||
folderService: service('folder'),
|
||||
appMeta: service(),
|
||||
session: service(),
|
||||
store: service(),
|
||||
pinned: service(),
|
||||
enableLogout: true,
|
||||
pins: [],
|
||||
hasPins: computed.notEmpty('pins'),
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
|
||||
if (this.get('appMeta.authProvider') === constants.AuthProvider.Keycloak) {
|
||||
let config = this.get('appMeta.authConfig');
|
||||
config = JSON.parse(config);
|
||||
this.set('enableLogout', !config.disableLogout);
|
||||
}
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
this._super(...arguments);
|
||||
|
||||
if (this.get("session.authenticated")) {
|
||||
this.eventBus.subscribe('pinChange', this, 'setupPins');
|
||||
this.setupPins();
|
||||
}
|
||||
},
|
||||
|
||||
setupPins() {
|
||||
if (this.get('isDestroyed') || this.get('isDestroying')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.get('pinned').getUserPins().then((pins) => {
|
||||
if (this.get('isDestroyed') || this.get('isDestroying')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.set('pins', pins);
|
||||
});
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
this.eventBus.unsubscribe('pinChange');
|
||||
},
|
||||
|
||||
actions: {
|
||||
jumpToPin(pin) {
|
||||
let folderId = pin.get('folderId');
|
||||
let documentId = pin.get('documentId');
|
||||
|
||||
if (_.isEmpty(documentId)) {
|
||||
// jump to space
|
||||
let folder = this.get('store').peekRecord('folder', folderId);
|
||||
this.get('router').transitionTo('folder', folderId, folder.get('slug'));
|
||||
} else {
|
||||
// jump to doc
|
||||
let folder = this.get('store').peekRecord('folder', folderId);
|
||||
this.get('router').transitionTo('document', folderId, folder.get('slug'), documentId, 'document');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
{{layout/zone-navigation}}
|
||||
{{#layout/zone-container}}
|
||||
{{#layout/zone-sidebar}}
|
||||
<div class="sidebar-common">
|
||||
|
|
|
|||
|
|
@ -1,2 +1 @@
|
|||
{{layout/zone-navigation}}
|
||||
{{outlet}}
|
||||
|
|
|
|||
|
|
@ -1,2 +1 @@
|
|||
{{layout/zone-navigation}}
|
||||
{{outlet}}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
{{layout/zone-navigation}}
|
||||
{{#layout/zone-container}}
|
||||
{{#layout/zone-sidebar}}
|
||||
{{folder/sidebar-zone folders=model noFolder=true onAddSpace=(action 'onAddSpace')}}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
{{layout/zone-navigation}}
|
||||
{{#layout/zone-container}}
|
||||
{{#layout/zone-sidebar}}
|
||||
<div class="sidebar-common">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
{{layout/zone-navigation}}
|
||||
|
||||
{{#layout/zone-container}}
|
||||
{{#layout/zone-sidebar}}
|
||||
<div class="sidebar-common">
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
@import "mixins.scss";
|
||||
@import "base.scss";
|
||||
@import "widget/widget.scss";
|
||||
@import "view/layout-right-nav.scss";
|
||||
@import "view/layout-left-sidebar.scss";
|
||||
@import "view/layout-navigation.scss";
|
||||
@import "view/layout-sidebar.scss";
|
||||
@import "view/page-search.scss";
|
||||
@import "view/page-profile.scss";
|
||||
@import "view/page-customize.scss";
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ $sidebar-width: 400px;
|
|||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
padding-right: 0;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ $sidebar-width: 400px;
|
|||
width: 100%;
|
||||
position: relative;
|
||||
// position: absolute;
|
||||
padding: 30px;
|
||||
padding: 30px 0 30px 30px;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
|
||||
|
|
@ -158,3 +158,30 @@ $sidebar-width: 400px;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
margin: 15px 0 0 0;
|
||||
text-align: center;
|
||||
|
||||
.round-button-mono {
|
||||
> .material-icons {
|
||||
color: $color-gray;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .material-icons {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-link {
|
||||
color: $color-primary;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
font-family: $font-regular;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
<div id="zone-navigation" class="zone-navigation">
|
||||
<ul id="top-zone" class="top-zone">
|
||||
{{#if session.hasAccounts}}
|
||||
<li id="accounts-button" data-tooltip="Switch team" data-tooltip-position="right center">
|
||||
<div id="accounts-button" class="round-button-mono button-white">
|
||||
<i class="material-icons">apps</i>
|
||||
</div>
|
||||
</li>
|
||||
{{/if}}
|
||||
<li id="home-button" class="{{if view.folder 'selected'}}" data-tooltip="Home" data-tooltip-position="right center">
|
||||
{{#link-to 'folders' tagName="div" class="round-button-mono button-white"}}
|
||||
<i class="material-icons">home</i>
|
||||
{{/link-to}}
|
||||
</li>
|
||||
<li id="search-button" class="{{if view.search 'selected'}}" data-tooltip="Search" data-tooltip-position="right center">
|
||||
{{#link-to 'search' tagName="div" class="round-button-mono button-white"}}
|
||||
<i class="material-icons icon-tool">search</i>
|
||||
{{/link-to}}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul id="pinned-zone" class="pinned-zone">
|
||||
{{#each pins as |pin|}}
|
||||
<li {{action 'jumpToPin' pin}} data-id={{pin.id}} id="pin-{{pin.id}}" data-tooltip="{{pin.pin}}" data-tooltip-position="right middle" class="pin"><span class="key">{{pin.pin}}</span></li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
<ul id="bottom-zone" class="bottom-zone">
|
||||
{{#if session.session.content.authenticated.user.admin}}
|
||||
<li id="workspace-settings" class="{{if view.settings 'selected'}}" data-tooltip="Settings" data-tooltip-position="right center">
|
||||
{{#link-to 'customize.general'}}
|
||||
<div class="round-button-mono button-white">
|
||||
<i class="material-icons icon-tool">tune</i>
|
||||
</div>
|
||||
{{/link-to}}
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if session.authenticated}}
|
||||
<li id="user-profile-button" class="{{if view.profile 'selected'}}" data-tooltip="Profile" data-tooltip-position="right center">
|
||||
{{#link-to 'profile'}}
|
||||
<div class="round-button-mono button-white">
|
||||
<i class="material-icons profile-link">{{session.user.initials}}</i>
|
||||
</div>
|
||||
{{/link-to}}
|
||||
</li>
|
||||
{{#if enableLogout}}
|
||||
<li id="workspace-logout" data-tooltip="Logout" data-tooltip-position="right center">
|
||||
{{#link-to 'auth.logout'}}
|
||||
<div class="round-button-mono button-white">
|
||||
<i class="material-icons icon-tool">exit_to_app</i>
|
||||
</div>
|
||||
{{/link-to}}
|
||||
</li>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<li id="workspace-login" data-tooltip="Login" data-tooltip-position="right center">
|
||||
{{#link-to 'auth.login'}}
|
||||
<div class="round-button-mono button-white">
|
||||
<i class="material-icons">lock_open</i>
|
||||
</div>
|
||||
{{/link-to}}
|
||||
</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
|
||||
{{#if session.hasAccounts}}
|
||||
{{#dropdown-menu target="accounts-button" position="bottom right" open="click" }}
|
||||
<ul class="menu">
|
||||
{{#each session.accounts as |account|}}
|
||||
<li class="item" {{action 'switchAccount' account.domain }}>{{account.title}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/dropdown-menu}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
@ -1,3 +1,51 @@
|
|||
<div id="sidebar-wrapper">
|
||||
<div class="navigation">
|
||||
{{#link-to 'folders' tagName="div" class="round-button-mono button-white"}}
|
||||
<i class="material-icons">home</i>
|
||||
{{/link-to}}
|
||||
<div class="button-gap" />
|
||||
{{#link-to 'search' tagName="div" class="round-button-mono button-white"}}
|
||||
<i class="material-icons icon-tool">search</i>
|
||||
{{/link-to}}
|
||||
{{#if session.authenticated}}
|
||||
{{#if hasPins}}
|
||||
<div class="button-gap" />
|
||||
<div class="round-button-mono button-white" id="user-pins-button">
|
||||
<i class="material-icons">favorite</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="button-gap" />
|
||||
<div class="round-button-mono button-white" id="profile-button">
|
||||
<i class="material-icons profile-link">{{session.user.initials}}</i>
|
||||
</div>
|
||||
{{#dropdown-menu target="profile-button" position="bottom left" open="click"}}
|
||||
<ul class="menu">
|
||||
{{#link-to 'profile' tagName="li" class="item"}}Profile{{/link-to}}
|
||||
{{#if session.isAdmin}}
|
||||
{{#link-to 'customize.general' tagName="li" class="item"}}Settings{{/link-to}}
|
||||
{{/if}}
|
||||
{{#if enableLogout}}
|
||||
<li class="divider"></li>
|
||||
{{#link-to 'auth.logout' tagName="li" class="item"}}Logout{{/link-to}}
|
||||
{{/if}}
|
||||
</ul>
|
||||
{{/dropdown-menu}}
|
||||
{{#if hasPins}}
|
||||
{{#dropdown-menu target="user-pins-button" position="bottom left" open="click"}}
|
||||
<ul class="menu">
|
||||
{{#each pins as |pin|}}
|
||||
<li {{action 'jumpToPin' pin}} data-id={{pin.id}} id="pin-{{pin.id}}" class="item">{{pin.pin}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/dropdown-menu}}
|
||||
{{/if}}
|
||||
{{else}}
|
||||
{{#link-to 'auth.login'}}
|
||||
<div class="round-button-mono button-white">
|
||||
<i class="material-icons">lock_open</i>
|
||||
</div>
|
||||
{{/link-to}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{yield}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -202,7 +202,6 @@ export default {
|
|||
AttachmentModel,
|
||||
DocumentModel,
|
||||
FolderModel,
|
||||
FolderPermissionModel,
|
||||
OrganizationModel,
|
||||
PageModel,
|
||||
PageMetaModel,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue