Frontend] Styling for New Edit Mode

open #198
.l-flex styles refined;
Animation refinement;
.s-btn default vertical-align = top;
.tool-bar style tweaked;
Added title-label back into edit-action-buttons.html;
This commit is contained in:
Charles Hacskaylo
2015-10-21 11:35:36 -07:00
parent 5382cca435
commit 4c84789d5d
9 changed files with 219 additions and 146 deletions

View File

@@ -54,45 +54,59 @@
ng-class="{ active:editMode }">
<div class="l-object-wrapper-inner l-flex flex-col">
<!-- Toolbar and Save/Cancel buttons -->
<div class="l-edit-controls flex-elem l-flex flex-row"
<div class="l-edit-controls flex-elem l-flex flex-row flex-align-end"
ng-class="{ active:editMode }">
<mct-toolbar name="mctToolbar"
<!-- <mct-toolbar name="mctToolbar"
structure="toolbar.structure"
ng-model="toolbar.state"
class="flex-elem grow">
</mct-toolbar>
</mct-toolbar>-->
<!-- from toolbar.html -->
<!-- <mct-toolbar-x class="flex-elem grow">
<mct-toolbar-x class="flex-elem grow ellipsis">
<form novalidate>
<div class="tool-bar btn-bar contents abs">
<div class="tool-bar btn-bar">
<span class="l-control-group">
<span class="s-menu-btn">Foo</span>
<span class="s-menu-btn">Bar</span>
<span class="s-menu-btn">Foo</span>
<span class="s-menu-btn">Bar</span>
</span>
<span class="l-control-group">
<span class="s-menu-btn">Foo</span>
<span class="s-menu-btn">Bar</span>
<span class="s-menu-btn">Foo</span>
<span class="s-menu-btn">Lorem</span>
</span>
<span class="l-control-group">
<span class="s-menu-btn">Foo</span>
<span class="s-menu-btn">Bar</span>
<span class="s-menu-btn">Lorem</span>
</span>
<span class="s-menu-btn">Lorem</span>
</div>
</form>
</mct-toolbar-x>-->
</mct-toolbar-x>
<mct-representation key="'edit-action-buttons'"
<!-- <mct-representation key="'edit-action-buttons'"
mct-object="domainObject"
class='flex-elem conclude-editing'>
</mct-representation>
</mct-representation>-->
<!-- from edit-action-buttons.html -->
<!-- <span>
<span class='flex-elem conclude-editing'>
<span ng-repeat="btn in editBtns">
<a class='s-btn t-{{btn.cssclass}}'
title='{{btn.title}}'
ng-click="currentAction.perform()"
ng-class="{ major: $index === 0 }"></a>
ng-class="{ major: $index === 0 }">
<span class="title-label">{{btn.title}}</span>
</a>
</span>
</span>-->
</span>
</div>
<mct-representation key="representation.selected.key"