Skip to content

Commit

Permalink
[Frontend] Glyph refactoring
Browse files Browse the repository at this point in the history 
Fixes #1047
WIP: search, toolbar buttons; mods
to flex archetypes
  • Loading branch information
@charlesh88
charlesh88 committed Jul 19, 2016
1 parent 28b663c commit 9d9cabb
Show file tree
Hide file tree
Showing 5 changed files with 49 additions and 19 deletions.
7 changes: 3 additions & 4 deletions platform/commonUI/general/res/sass/_archetypes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,17 +121,16 @@
.l-flex-row {
@include flex-direction(row);
&.flex-elem { @include flex(1 1 auto); }
.flex-elem {
height: inherit;
line-height: inherit;
> .flex-elem {
min-width: 0;
&.holder:not(:last-child) { margin-right: $interiorMargin; }
}
.flex-container { @include flex-direction(row); }
}

.l-flex-col {
@include flex-direction(column);
.flex-elem {
> .flex-elem {
min-height: 0;
&.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
}
Expand Down
26 changes: 16 additions & 10 deletions platform/commonUI/general/res/sass/search/_search.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,17 +43,17 @@
}

&:before,
.clear-icon,
.clear-input,
.menu-icon {
// :before is magnify glass icon
box-sizing: border-box;
color: $colorInputIcon;
height: $iconD;
width: $iconD;
line-height: $iconD;
position: absolute;
text-align: center;
top: $iconEdgeM;
position: absolute;
text-align: center;
top: $iconEdgeM;
}

.search-input {
Expand Down Expand Up @@ -81,7 +81,8 @@
color: pullForward($colorInputIcon, 10%);
}

.clear-icon {
.clear-input {
// Hiding for now with addition of Cancel button
right: $iconD + $interiorMargin;

// Icon is visible only when there is text input
Expand Down Expand Up @@ -116,20 +117,25 @@
}
}

.results-msg {
font-size: 0.8rem;
}

.active-filter-display {
$s: 0.7em;
$p: $interiorMargin;
box-sizing: border-box;
line-height: 130%;
padding-left: $s * 2.25;
//padding-left: $s * 2.25;
font-size: $s;

.clear-filters-icon {
.clear-filters {
color: $colorInputIcon;
opacity: 1;
font-size: 0.8em;
position: absolute;
left: 1px;
font-size: 0.9em;
margin-right: $interiorMarginSm;
//position: absolute;
//left: 1px;
cursor: pointer;
}
}
Expand Down
5 changes: 5 additions & 0 deletions platform/commonUI/general/res/sass/tree/_tree.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,11 @@ ul.tree {
padding: 0 $interiorMarginSm;
position: relative;

.flex-elem {
height: inherit !important;
line-height: inherit !important;
}

.view-control {
color: $colorItemTreeVC;
font-size: 0.75em;
Expand Down
26 changes: 23 additions & 3 deletions platform/features/layout/bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,8 @@ define([
"cssclass": "icon-plus",
"control": "menu-button",
"text": "Add",
"title": "Add",
"description": "Add new items",
"options": [
{
"name": "Box",
Expand Down Expand Up @@ -113,6 +115,8 @@ define([
"method": "order",
"cssclass": "icon-layers",
"control": "menu-button",
"title": "Layering",
"description": "Move the selected object above or below other objects",
"options": [
{
"name": "Move to Top",
Expand Down Expand Up @@ -140,18 +144,24 @@ define([
"property": "fill",
"glyph": "",
"cssclass": "icon-paint-bucket",
"title": "Fill color",
"description": "Set fill color",
"control": "color"
},
{
"property": "stroke",
"glyph": "â",
"cssclass": "icon-line-horz",
"title": "Border color",
"description": "Set border color",
"control": "color"
},
{
"property": "color",
"glyph": "ä",
"cssclass": "icon-T",
"title": "Text color",
"description": "Set text color",
"mandatory": true,
"control": "color"
},
Expand All @@ -161,6 +171,7 @@ define([
"cssclass": "icon-image",
"control": "dialog-button",
"title": "Image Properties",
"description": "Edit image properties",
"dialog": {
"control": "textfield",
"name": "Image URL",
Expand All @@ -170,8 +181,10 @@ define([
{
"property": "text",
"glyph": "G",
"cssclass": "icon-gear",
"control": "dialog-button",
"title": "Text Properties",
"description": "Edit text properties",
"dialog": {
"control": "textfield",
"name": "Text",
Expand All @@ -181,14 +194,18 @@ define([
{
"method": "showTitle",
"glyph": "ç",
"cssclass": "icon-two-parts-both",
"control": "button",
"description": "Show telemetry element title."
"title": "Show title",
"description": "Show telemetry element title"
},
{
"method": "hideTitle",
"glyph": "å",
"cssclass": "icon-two-parts-one-only",
"control": "button",
"description": "Hide telemetry element title."
"title": "Hide title",
"description": "Hide telemetry element title"
}
]
},
Expand All @@ -197,7 +214,10 @@ define([
{
"method": "remove",
"control": "button",
"glyph": "Z"
"glyph": "Z",
"cssclass": "icon-trash",
"title": "Delete",
"description": "Delete the selected item"
}
]
}
Expand Down
4 changes: 2 additions & 2 deletions platform/search/res/templates/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
type="text"
ng-model="ngModel.input"
ng-keyup="controller.search()"/>
<a class="clear-icon icon-x-in-circle"
<a class="clear-icon clear-input icon-x-in-circle"
ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
ng-click="ngModel.input = ''; controller.search()"></a>
<a class="menu-icon context-available"
Expand All @@ -42,7 +42,7 @@
<div class="active-filter-display flex-elem holder"
ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}"
ng-controller="SearchMenuController as menuController">
<a class="clear-icon clear-filters-icon"
<a class="clear-icon clear-filters icon-x-in-circle"
ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
</div>
<div class="search-results flex-elem holder grows vscroll"
Expand Down

0 comments on commit 9d9cabb

Please sign in to comment.