[Frontend] Styling for New Edit Mode

open #198
Added Save and Cancel buttons;
Additional transition styling;
tool-bar styles refined;
This commit is contained in:
Charles Hacskaylo
2015-10-20 14:11:59 -07:00
parent 6e30a25a6f
commit 685dd2114d
6 changed files with 242 additions and 195 deletions

View File

@@ -20,12 +20,13 @@
at runtime from the About dialog for additional information.
-->
<div ng-init="
editActive = false;
editMode = false;
editBtns = [{ cssclass: 'save',title: 'Save Changes' },{ cssclass: 'cancel',title: 'Discard Changes' }];
"></div>
<a class="s-btn"
style="opacity: 0.9; position:absolute; z-index: 100"
ng-class="{ major:!editActive }"
ng-click="editActive = !editActive">Set activeEdit to {{!editActive}}</a>
style="opacity: 0.9; position:absolute; right: 250px; z-index: 100"
ng-class="{ major:!editMode }"
ng-click="editMode = !editMode">Set EditMode to {{!editMode}}</a>
<span ng-controller="BrowseObjectController">
<div class="object-browse-bar bar l-flex">
<div class="items-select left">
@@ -50,20 +51,29 @@
</div>
<div class="l-object-wrapper"
ng-class="{ active:editActive }">
ng-class="{ active:editMode, 'not-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"
ng-if="editActive">
ng-if="editMode">
<mct-toolbar name="mctToolbar"
structure="toolbar.structure"
ng-model="toolbar.state"
class="flex-elem grow">
</mct-toolbar>
<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 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>
</span>
</span>
</div>
<mct-representation key="representation.selected.key"