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

ui design & position tweaks

Browse source
This commit is contained in:
Harvey Kandola 2017-01-23 17:37:14 -08:00
parent 44844011f6
commit 9b2f081ef2
8 changed files with 75 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/app/components/dropdown-dialog.js
View file

@ -57,7 +57,7 @@ export default Ember.Component.extend({
classes: 'drop-theme-basic',
position: self.get('position'),
openOn: self.get('open'),
constrainToWindow: false,
constrainToWindow: true,
constrainToScrollParent: false,
tetherOptions: {
offset: self.offset,

26
app/app/styles/view/document/content.scss
View file

@ -39,23 +39,21 @@
> .wysiwyg {
> .is-a-page {
.page-title {
> .page-toolbar {
// opacity: 0.5;
opacity: 0;
@extend .transition-all;
@extend .transition-all;
// &:hover {
// opacity: 1;
// }
}
&:hover {
.page-toolbar {
&:hover {
.page-title {
> .page-toolbar {
opacity: 1;
}
}
}
.page-title {
> .page-toolbar {
opacity: 0;
}
}
}
}
}
@ -65,3 +63,7 @@
margin-top: 150px;
text-align: center;
}
.dropdown-page-toolbar {
width: 300px;
}

45
app/app/styles/view/document/wizard.scss
View file

@ -19,6 +19,10 @@
margin: 0;
padding: 0;
> .min-height {
min-height: 87px;
}
> .item {
list-style: none;
cursor: pointer;
@ -29,17 +33,19 @@
&:hover {
@include ease-in();
> .actions {
display: inline-block;
>.icon {
.actions {
display: inline-block;
}
}
> .details {
> .title {
color: $color-primary;
color: $color-link;
}
> .desc {
color: $color-primary;
color: $color-link;
}
}
}
@ -50,18 +56,32 @@
width: 50px;
> .img {
float: left;
text-align: center;
display: inline-block;
height: 40px;
width: 40px;
}
> .actions {
display: none;
vertical-align: top;
text-align: center;
margin-top: 5px;
opacity: 0.5;
> .material-icons, a {
color: $color-gray;
&:hover {
color: $color-link;
}
}
}
}
> .details {
vertical-align: top;
display: inline-block;
width: 80%;
> .title {
font-size: 1rem;
@ -76,19 +96,6 @@
margin-top: 5px;
}
}
> .actions {
display: none;
vertical-align: top;
text-align: center;
width: 20px;
margin-top: 5px;
opacity: 0.4;
> .material-icons, a {
color: $color-gray;
}
}
}
}
}

28
app/app/styles/view/page-documents.scss
View file

@ -212,18 +212,27 @@
padding: 0;
> .item {
cursor: pointer;
list-style: none;
padding: 10px 5px;
margin: 20px 0;
margin: 10px 0;
min-height: 90px;
@include ease-in();
&:hover {
> .icon {
> .edit-control {
display: block;
}
}
}
.icon {
text-align: center;
display: inline-block;
width: 50px;
> .img {
float: left;
text-align: center;
display: inline-block;
height: 40px;
@ -231,15 +240,16 @@
}
> .edit-control {
color: $color-gray;
font-size: 0.9rem;
display: none;
vertical-align: top;
text-align: center;
float: left;
margin: 5px 0 0 9px;
margin-top: 5px;
opacity: 0.5;
cursor: pointer;
color: $color-gray;
&:hover {
color: $color-link;
color: $color-link;
}
}
}
@ -247,7 +257,7 @@
> .details {
vertical-align: top;
display: inline-block;
width: 80%;
width: 85%;
cursor: pointer;
> .title {
@ -258,7 +268,7 @@
}
> .desc {
color: $color-off-black;
color: $color-gray;
font-size: 0.9rem;
margin-top: 5px;
}

4
app/app/templates/components/document/page-heading.hbs
View file

@ -56,7 +56,7 @@
<div class="input-control">
<label>Target</label>
<div class="tip">Select where the content should be copied to</div>
{{ui-select content=documentList action=(action 'onTargetChange') optionValuePath="id" optionLabelPath="name" selection=document}}
{{ui-select cssClass="dropdown-page-toolbar" content=documentList action=(action 'onTargetChange') optionValuePath="id" optionLabelPath="name" selection=document}}
</div>
{{/dropdown-dialog}}
{{#dropdown-dialog id=moveDialogId target=moveButtonId position="bottom right" button="Move" color="flat-green" onOpenCallback=(action 'onCopyDialogOpen') onAction=(action 'onMovePage' page)}}
@ -68,7 +68,7 @@
<div class="input-control">
<label>Target</label>
<div class="tip">Select where the content should be moved to</div>
{{ui-select content=documentListOthers action=(action 'onTargetChange') optionValuePath="id" optionLabelPath="name"}}
{{ui-select cssClass="dropdown-page-toolbar" content=documentListOthers action=(action 'onTargetChange') optionValuePath="id" optionLabelPath="name"}}
</div>
{{/dropdown-dialog}}
{{/if}}

21
app/app/templates/components/document/page-wizard.hbs
View file

@ -24,9 +24,15 @@
<div class="template-caption">Reusable content</div>
<ul class="list">
{{#each blocks as |block|}}
<li class="item">
<div class="icon" {{action 'onInsertBlock' block}}>
<img class="img" src="/assets/img/section-saved.png" srcset="/assets/img/section-saved@2x.png" />
<li class="item min-height">
<div class="icon">
<img class="img" src="/assets/img/section-saved.png" srcset="/assets/img/section-saved@2x.png" {{action 'onInsertBlock' block}}/>
<div class="actions">
{{#link-to 'document.block' folder.id folder.slug document.id document.slug block.id}}
<i class="material-icons">mode_edit</i>
{{/link-to}}
<i class="material-icons" id={{block.deleteId}}>delete</i>
</div>
</div>
<div class="details" {{action 'onInsertBlock' block}}>
<div class='title'>
@ -35,15 +41,8 @@
<div class='desc'>{{block.excerpt}}</div>
<div class='desc'>By {{block.firstname}} {{block.lastname}}, {{time-ago block.created}} (used: {{ block.used }})</div>
</div>
<div class="actions">
{{#link-to 'document.block' folder.id folder.slug document.id document.slug block.id}}
<i class="material-icons">mode_edit</i>
{{/link-to}}
<div class="divider"></div>
<i class="material-icons" id={{block.deleteId}}>delete</i>
</div>
<div class="clearfix" />
{{#dropdown-dialog target=block.deleteId position="top right" button="Delete" color="flat-red" onAction=(action 'onDeleteBlock' block.id)}}
{{#dropdown-dialog target=block.deleteId position="bottom left" button="Delete" color="flat-red" onAction=(action 'onDeleteBlock' block.id)}}
<p>
Are you sure you want to delete block<br/>
<span class="bold">{{block.title}}?</span>

4
app/app/templates/components/folder/start-document.hbs
View file

@ -9,10 +9,10 @@
{{#each savedTemplates key="id" as |template|}}
<li class="item">
<div class="icon">
<img class="img" src="/assets/img/{{template.img}}.png" srcset="/assets/img/{{template.img}}@2x.png" />
<img class="img" src="/assets/img/{{template.img}}.png" srcset="/assets/img/{{template.img}}@2x.png" {{action 'startDocument' template}} />
{{#if editor}}
{{#unless template.locked}}
<div class="edit-control" {{action 'editTemplate' template}}>edit</div>
<i class="material-icons edit-control" {{action 'editTemplate' template}}>mode_edit</i>
{{/unless}}
{{/if}}
</div>

2
app/app/templates/components/ui-select.hbs
View file

@ -1,4 +1,4 @@
<select {{action 'change' on='change'}} class={{csslass}} readonly={{readonly}}>
<select {{action 'change' on='change'}} class={{cssClass}} readonly={{readonly}}>
{{#if prompt}}
<option disabled selected={{is-not selection}}>
{{prompt}}