mirror of
https://github.com/documize/community.git
synced 2025-07-19 05:09:42 +02:00
Componentize new UI buttons and toolbar
This commit is contained in:
Harvey Kandola
parent
0de7efdf20
commit
44d3e40663
7 changed files with 3781 additions and 59 deletions
30
gui/app/components/ui/ui-toolbar.js
Normal file
30
gui/app/components/ui/ui-toolbar.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
// 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';
|
||||
|
||||
export default Component.extend({
|
||||
classNames: ['dmz-toolbar', 'non-printable'],
|
||||
classNameBindings:
|
||||
['raised:dmz-toolbar-raised',
|
||||
'large:dmz-toolbar-large',
|
||||
'bordered:dmz-toolbar-bordered',
|
||||
'light:dmz-toolbar-light',
|
||||
'dark:dmz-toolbar-dark'],
|
||||
raised: false,
|
||||
large: false,
|
||||
bordered: false,
|
||||
dark: false,
|
||||
light: false,
|
||||
|
||||
actions: {
|
||||
}
|
||||
});
|
||||
|
|
@ -6,6 +6,11 @@
|
|||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
|
||||
{{/layout/master-sidebar}}
|
||||
{{#layout/master-content}}
|
||||
<button class="dmz-button-theme">save</button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-theme-light">update</button>
|
||||
<br/>
|
||||
<br/>
|
||||
<button class="dmz-button-green" {{action 'onSuccess'}}>save</button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-yellow" {{action 'onInfo'}}>update</button>
|
||||
|
|
@ -16,78 +21,80 @@
|
|||
<div class="dmz-button-gap-right" />
|
||||
<br/>
|
||||
<br/>
|
||||
<button class="dmz-button-green-light">Save</button>
|
||||
<button class="dmz-button-green-light"><div class='label'>Save</div></button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-yellow-light">Update</button>
|
||||
<button class="dmz-button-yellow-light"><div class='label'>Update</div></button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-gray-light">cancel</button>
|
||||
<button class="dmz-button-gray-light"><div class='label'>cancel</div></button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-red-light">Delete</button>
|
||||
<button class="dmz-button-red-light"><div class='label'>Delete</div></button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<br/>
|
||||
<br/>
|
||||
<button class="dmz-button-green-light"><i class="dicon dicon-e-add"/>space</button>
|
||||
<button class="dmz-button-green-light"><i class="dicon dicon-e-add"/><div class='label'>space</div></button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-green-light"><i class="dicon dicon-e-add"/>content</button>
|
||||
<button class="dmz-button-green-light"><i class="dicon dicon-e-add"/><div class='label'>content</div></button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-yellow-light"><i class="dicon dicon-e-add"/>user</button>
|
||||
<button class="dmz-button-yellow-light"><i class="dicon dicon-e-add"/><div class='label'>user</div></button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-gray-light"><i class="dicon dicon-e-add"/>group</button>
|
||||
<button class="dmz-button-gray-light"><i class="dicon dicon-e-add"/><div class='label'>group</div></button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-red-light"><i class="dicon dicon-bin"/><div class='label'>delete</div></button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="dmz-toolbar-dark-small">
|
||||
{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
|
||||
<i class="dicon dicon-bin red"/>
|
||||
<i class="dicon dicon-print yellow"/>
|
||||
<i class="dicon dicon-settings-gear"/>
|
||||
<i class="dicon dicon-print green"/>
|
||||
<i class="dicon dicon-single-01"/>
|
||||
</div>
|
||||
{{/ui/ui-toolbar}}
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="dmz-toolbar-dark-large">
|
||||
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
|
||||
<i class="dicon dicon-bin red"/>
|
||||
<i class="dicon dicon-print yellow"/>
|
||||
<i class="dicon dicon-settings-gear"/>
|
||||
<i class="dicon dicon-print green"/>
|
||||
<i class="dicon dicon-single-01"/>
|
||||
</div>
|
||||
{{/ui/ui-toolbar}}
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="dmz-toolbar-small">
|
||||
{{#ui/ui-toolbar dark=true light=false raised=true large=false bordered=true}}
|
||||
<i class="dicon dicon-bin red"/>
|
||||
<i class="dicon dicon-print yellow"/>
|
||||
<i class="dicon dicon-settings-gear"/>
|
||||
<i class="dicon dicon-print green"/>
|
||||
<i class="dicon dicon-single-01"/>
|
||||
</div>
|
||||
{{/ui/ui-toolbar}}
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="dmz-toolbar-large">
|
||||
{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}}
|
||||
<i class="dicon dicon-bin red"/>
|
||||
<i class="dicon dicon-print yellow"/>
|
||||
<i class="dicon dicon-settings-gear"/>
|
||||
<i class="dicon dicon-print green"/>
|
||||
<i class="dicon dicon-single-01"/>
|
||||
</div>
|
||||
{{/ui/ui-toolbar}}
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="dmz-toolbar-raised-small">
|
||||
{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
|
||||
<i class="dicon dicon-bin red"/>
|
||||
<i class="dicon dicon-print yellow"/>
|
||||
<i class="dicon dicon-settings-gear"/>
|
||||
<i class="dicon dicon-print green"/>
|
||||
<i class="dicon dicon-single-01"/>
|
||||
</div>
|
||||
{{/ui/ui-toolbar}}
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="dmz-toolbar-raised-large">
|
||||
{{#ui/ui-toolbar dark=true light=false raised=true large=true bordered=true}}
|
||||
<i class="dicon dicon-bin red"/>
|
||||
<i class="dicon dicon-print yellow"/>
|
||||
<i class="dicon dicon-settings-gear"/>
|
||||
<i class="dicon dicon-print green"/>
|
||||
<i class="dicon dicon-single-01"/>
|
||||
</div>
|
||||
{{/ui/ui-toolbar}}
|
||||
<br/>
|
||||
<br/>
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,3 @@
|
|||
@mixin button-shadow-light() {
|
||||
box-shadow: 1px 1px 3px 0px map-get($gray-shades, 400);
|
||||
}
|
||||
@mixin button-shadow() {
|
||||
box-shadow: 1px 1px 3px 0px map-get($gray-shades, 600);
|
||||
}
|
||||
|
||||
@import "ui-tooltip";
|
||||
@import "ui-popup";
|
||||
@import "ui-button";
|
||||
|
|
|
|||
|
|
@ -1,3 +1,10 @@
|
|||
@mixin button-shadow-light() {
|
||||
box-shadow: 1px 1px 3px 0px map-get($gray-shades, 300);
|
||||
}
|
||||
@mixin button-shadow() {
|
||||
box-shadow: 1px 1px 3px 0px map-get($gray-shades, 500);
|
||||
}
|
||||
|
||||
%dmz-button {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
|
|
@ -8,15 +15,23 @@
|
|||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
border: 1px solid transparent;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
@extend .no-select;
|
||||
@include button-shadow();
|
||||
@include border-radius(2px);
|
||||
text-transform: uppercase;
|
||||
|
||||
> .dicon {
|
||||
font-size: 0.7rem;
|
||||
padding: 0 5px 0 0;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
padding: 0.2rem 0.4rem 0 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
> .label {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -113,7 +128,7 @@
|
|||
@include button-shadow-light();
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($red-shades, 300);
|
||||
background-color: map-get($red-shades, 200);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -138,3 +153,25 @@
|
|||
background-color: map-get($gray-shades, 300);
|
||||
}
|
||||
}
|
||||
|
||||
.dmz-button-theme {
|
||||
@extend %dmz-button;
|
||||
background-color: $theme-800;
|
||||
color: $color-white;
|
||||
@include button-shadow();
|
||||
|
||||
&:hover {
|
||||
background-color: $theme-600;
|
||||
}
|
||||
}
|
||||
.dmz-button-theme-light {
|
||||
@extend %dmz-button;
|
||||
background-color: $theme-100;
|
||||
color: $theme-800;
|
||||
border: 1px solid $theme-200;
|
||||
@include button-shadow-light();
|
||||
|
||||
&:hover {
|
||||
background-color: $theme-200;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
%dmz-toolbar {
|
||||
%toolbar-shadow {
|
||||
box-shadow: 1px 1px 3px 0px map-get($gray-shades, 200);
|
||||
}
|
||||
|
||||
.dmz-toolbar {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
|
@ -47,42 +51,80 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dmz-toolbar-dark-small {
|
||||
@extend %dmz-toolbar;
|
||||
background-color: map-get($gray-shades, 200);
|
||||
}
|
||||
|
||||
.dmz-toolbar-dark-large {
|
||||
@extend %dmz-toolbar;
|
||||
background-color: map-get($gray-shades, 200);
|
||||
height: 36px;
|
||||
padding: 5px 10px;
|
||||
.dmz-toolbar-large {
|
||||
height: 40px;
|
||||
padding: 7px 10px;
|
||||
line-height: 33px;
|
||||
|
||||
> .dicon {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dmz-toolbar-small {
|
||||
@extend %dmz-toolbar;
|
||||
background-color: transparent;
|
||||
.dmz-toolbar-dark {
|
||||
background-color: map-get($gray-shades, 200);
|
||||
}
|
||||
|
||||
.dmz-toolbar-large {
|
||||
@extend .dmz-toolbar-dark-large;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dmz-toolbar-raised-small {
|
||||
@extend %dmz-toolbar;
|
||||
.dmz-toolbar-light {
|
||||
background-color: map-get($gray-shades, 100);
|
||||
@include button-shadow-light();
|
||||
}
|
||||
|
||||
.dmz-toolbar-raised-large {
|
||||
@extend .dmz-toolbar-dark-large;
|
||||
background-color: map-get($gray-shades, 100);
|
||||
@include button-shadow-light();
|
||||
.dmz-toolbar-raised {
|
||||
@extend %toolbar-shadow;
|
||||
}
|
||||
|
||||
.dmz-toolbar-bordered {
|
||||
border: 1px solid map-get($gray-shades, 300);
|
||||
}
|
||||
|
||||
|
||||
// .dmz-toolbar-dark-small {
|
||||
// @extend .dmz-toolbar;
|
||||
// background-color: map-get($gray-shades, 200);
|
||||
// border: 1px solid map-get($gray-shades, 300);
|
||||
// @extend %toolbar-shadow;
|
||||
// }
|
||||
|
||||
// .dmz-toolbar-dark-large {
|
||||
// @extend .dmz-toolbar;
|
||||
// background-color: map-get($gray-shades, 200);
|
||||
// border: 1px solid map-get($gray-shades, 300);
|
||||
// height: 40px;
|
||||
// padding: 7px 10px;
|
||||
// line-height: 33px;
|
||||
// @extend %toolbar-shadow;
|
||||
|
||||
// > .dicon {
|
||||
// font-size: 20px;
|
||||
// font-weight: 500;
|
||||
// padding: 0 0.5rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .dmz-toolbar-small {
|
||||
// @extend .dmz-toolbar;
|
||||
// background-color: transparent;
|
||||
// }
|
||||
|
||||
// .dmz-toolbar-large {
|
||||
// @extend .dmz-toolbar-dark-large;
|
||||
// background-color: transparent;
|
||||
// border: none;
|
||||
// box-shadow: none;
|
||||
// }
|
||||
|
||||
// .dmz-toolbar-raised-small {
|
||||
// @extend .dmz-toolbar;
|
||||
// @extend %toolbar-shadow;
|
||||
// background-color: map-get($gray-shades, 100);
|
||||
// border: 1px solid map-get($gray-shades, 200);
|
||||
// }
|
||||
|
||||
// .dmz-toolbar-raised-large {
|
||||
// @extend .dmz-toolbar-dark-large;
|
||||
// @extend %toolbar-shadow;
|
||||
// background-color: map-get($gray-shades, 100);
|
||||
// border: 1px solid map-get($gray-shades, 200);
|
||||
// }
|
||||
|
|
|
|||
3614
gui/app/styles/core/vendor/animate.scss
vendored
3614
gui/app/styles/core/vendor/animate.scss
vendored
File diff suppressed because one or more lines are too long
1
gui/app/templates/components/ui/ui-toolbar.hbs
Normal file
1
gui/app/templates/components/ui/ui-toolbar.hbs
Normal file
|
|
@ -0,0 +1 @@
|
|||
{{yield}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue