swcs/Archetype
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update control icons and do only show them on fieldset hover

Browse Source
This commit is contained in:
Tobias Klika
2017-09-21 13:41:47 +02:00
parent cd93e17494
commit 18935b4a69
2 changed files with 27 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/less/archetype.less
+23 -12
View File
@@ -36,7 +36,6 @@
.fieldsetIcon {
float: left;
padding: 0 10px 0 0;
color: #333;
vertical-align: text-bottom;
}
@@ -152,10 +151,11 @@
overflow: hidden;
text-overflow: ellipsis;
}
&.dimmed {
i, span {
color: #d9d9d9 !important;
}
}
&.dimmed {
label {
color: #d9d9d9 !important;
}
}
@@ -166,6 +166,10 @@
top: 50%;
margin-top: -15px;
padding: 0;
opacity: 0;
transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
.icon {
display: inline-block;
@@ -179,28 +183,35 @@
font-size: 16px;
text-align: center;
margin-left: 4px;
&:hover {
color: #333;
background: #35c786;
border-color: #35c786;
color: white;
}
&.icon-delete:hover {
color: #b94a48;
&.icon-trash:hover {
background: #fe5b57;
border-color: #fe5b57;
}
&.icon-disabled {
cursor: default;
&:hover {
color: #ddd;
background: white;
border-color: #b6b6b6;
}
}
&.icon-active {
color: #333;
color: #bbb;
&:hover {
color: #333;
color: white;
}
}
}
}
&:hover {
&:hover .archetypeEditorControls {
opacity: 1;
}
}
app/views/archetype.default.html
+4 -4
View File
@@ -22,10 +22,10 @@
<ul ui-sortable="sortableOptions" class="archetypeSortable" ng-class="{archetypeEmpty: model.value.fieldsets.length === 0 || sortingLastItem(), archetypeCrossDraggable: model.config.enableCrossDragging}" ng-model="model.value.fieldsets">
<li ng-repeat="fieldset in model.value.fieldsets">
<fieldset ng-class="['archetype-fieldset-' + fieldset.alias, (getFieldsetValidity(fieldset) == false ? 'archetypeFieldsetError' : '')]" ng-init="fieldsetConfigModel = getConfigFieldsetByAlias(fieldset.alias)">
<div class="archetypeFieldsetLabel" ng-class="{enableCollapsing: model.config.enableCollapsing}">
<div class="archetypeFieldsetLabel" ng-class="{enableCollapsing: model.config.enableCollapsing, dimmed: isDisabled(fieldset)}">
<div ng-click="focusFieldset(fieldset)" class="label-sub module-label">
<span class="caret" ng-class="{'caret-right': isCollapsed(fieldset)}" ng-show="model.config.enableCollapsing"></span>
<label ng-class="{dimmed: isDisabled(fieldset)}">
<label>
<i class="fieldsetIcon icon ng-class:fieldsetConfigModel.icon"></i>
<span ng-bind="getFieldsetTitle(fieldsetConfigModel, $index)"></span>
</label>
@@ -34,9 +34,9 @@
<i class="icon icon-add" ng-show="canAdd()" ng-click="openFieldsetPicker($index, $event)"></i>
<i class="icon icon-navigation handle" ng-show="canSort()"></i>
<i class="icon icon-documents" ng-click="cloneRow($index)" ng-show="canClone()"></i>
<i class="icon icon-power" ng-class="{'icon-active': fieldset.disabled}" ng-click="enableDisable(fieldset)" ng-show="showDisableIcon(fieldset)"></i>
<i class="icon icon-eye" ng-class="{'icon-active': fieldset.disabled}" ng-click="enableDisable(fieldset)" ng-show="showDisableIcon(fieldset)"></i>
<i class="icon icon-time icon-disabled" ng-class="{'icon-active': isDisabledByPublishing(fieldset)}" ng-show="showPublishingIcon(fieldset)"></i>
<i class="icon icon-delete" ng-click="removeRow($index)" ng-show="canRemove()"></i>
<i class="icon icon-trash" ng-click="removeRow($index)" ng-show="canRemove()"></i>
</div>
</div>
<div class="archetypeCollapser animate-hide" ng-hide="model.config.enableCollapsing && isCollapsed(fieldset)" ng-if="isLoaded(fieldset)">