[Frontend] Refactoring glyphs to classes

fixes #1047
Context menus and associated actions,
custom checkboxes, tree item being edited
This commit is contained in:
Charles Hacskaylo 2016-06-27 15:00:46 -07:00
parent b561d4f60e
commit 2bd34f71be
9 changed files with 17 additions and 23 deletions

View File

@ -195,6 +195,7 @@ define([
"category": "contextual",
"implementation": RemoveAction,
"glyph": "Z",
"cssclass": "icon-trash",
"name": "Remove",
"description": "Remove this object from its containing object.",
"depends": [

View File

@ -47,9 +47,6 @@
color: lighten($colorAlert, $ltGamma);
}
}
&.major {
font-size: 1.65em;
}
}
.bar .ui-symbol {

View File

@ -166,8 +166,8 @@ label.radio.custom {
}
}
label.checkbox.custom input:checked ~ em:before { content: "\32"; }
label.radio.custom input:checked ~ em:before { content: "\e619"; }
label.checkbox.custom input:checked ~ em:before { content: $glyph-icon-check; }
label.radio.custom input:checked ~ em:before { content: $glyph-icon-bullet; }
.s-menu-btn label.checkbox.custom {
margin-left: 5px;

View File

@ -120,11 +120,12 @@
a.menu-item-a {
color: $colorMenuFg;
display: block;
&:before {
color: $colorMenuIc;
left: $interiorMargin;
}
}
&:before,
a.menu-item-a:before {
color: $colorMenuIc;
left: $interiorMargin;
}
}
}

View File

@ -85,6 +85,7 @@
.l-filter {
$iconEdgeM: 4px;
$iconD: $formInputH - ($iconEdgeM * 2);
@extend .icon-magnify;
// Adds a magnifying glass before, holds an input and a clear button
display: inline-block;
position: relative;
@ -106,7 +107,6 @@
&:before {
// Magnify glass icon
content:'\4d';
left: $interiorMargin;
@include trans-prop-nice(color, 250ms);
pointer-events: none;

View File

@ -29,9 +29,7 @@
.clear-icon {
// 'x' in circle icon
&:before {
content: '\e607';
}
@extend .icon-x-in-circle;
}
.holder-search {
@ -41,6 +39,7 @@
$textInputHeight: 19px; // This is equal to the default value, 19px
$iconEdgeM: 4px;
$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
@extend .icon-magnify;
font-size: 0.8em;
position: relative;
@ -76,8 +75,6 @@
&:before {
// Magnify glass icon
content:'\4d';
font-family: symbolsfont;
left: $interiorMarginSm;
@include trans-prop-nice(color, 250ms);
pointer-events: none;

View File

@ -151,7 +151,7 @@ mct-representation {
@extend .ui-symbol;
@include pulse($dur: 1s, $opacity0: 0.25);
color: $colorItemTreeEditingFg;
content: '\70';
content: $glyph-icon-pencil;
margin-right: $interiorMarginSm;
}
.t-object-label {

View File

@ -22,17 +22,12 @@
<div class="menu-element context-menu-wrapper mobile-disable-select" ng-controller="ContextMenuController">
<div class="menu context-menu">
<ul>
<li ng-repeat="menuAction in menuActions"
ng-click="menuAction.perform()"
title="{{menuAction.getMetadata().description}}"
>
<span class="ui-symbol icon type-icon">
{{menuAction.getMetadata().glyph}}
</span>
class="{{menuAction.getMetadata().cssclass}}">
{{menuAction.getMetadata().name}}
</li>
</ul>
</div>
</div>

View File

@ -67,6 +67,7 @@ define([
"name": "Move",
"description": "Move object to another location.",
"glyph": "f",
"cssclass": "icon-move",
"category": "contextual",
"implementation": MoveAction,
"depends": [
@ -80,6 +81,7 @@ define([
"name": "Duplicate",
"description": "Duplicate object to another location.",
"glyph": "+",
"cssclass": "icon-duplicate",
"category": "contextual",
"implementation": CopyAction,
"depends": [
@ -96,6 +98,7 @@ define([
"name": "Create Link",
"description": "Create Link to object in another location.",
"glyph": "è",
"cssclass": "icon-link",
"category": "contextual",
"implementation": LinkAction,
"depends": [
@ -108,7 +111,7 @@ define([
"key": "follow",
"name": "Go To Original",
"description": "Go to the original, un-linked instance of this object.",
"glyph": "ô",
"glyph": "",
"category": "contextual",
"implementation": GoToOriginalAction
},