From e0727e848597fdfdcfe954297933f77ee71c5b9d Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 30 Jun 2015 18:13:17 -0700 Subject: [PATCH] [Frontend] Markup and CSS for link icon indicators WTD-1423 Added small icon to upper right; IN PROGRESS; --- .../browse/res/templates/items/grid-item.html | 6 ++-- platform/commonUI/general/res/css/items.css | 35 ++++++++++--------- platform/commonUI/general/res/css/tree.css | 2 +- .../commonUI/general/res/sass/_constants.scss | 2 +- .../commonUI/general/res/sass/_icons.scss | 6 +--- .../general/res/sass/items/_item.scss | 12 ++++--- 6 files changed, 32 insertions(+), 31 deletions(-) diff --git a/platform/commonUI/browse/res/templates/items/grid-item.html b/platform/commonUI/browse/res/templates/items/grid-item.html index 67d744ca1d..6372b8c393 100644 --- a/platform/commonUI/browse/res/templates/items/grid-item.html +++ b/platform/commonUI/browse/res/templates/items/grid-item.html @@ -29,15 +29,15 @@
P
+ + ô
{{type.getGlyph()}} - - ô - + ô
}
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index ed1e1c6c4e..4b3ac6f8b9 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -156,7 +156,7 @@ color: #0099cc !important; } /* line 48, ../sass/items/_item.scss */ .items-holder .item.grid-item:hover .item-main .item-type .l-link-icon { - color: #5bf5ef; } + color: #49dedb; } /* line 52, ../sass/items/_item.scss */ .items-holder .item.grid-item:hover .item-main .item-open { opacity: 1; } @@ -177,17 +177,20 @@ width: auto; } /* line 68, ../sass/items/_item.scss */ .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon { - margin-left: 5px; } - /* line 73, ../sass/items/_item.scss */ + margin-left: 3px; } + /* line 70, ../sass/items/_item.scss */ + .items-holder .item.grid-item .bar.top-bar.abs .left .icon.l-link-icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon.l-link-icon { + color: #49dedb; } + /* line 76, ../sass/items/_item.scss */ .items-holder .item.grid-item .bar.bottom-bar.abs { top: auto; height: 30px; padding: 5px; } - /* line 79, ../sass/items/_item.scss */ + /* line 82, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main { line-height: 160px; z-index: 1; } - /* line 85, ../sass/items/_item.scss */ + /* line 88, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-type { overflow: false; position: absolute; @@ -204,17 +207,17 @@ bottom: auto; height: 102px; top: 30px; } - /* line 97, ../sass/items/_item.scss */ + /* line 100, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-type .l-link-icon { - color: #09948f; + color: #1a8e8b; height: 36px; line-height: 36px; position: absolute; font-size: 32px; - right: -10px; + right: -13px; bottom: -10px; z-index: 2; } - /* line 110, ../sass/items/_item.scss */ + /* line 112, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-open { -moz-transition-property: "opacity"; -o-transition-property: "opacity"; @@ -234,17 +237,17 @@ width: 50px; pointer-events: none; text-align: right; } - /* line 122, ../sass/items/_item.scss */ + /* line 124, ../sass/items/_item.scss */ .items-holder .item.grid-item .title { text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; color: #cccccc; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - /* line 130, ../sass/items/_item.scss */ + /* line 132, ../sass/items/_item.scss */ .items-holder .item.grid-item .details { font-size: 0.8em; } - /* line 133, ../sass/items/_item.scss */ + /* line 135, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -281,15 +284,15 @@ /* line 160, ../sass/_mixins.scss */ .items-holder .item.grid-item.selected.btn-menu .invoke-menu { color: #52d4ff; } - /* line 138, ../sass/items/_item.scss */ + /* line 140, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) { color: #80dfff; } - /* line 139, ../sass/items/_item.scss */ + /* line 141, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected .item-main .item-open { color: #80dfff; } - /* line 140, ../sass/items/_item.scss */ + /* line 142, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected .title { color: white; } - /* line 142, ../sass/items/_item.scss */ + /* line 144, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected:hover .item-main .item-type { color: white !important; } diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 614a74df81..ec69f0ebc3 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -180,7 +180,7 @@ ul.tree { /* line 75, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .type-icon .icon.l-link-icon { text-shadow: black 0 1px 2px; - color: #5bf5ef; + color: #49dedb; position: absolute; font-size: 0.5em; right: -5px; diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 1cb6b20fda..c9c3374f76 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -42,7 +42,7 @@ $colorKeySelectedBg: #005177; $colorKeyFg: #fff; $colorAlt1: #ffc700; $colorAlert: #ff3c00; -$colorIconLink: #5bf5ef; +$colorIconLink: #49dedb; $colorPausedBg: #c56f01; $colorPausedFg: #fff; $colorCreateBtn: $colorKey; diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss index c0f40a729a..69fdf7c472 100644 --- a/platform/commonUI/general/res/sass/_icons.scss +++ b/platform/commonUI/general/res/sass/_icons.scss @@ -83,8 +83,4 @@ .super-menu.menu.dropdown .icon { //font-size: $menuLineH * 0.95 // Normalizing for new icomoon symbols font -} - -.l-link-icon { -} - +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss index edfdc619a2..650585b25d 100644 --- a/platform/commonUI/general/res/sass/items/_item.scss +++ b/platform/commonUI/general/res/sass/items/_item.scss @@ -66,7 +66,10 @@ .left, .right { width: auto; .icon { - margin-left: $interiorMargin; + margin-left: $interiorMarginSm; + &.l-link-icon { + color: $colorIconLink; + } } } } @@ -95,14 +98,13 @@ top: $iconMargin - 10; //line-height: $lh; .l-link-icon { - //@include test(blue); - //@include trans-prop-nice("color", $transTime); - color: darken($colorIconLink, 35%); + // When the link icon is in the item-type icon holder + color: darken($colorIconLink, 25%); height: 36px; line-height: 36px; position: absolute; font-size: 32px; - right: -10px; + right: -13px; bottom: -10px; z-index: 2; }