mirror of
https://github.com/documize/community.git
synced 2025-07-22 14:49:42 +02:00
new spaces view
New modal dialog framework used for Add Space.
This commit is contained in:
Harvey Kandola
parent
ec5d21be4a
commit
4bc08cbdee
15 changed files with 234 additions and 138 deletions
70
gui/app/components/toolbar/for-spaces.js
Normal file
70
gui/app/components/toolbar/for-spaces.js
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
// 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';
|
||||
import { schedule } from '@ember/runloop';
|
||||
import { notEmpty } from '@ember/object/computed';
|
||||
import NotifierMixin from '../../mixins/notifier';
|
||||
import AuthMixin from '../../mixins/auth';
|
||||
|
||||
export default Component.extend(NotifierMixin, AuthMixin, {
|
||||
spaceName: '',
|
||||
copyTemplate: true,
|
||||
copyPermission: true,
|
||||
copyDocument: false,
|
||||
clonedSpace: { id: '' },
|
||||
hasClone: notEmpty('clonedSpace.id'),
|
||||
|
||||
didInsertElement() {
|
||||
this._super(...arguments);
|
||||
|
||||
$('#add-space-modal').on('show.bs.modal', function(event) { // eslint-disable-line no-unused-vars
|
||||
schedule('afterRender', () => {
|
||||
$("#new-space-name").focus();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
actions: {
|
||||
onCloneSpaceSelect(sp) {
|
||||
this.set('clonedSpace', sp)
|
||||
},
|
||||
|
||||
onAddSpace(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let spaceName = this.get('spaceName');
|
||||
let clonedId = this.get('clonedSpace.id');
|
||||
|
||||
if (is.empty(spaceName)) {
|
||||
$("#new-space-name").addClass("is-invalid").focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
let payload = {
|
||||
name: spaceName,
|
||||
CloneID: clonedId,
|
||||
copyTemplate: this.get('copyTemplate'),
|
||||
copyPermission: this.get('copyPermission'),
|
||||
copyDocument: this.get('copyDocument'),
|
||||
}
|
||||
|
||||
this.set('spaceName', '');
|
||||
this.set('clonedSpace.id', '');
|
||||
$("#new-space-name").removeClass("is-invalid");
|
||||
|
||||
$('#add-space-modal').modal('hide');
|
||||
$('#add-space-modal').modal('dispose');
|
||||
|
||||
this.attrs.onAddSpace(payload);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -10,21 +10,16 @@
|
|||
// https://documize.com
|
||||
|
||||
import { inject as service } from '@ember/service';
|
||||
|
||||
import Controller from '@ember/controller';
|
||||
import NotifierMixin from '../../mixins/notifier';
|
||||
|
||||
export default Controller.extend(NotifierMixin, {
|
||||
export default Controller.extend({
|
||||
folderService: service('folder'),
|
||||
|
||||
actions: {
|
||||
onAddSpace(m) {
|
||||
let self = this;
|
||||
this.showNotification("Added");
|
||||
|
||||
this.get('folderService').add(m).then(function (newFolder) {
|
||||
self.get('folderService').setCurrentFolder(newFolder);
|
||||
self.transitionToRoute('folder', newFolder.get('id'), newFolder.get('slug'));
|
||||
this.get('folderService').add(m).then((sp) => {
|
||||
this.get('folderService').setCurrentFolder(sp);
|
||||
this.transitionToRoute('folder', sp.get('id'), sp.get('slug'));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,6 @@
|
|||
{{layout/nav-bar}}
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="mt-5 mb-5">
|
||||
{{toolbar/for-spaces spaces=model onAddSpace=(action 'onAddSpace')}}
|
||||
{{spaces/space-list spaces=model}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-none">
|
||||
{{#layout/zone-container}}
|
||||
|
||||
{{#layout/zone-sidebar}}
|
||||
{{folder/sidebar-zone folders=model noFolder=true onAddSpace=(action 'onAddSpace')}}
|
||||
{{/layout/zone-sidebar}}
|
||||
{{#layout/zone-content}}
|
||||
{{/layout/zone-content}}
|
||||
{{/layout/zone-container}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,9 @@
|
|||
@import "mixins.scss";
|
||||
@import "base.scss";
|
||||
@import "bootstrap.scss";
|
||||
|
||||
@import "widget/widget.scss";
|
||||
@import "view/layout.scss";
|
||||
@import "view/layout.scss"; // junk?
|
||||
@import "view/page-search.scss";
|
||||
@import "view/page-profile.scss";
|
||||
@import "view/page-customize.scss";
|
||||
|
|
@ -25,10 +26,11 @@
|
|||
@import "view/document/all.scss";
|
||||
@import "view/common.scss";
|
||||
|
||||
@import "view/navigation.scss";
|
||||
@import "view/toolbar.scss";
|
||||
@import "view/views.scss";
|
||||
|
||||
@import "vendor.scss";
|
||||
@import "responsive.scss";
|
||||
@import "print.scss";
|
||||
@import "section/trello.scss";
|
||||
@import "section/gemini.scss";
|
||||
|
|
|
|||
3
gui/app/styles/bootstrap.scss
vendored
3
gui/app/styles/bootstrap.scss
vendored
|
|
@ -48,6 +48,9 @@ $modal-footer-border-color: $color-white;
|
|||
$border-radius: .125rem;
|
||||
$border-radius-lg: .15rem;
|
||||
$border-radius-sm: .1rem;
|
||||
$border-radius: 0;
|
||||
$border-radius-lg: 0;
|
||||
$border-radius-sm: 0;
|
||||
|
||||
// dropdown
|
||||
$dropdown-link-color: $color-off-black;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
// https://documize.com
|
||||
|
||||
// Theme colors
|
||||
$color-primary: #351056;
|
||||
$color-primary: #290F3F; //#351056;
|
||||
$color-primary-light: #F7F2FF;
|
||||
$color-link: #1b701e;
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
box-shadow: 1px 1px 3px 0px rgba(211,211,211,1);
|
||||
|
||||
&:hover {
|
||||
background-color: darken($color-card, 3%);
|
||||
background-color: darken($color-card, 5%);
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,3 @@
|
|||
.nav-bar {
|
||||
background-color: $color-primary;
|
||||
padding: 10px 20px;
|
||||
color: $color-white;
|
||||
font-size: 1rem;
|
||||
|
||||
.nav-link, .nav-link:visited {
|
||||
color: $color-white;
|
||||
|
||||
&:hover {
|
||||
color: darken($color-white, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-msg {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// pre-nov17 UX
|
||||
$sidebar-width: 400px;
|
||||
|
|
@ -82,15 +52,6 @@ $sidebar-width: 400px;
|
|||
}
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
#wrapper {
|
||||
padding-left: $sidebar-width;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-common {
|
||||
display: inline-block;
|
||||
|
|
@ -152,36 +113,6 @@ $sidebar-width: 400px;
|
|||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
margin: 0 0 0 0;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
background-color: $color-sidebar-navigation;
|
||||
border-bottom: 1px solid $color-sidebar-navigation-border;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.document-sidebar-toolbar {
|
||||
margin: 10px 0 0 0;
|
||||
padding: 10px 0;
|
||||
|
|
|
|||
27
gui/app/styles/view/navigation.scss
Normal file
27
gui/app/styles/view/navigation.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
.nav-bar {
|
||||
background-color: $color-primary;
|
||||
padding: 10px 20px;
|
||||
color: $color-white;
|
||||
font-size: 1rem;
|
||||
|
||||
.nav-link, .nav-link:visited {
|
||||
color: $color-white;
|
||||
|
||||
&:hover {
|
||||
color: darken($color-white, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-msg {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
28
gui/app/styles/view/toolbar.scss
Normal file
28
gui/app/styles/view/toolbar.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.toolbar {
|
||||
margin: 30px 0 0 0;
|
||||
|
||||
> .links {
|
||||
display: inlne-block;
|
||||
|
||||
> .link {
|
||||
color: $color-gray;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
> .selected {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<div id="nav-bar" class="nav-bar clearfix">
|
||||
<div class="row no-gutters">
|
||||
<div class="col col-sm-9">
|
||||
{{#link-to "profile" class='nav-link'}}
|
||||
{{#link-to "folders" class='nav-link'}}
|
||||
<div class="nav-title">{{appMeta.title}}</div>
|
||||
<div class="nav-msg text-truncate">{{appMeta.message}}</div>
|
||||
{{/link-to}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<div class="view-spaces">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mt-4 mb-5">
|
||||
|
||||
<div class="view-spaces">
|
||||
<div class="heading">EVERYONE <div class="counter">({{publicFolders.length}})</div></div>
|
||||
{{#unless hasPublicFolders}}
|
||||
<p>No global spaces</p>
|
||||
|
|
@ -37,5 +40,9 @@
|
|||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
49
gui/app/templates/components/toolbar/for-spaces.hbs
Normal file
49
gui/app/templates/components/toolbar/for-spaces.hbs
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<div class="row">
|
||||
<div class="col col-sm-8">
|
||||
<div class="toolbar">
|
||||
<ul class="links">
|
||||
{{#link-to "folders" class="link selected" tagName="li"}}SPACES{{/link-to}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="toolbar">
|
||||
<div class="buttons">
|
||||
{{#if session.isEditor}}
|
||||
<button type="button" class="btn btn-success font-weight-bold" data-toggle="modal" data-target="#add-space-modal" data-backdrop="static">+ SPACE</button>
|
||||
<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Add Space</div>
|
||||
<div class="modal-body">
|
||||
<form onsubmit={{action 'onAddSpace'}}>
|
||||
<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>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="clone-space-dropdown">Clone Space</label>
|
||||
{{ui-select id="clone-space-dropdown" content=spaces prompt="select space" action=(action 'onCloneSpaceSelect') optionValuePath="id" optionLabelPath="name" selection=cloneSpace}}
|
||||
<small id="emailHelp" class="form-text text-muted">Copy templates, permissions, documents from existing space</small>
|
||||
<div class="margin-top-10" />
|
||||
{{#if hasClone}}
|
||||
{{#ui/ui-checkbox selected=copyTemplate}}Copy templates{{/ui/ui-checkbox}}
|
||||
{{#ui/ui-checkbox selected=copyPermission}}Copy permissions{{/ui/ui-checkbox}}
|
||||
{{#ui/ui-checkbox selected=copyDocument}}Copy documents{{/ui/ui-checkbox}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-success font-weight-bold" onclick={{action 'onAddSpace'}}>Add</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<button type="button" class="btn btn-primary" id="test-button">Save</button>
|
||||
<button type="button" class="btn btn-success" id="test-button2" data-toggle="tooltip" data-placement="top" title="Tooltip on top">+ Document</button>
|
||||
<button type="button" class="btn btn-success font-weight-bold" id="test-button2" data-toggle="tooltip" data-placement="top" title="Tooltip on top">+ Document</button>
|
||||
<button type="button" class="btn btn-secondary" id="test-button3" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top">+ Document</button>
|
||||
|
||||
<button type="button" class="btn btn-danger" id="test-button4" data-toggle="modal" data-target="#exampleModal" data-backdrop="static">Delete</button>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue