Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-22 14:49:42 +02:00
Code Releases Activity

new spaces view

Browse source 
New modal dialog framework used for Add Space.
This commit is contained in:
Harvey Kandola 2017-11-20 13:01:44 +00:00
parent ec5d21be4a
commit 4bc08cbdee
15 changed files with 234 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

70
gui/app/components/toolbar/for-spaces.js Normal file
View 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);
}
}
});

13
gui/app/pods/folders/controller.js
View file

@ -10,21 +10,16 @@
// https://documize.com // https://documize.com
import { inject as service } from '@ember/service'; import { inject as service } from '@ember/service';
import Controller from '@ember/controller'; import Controller from '@ember/controller';
import NotifierMixin from '../../mixins/notifier';
export default Controller.extend(NotifierMixin, { export default Controller.extend({
folderService: service('folder'), folderService: service('folder'),
actions: { actions: {
onAddSpace(m) { onAddSpace(m) {
let self = this; this.get('folderService').add(m).then((sp) => {
this.showNotification("Added"); this.get('folderService').setCurrentFolder(sp);
this.transitionToRoute('folder', sp.get('id'), sp.get('slug'));
this.get('folderService').add(m).then(function (newFolder) {
self.get('folderService').setCurrentFolder(newFolder);
self.transitionToRoute('folder', newFolder.get('id'), newFolder.get('slug'));
}); });
} }
} }

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

@ -1,22 +1,6 @@
{{layout/nav-bar}} {{layout/nav-bar}}
<div class="container"> <div class="container">
<div class="row"> {{toolbar/for-spaces spaces=model onAddSpace=(action 'onAddSpace')}}
<div class="col-12"> {{spaces/space-list spaces=model}}
<div class="mt-5 mb-5">
{{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> </div>

6
gui/app/styles/app.scss
View file

@ -13,8 +13,9 @@
@import "mixins.scss"; @import "mixins.scss";
@import "base.scss"; @import "base.scss";
@import "bootstrap.scss"; @import "bootstrap.scss";
@import "widget/widget.scss"; @import "widget/widget.scss";
@import "view/layout.scss"; @import "view/layout.scss"; // junk?
@import "view/page-search.scss"; @import "view/page-search.scss";
@import "view/page-profile.scss"; @import "view/page-profile.scss";
@import "view/page-customize.scss"; @import "view/page-customize.scss";
@ -25,10 +26,11 @@
@import "view/document/all.scss"; @import "view/document/all.scss";
@import "view/common.scss"; @import "view/common.scss";
@import "view/navigation.scss";
@import "view/toolbar.scss";
@import "view/views.scss"; @import "view/views.scss";
@import "vendor.scss"; @import "vendor.scss";
@import "responsive.scss";
@import "print.scss"; @import "print.scss";
@import "section/trello.scss"; @import "section/trello.scss";
@import "section/gemini.scss"; @import "section/gemini.scss";

3
gui/app/styles/bootstrap.scss vendored
View file

@ -48,6 +48,9 @@ $modal-footer-border-color: $color-white;
$border-radius: .125rem; $border-radius: .125rem;
$border-radius-lg: .15rem; $border-radius-lg: .15rem;
$border-radius-sm: .1rem; $border-radius-sm: .1rem;
$border-radius: 0;
$border-radius-lg: 0;
$border-radius-sm: 0;
// dropdown // dropdown
$dropdown-link-color: $color-off-black; $dropdown-link-color: $color-off-black;

2
gui/app/styles/color.scss
View file

@ -10,7 +10,7 @@
// https://documize.com // https://documize.com
// Theme colors // Theme colors
$color-primary: #351056; $color-primary: #290F3F; //#351056;
$color-primary-light: #F7F2FF; $color-primary-light: #F7F2FF;
$color-link: #1b701e; $color-link: #1b701e;

2
gui/app/styles/mixins.scss
View file

@ -39,7 +39,7 @@
box-shadow: 1px 1px 3px 0px rgba(211,211,211,1); box-shadow: 1px 1px 3px 0px rgba(211,211,211,1);
&:hover { &:hover {
background-color: darken($color-card, 3%); background-color: darken($color-card, 5%);
color: $color-link; color: $color-link;
} }
} }

0
gui/app/styles/responsive.scss
View file

69
gui/app/styles/view/layout.scss
View file

@ -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 // pre-nov17 UX
$sidebar-width: 400px; $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 { .sidebar-common {
display: inline-block; 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 { .document-sidebar-toolbar {
margin: 10px 0 0 0; margin: 10px 0 0 0;
padding: 10px 0; padding: 10px 0;

27
gui/app/styles/view/navigation.scss Normal file
View 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
View 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;
}
}

2
gui/app/templates/components/layout/nav-bar.hbs
View file

@ -1,7 +1,7 @@
<div id="nav-bar" class="nav-bar clearfix"> <div id="nav-bar" class="nav-bar clearfix">
<div class="row no-gutters"> <div class="row no-gutters">
<div class="col col-sm-9"> <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-title">{{appMeta.title}}</div>
<div class="nav-msg text-truncate">{{appMeta.message}}</div> <div class="nav-msg text-truncate">{{appMeta.message}}</div>
{{/link-to}} {{/link-to}}

79
gui/app/templates/components/spaces/space-list.hbs
View file

@ -1,41 +1,48 @@
<div class="view-spaces"> <div class="row">
<div class="col">
<div class="mt-4 mb-5">
<div class="heading">EVERYONE <div class="counter">({{publicFolders.length}})</div></div> <div class="view-spaces">
{{#unless hasPublicFolders}} <div class="heading">EVERYONE <div class="counter">({{publicFolders.length}})</div></div>
<p>No global spaces</p> {{#unless hasPublicFolders}}
{{/unless}} <p>No global spaces</p>
<ul class="list clearfix"> {{/unless}}
{{#each publicFolders as |folder|}} <ul class="list clearfix">
{{#link-to 'folder.index' folder.id folder.slug}} {{#each publicFolders as |folder|}}
<li class="item">{{ folder.name }}</li> {{#link-to 'folder.index' folder.id folder.slug}}
{{/link-to}} <li class="item">{{ folder.name }}</li>
{{/each}} {{/link-to}}
</ul> {{/each}}
</ul>
{{#if session.authenticated}} {{#if session.authenticated}}
<div class="heading">TEAM <div class="counter">({{protectedFolders.length}})</div></div> <div class="heading">TEAM <div class="counter">({{protectedFolders.length}})</div></div>
{{#unless hasProtectedFolders}} {{#unless hasProtectedFolders}}
<p>No team spaces</p> <p>No team spaces</p>
{{/unless}} {{/unless}}
<ul class="list clearfix"> <ul class="list clearfix">
{{#each protectedFolders as |folder|}} {{#each protectedFolders as |folder|}}
{{#link-to 'folder.index' folder.id folder.slug}} {{#link-to 'folder.index' folder.id folder.slug}}
<li class="item">{{ folder.name }}</li> <li class="item">{{ folder.name }}</li>
{{/link-to}} {{/link-to}}
{{/each}} {{/each}}
</ul> </ul>
<div class="heading">PERSONAL <div class="counter">({{privateFolders.length}})</div></div> <div class="heading">PERSONAL <div class="counter">({{privateFolders.length}})</div></div>
{{#unless hasPrivateFolders}} {{#unless hasPrivateFolders}}
<p>No personal spaces</p> <p>No personal spaces</p>
{{/unless}} {{/unless}}
<ul class="list clearfix"> <ul class="list clearfix">
{{#each privateFolders as |folder|}} {{#each privateFolders as |folder|}}
{{#link-to 'folder.index' folder.id folder.slug}} {{#link-to 'folder.index' folder.id folder.slug}}
<li class="item">{{ folder.name }}</li> <li class="item">{{ folder.name }}</li>
{{/link-to}} {{/link-to}}
{{/each}} {{/each}}
</ul> </ul>
{{/if}} {{/if}}
</div>
</div>
</div>
</div> </div>

49
gui/app/templates/components/toolbar/for-spaces.hbs Normal file
View 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>

2
gui/app/templates/components/widget-sample.hbs
View file

@ -1,5 +1,5 @@
<button type="button" class="btn btn-primary" id="test-button">Save</button> <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-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> <button type="button" class="btn btn-danger" id="test-button4" data-toggle="modal" data-target="#exampleModal" data-backdrop="static">Delete</button>