diff --git a/platform/commonUI/browse/res/templates/items/grid-item.html b/platform/commonUI/browse/res/templates/items/grid-item.html index e64afd4a9f..67d744ca1d 100644 --- a/platform/commonUI/browse/res/templates/items/grid-item.html +++ b/platform/commonUI/browse/res/templates/items/grid-item.html @@ -32,7 +32,13 @@
-
{{type.getGlyph()}}
+
+ {{type.getGlyph()}} + + + ô + +
}
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index c40b3f7bd9..ed1e1c6c4e 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -151,59 +151,70 @@ /* line 160, ../sass/_mixins.scss */ .items-holder .item.grid-item.btn-menu .invoke-menu { color: #828282; } - /* line 42, ../sass/items/_item.scss */ - .items-holder .item.grid-item .item-main .item-type { - -moz-transition-property: "color"; - -o-transition-property: "color"; - -webkit-transition-property: "color"; - transition-property: "color"; - -moz-transition-duration: 200ms; - -o-transition-duration: 200ms; - -webkit-transition-duration: 200ms; - transition-duration: 200ms; - -moz-transition-timing-function: ease-in-out; - -o-transition-timing-function: ease-in-out; - -webkit-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; } /* line 46, ../sass/items/_item.scss */ .items-holder .item.grid-item:hover .item-main .item-type { color: #0099cc !important; } - /* line 49, ../sass/items/_item.scss */ + /* line 48, ../sass/items/_item.scss */ + .items-holder .item.grid-item:hover .item-main .item-type .l-link-icon { + color: #5bf5ef; } + /* line 52, ../sass/items/_item.scss */ .items-holder .item.grid-item:hover .item-main .item-open { opacity: 1; } - /* line 54, ../sass/items/_item.scss */ + /* line 57, ../sass/items/_item.scss */ .items-holder .item.grid-item .contents { top: 5px; right: 5px; bottom: 5px; left: 5px; } - /* line 58, ../sass/items/_item.scss */ + /* line 61, ../sass/items/_item.scss */ .items-holder .item.grid-item .bar.top-bar.abs { bottom: auto; height: 20px; line-height: 20px; z-index: 5; } - /* line 63, ../sass/items/_item.scss */ + /* line 66, ../sass/items/_item.scss */ .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right { width: auto; } - /* line 65, ../sass/items/_item.scss */ + /* 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 70, ../sass/items/_item.scss */ + /* line 73, ../sass/items/_item.scss */ .items-holder .item.grid-item .bar.bottom-bar.abs { top: auto; height: 30px; padding: 5px; } - /* line 76, ../sass/items/_item.scss */ + /* line 79, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main { line-height: 160px; z-index: 1; } - /* line 82, ../sass/items/_item.scss */ + /* line 85, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-type { + overflow: false; + position: absolute; + top: 40px; + right: 40px; + bottom: 40px; + left: 40px; + width: auto; + height: auto; color: #737373; text-align: center; - font-size: 6em; } - /* line 88, ../sass/items/_item.scss */ + font-size: 96.9px; + line-height: 102px; + bottom: auto; + height: 102px; + top: 30px; } + /* line 97, ../sass/items/_item.scss */ + .items-holder .item.grid-item .item-main .item-type .l-link-icon { + color: #09948f; + height: 36px; + line-height: 36px; + position: absolute; + font-size: 32px; + right: -10px; + bottom: -10px; + z-index: 2; } + /* line 110, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-open { -moz-transition-property: "opacity"; -o-transition-property: "opacity"; @@ -223,17 +234,17 @@ width: 50px; pointer-events: none; text-align: right; } - /* line 100, ../sass/items/_item.scss */ + /* line 122, ../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 108, ../sass/items/_item.scss */ + /* line 130, ../sass/items/_item.scss */ .items-holder .item.grid-item .details { font-size: 0.8em; } - /* line 111, ../sass/items/_item.scss */ + /* line 133, ../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%; @@ -270,15 +281,15 @@ /* line 160, ../sass/_mixins.scss */ .items-holder .item.grid-item.selected.btn-menu .invoke-menu { color: #52d4ff; } - /* line 116, ../sass/items/_item.scss */ + /* line 138, ../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 117, ../sass/items/_item.scss */ + /* line 139, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected .item-main .item-open { color: #80dfff; } - /* line 118, ../sass/items/_item.scss */ + /* line 140, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected .title { color: white; } - /* line 120, ../sass/items/_item.scss */ + /* line 142, ../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/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 49c5675a07..bc8e713630 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -92,7 +92,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -113,38 +113,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -1256,26 +1256,37 @@ mct-container { .tabular tr td, .tabular tr .td, .tabular .tr td, .tabular .tr .td { border-top: 1px solid rgba(255, 255, 255, 0.1); min-width: 110px; + color: #fff; padding: 2px 5px; vertical-align: top; } - /* line 107, ../sass/lists/_tabular.scss */ + /* line 108, ../sass/lists/_tabular.scss */ .tabular tr td.numeric, .tabular tr .td.numeric, .tabular .tr td.numeric, .tabular .tr .td.numeric { text-align: right; } - /* line 113, ../sass/lists/_tabular.scss */ + /* line 111, ../sass/lists/_tabular.scss */ + .tabular tr td.s-cell-type-value, .tabular tr .td.s-cell-type-value, .tabular .tr td.s-cell-type-value, .tabular .tr .td.s-cell-type-value { + text-align: right; } + /* line 113, ../sass/lists/_tabular.scss */ + .tabular tr td.s-cell-type-value .l-cell-contents, .tabular tr .td.s-cell-type-value .l-cell-contents, .tabular .tr td.s-cell-type-value .l-cell-contents, .tabular .tr .td.s-cell-type-value .l-cell-contents { + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + padding-left: 5px; + padding-right: 5px; } + /* line 122, ../sass/lists/_tabular.scss */ .tabular.filterable tbody, .tabular.filterable .tbody { top: 36px; } - /* line 118, ../sass/lists/_tabular.scss */ + /* line 127, ../sass/lists/_tabular.scss */ .tabular.fixed-header { height: 100%; } - /* line 120, ../sass/lists/_tabular.scss */ + /* line 129, ../sass/lists/_tabular.scss */ .tabular.fixed-header thead, .tabular.fixed-header .thead, .tabular.fixed-header tbody tr, .tabular.fixed-header .tbody .tr { display: table; table-layout: fixed; } - /* line 125, ../sass/lists/_tabular.scss */ + /* line 134, ../sass/lists/_tabular.scss */ .tabular.fixed-header thead, .tabular.fixed-header .thead { width: calc(100% - 10px); } - /* line 128, ../sass/lists/_tabular.scss */ + /* line 137, ../sass/lists/_tabular.scss */ .tabular.fixed-header tbody, .tabular.fixed-header .tbody { overflow: hidden; position: absolute; @@ -1288,7 +1299,7 @@ mct-container { top: 18px; display: block; overflow-y: scroll; } - /* line 136, ../sass/lists/_tabular.scss */ + /* line 145, ../sass/lists/_tabular.scss */ .tabular.t-event-messages td, .tabular.t-event-messages .td { min-width: 150px; } @@ -2495,7 +2506,7 @@ label.checkbox.custom { -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid #737373; - line-height: 1.4rem; + line-height: 1.5rem; padding: 3px 10px 3px 30px; white-space: nowrap; } /* line 45, ../sass/controls/_menus.scss */ diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 75b40aa115..614a74df81 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -122,9 +122,9 @@ ul.tree { -webkit-transition: background-color 0.25s; transition: background-color 0.25s; display: block; - font-size: 0.80em; - height: 1.4rem; - line-height: 1.4rem; + font-size: 0.8em; + height: 1.5rem; + line-height: 1.5rem; margin-bottom: 3px; position: relative; } /* line 38, ../sass/tree/_tree.scss */ @@ -150,17 +150,19 @@ ul.tree { left: 20px; } /* line 55, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .type-icon { - overflow: hidden; + overflow: false; position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; + top: 0; + right: 0; + bottom: 0; + left: 0; width: auto; height: auto; text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; - color: #0099cc; } - /* line 59, ../sass/tree/_tree.scss */ + color: #0099cc; + right: auto; + width: 1em; } + /* line 60, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .type-icon .alert { text-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px; background: #333; @@ -175,7 +177,16 @@ ul.tree { width: auto; position: absolute; z-index: 2; } - /* line 75, ../sass/tree/_tree.scss */ + /* 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; + position: absolute; + font-size: 0.5em; + right: -5px; + bottom: -8px; + z-index: 2; } + /* line 86, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .title-label { overflow: hidden; position: absolute; @@ -186,55 +197,55 @@ ul.tree { width: auto; height: auto; display: block; - left: 20px; + left: 25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 87, ../sass/tree/_tree.scss */ + /* line 98, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading { pointer-events: none; } - /* line 89, ../sass/tree/_tree.scss */ + /* line 100, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading .label { opacity: 0.5; } - /* line 91, ../sass/tree/_tree.scss */ + /* line 102, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading .label .title-label { font-style: italic; } - /* line 95, ../sass/tree/_tree.scss */ + /* line 106, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading .wait-spinner { margin-left: 14px; } - /* line 100, ../sass/tree/_tree.scss */ + /* line 111, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.selected { background: #005177; color: #fff; } - /* line 104, ../sass/tree/_tree.scss */ + /* line 115, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.selected .view-control { color: #0099cc; } - /* line 107, ../sass/tree/_tree.scss */ + /* line 118, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.selected .label .type-icon { color: #fff; } - /* line 113, ../sass/tree/_tree.scss */ + /* line 124, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 116, ../sass/tree/_tree.scss */ + /* line 127, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.selected):hover .context-trigger { display: block; } - /* line 119, ../sass/tree/_tree.scss */ + /* line 130, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.selected):hover .icon { color: #33ccff; } - /* line 125, ../sass/tree/_tree.scss */ + /* line 136, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.loading) { cursor: pointer; } - /* line 129, ../sass/tree/_tree.scss */ + /* line 140, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 135, ../sass/tree/_tree.scss */ + /* line 146, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } - /* line 144, ../sass/tree/_tree.scss */ + /* line 155, ../sass/tree/_tree.scss */ ul.tree ul.tree { margin-left: 15px; } diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 8a8fed19d1..1cb6b20fda 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -42,6 +42,7 @@ $colorKeySelectedBg: #005177; $colorKeyFg: #fff; $colorAlt1: #ffc700; $colorAlert: #ff3c00; +$colorIconLink: #5bf5ef; $colorPausedBg: #c56f01; $colorPausedFg: #fff; $colorCreateBtn: $colorKey; @@ -145,7 +146,7 @@ $controlDisabledOpacity: 0.3; $formLabelW: 20%; $formInputH: 22px; $formRowCtrlsH: 14px; -$menuLineH: 1.4rem; +$menuLineH: 1.5rem; $scrollbarTrackSize: 10px; $scrollbarTrackColorBg: rgba(#000, 0.4); $btnStdH: 25px; diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss index 71be99d43a..c0f40a729a 100644 --- a/platform/commonUI/general/res/sass/_icons.scss +++ b/platform/commonUI/general/res/sass/_icons.scss @@ -85,3 +85,6 @@ //font-size: $menuLineH * 0.95 // Normalizing for new icomoon symbols font } +.l-link-icon { +} + diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss index 5a5cdaf9a3..edfdc619a2 100644 --- a/platform/commonUI/general/res/sass/items/_item.scss +++ b/platform/commonUI/general/res/sass/items/_item.scss @@ -29,6 +29,9 @@ &.grid-item { //div { @include test() } $d: $ueBrowseGridItemLg; + //$iconD: 100px; + $iconMargin: 40px; + $iconD: ($d - ($iconMargin * 2)) * 0.85; $transTime: 200ms; @include btnSubtle($colorItemBase); box-sizing: border-box; @@ -39,12 +42,12 @@ margin-bottom: $interiorMarginSm; margin-right: $interiorMarginSm; position: relative; - .item-main .item-type { - @include trans-prop-nice("color", $transTime); - } &:hover .item-main { .item-type { color: $colorKey !important; + .l-link-icon { + color: $colorIconLink; + } } .item-open { //display: block; @@ -80,10 +83,29 @@ line-height: $lh; z-index: 1; .item-type { + //@include trans-prop-nice("color", $transTime); + @include absPosDefault($iconMargin, false); + //@include test(red); color: $colorItemFg; text-align: center; - font-size: 6em; + font-size: $iconD * 0.95; //6em; + line-height: $iconD; + bottom: auto; + height: $iconD; + top: $iconMargin - 10; //line-height: $lh; + .l-link-icon { + //@include test(blue); + //@include trans-prop-nice("color", $transTime); + color: darken($colorIconLink, 35%); + height: 36px; + line-height: 36px; + position: absolute; + font-size: 32px; + right: -10px; + bottom: -10px; + z-index: 2; + } } .item-open { //@include test(); diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index 356bb8a527..d92c9afebb 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -29,7 +29,7 @@ ul.tree { @include border-radius($basicCr); @include single-transition(background-color, 0.25s); display: block; - font-size: 0.80em; + font-size: 0.8em; height: $menuLineH; line-height: $menuLineH; margin-bottom: $interiorMarginSm; @@ -53,9 +53,10 @@ ul.tree { left: $runningItemW + $interiorMargin; .type-icon { - @include absPosDefault(); + @include absPosDefault(0, false); @include txtShdwSubtle(0.6); color: $colorItemTreeIcon; + right: auto; width: 1em; .alert { @include txtShdwSubtle(0.3); background: $colorBodyBg; @@ -71,11 +72,21 @@ ul.tree { position: absolute; z-index: 2; } + .icon.l-link-icon { + @include txtShdwSubtle(1); + $d: 20px; + color: $colorIconLink; + position: absolute; + font-size: 0.5em; + right: -5px; + bottom: -8px; + z-index: 2; + } } .title-label { @include absPosDefault(); display: block; - left: $runningItemW + ($interiorMargin); + left: $runningItemW + ($interiorMargin * 2); //right: $treeContextTriggerW + $interiorMargin; overflow: hidden; text-overflow: ellipsis; diff --git a/platform/commonUI/general/res/templates/label.html b/platform/commonUI/general/res/templates/label.html index 701e6ff24c..da63abd07a 100644 --- a/platform/commonUI/general/res/templates/label.html +++ b/platform/commonUI/general/res/templates/label.html @@ -22,13 +22,12 @@ {{type.getGlyph()}} - + + + ô + - - - รจ - {{model.name}}