From 7993e4c03f3e57c4a9ea3527293fea53431ac6d1 Mon Sep 17 00:00:00 2001 From: Shivam Dave Date: Thu, 23 Jul 2015 15:01:14 -0700 Subject: [PATCH] [Mobile] Gestures Removed the hover coloring on the tree menu on mobile by changing original** scss code. Also added check in ContextMenuGesture that will only allow context menu to appear in non-mobile browser. --- platform/commonUI/general/res/css/tree.css | 58 ++++++++++--------- .../commonUI/general/res/sass/tree/_tree.scss | 32 +++++----- 2 files changed, 49 insertions(+), 41 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 1c8523eb62..8b3b6125dd 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -180,10 +180,11 @@ ul.tree { margin-left: 5px; font-size: 0.75em; width: 10px; } - /* line 44, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item .view-control:hover { - color: #ffc700; } - /* line 49, ../sass/tree/_tree.scss */ + @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { + /* line 46, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item .view-control:hover { + color: #ffc700; } } + /* line 52, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label { display: block; overflow: hidden; @@ -195,7 +196,7 @@ ul.tree { width: auto; height: auto; left: 20px; } - /* line 55, ../sass/tree/_tree.scss */ + /* line 58, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .type-icon { overflow: hidden; position: absolute; @@ -207,7 +208,7 @@ ul.tree { height: auto; text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; color: #0099cc; } - /* line 59, ../sass/tree/_tree.scss */ + /* line 62, ../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; @@ -222,7 +223,7 @@ ul.tree { width: auto; position: absolute; z-index: 2; } - /* line 75, ../sass/tree/_tree.scss */ + /* line 78, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .title-label { overflow: hidden; position: absolute; @@ -237,52 +238,53 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 87, ../sass/tree/_tree.scss */ + /* line 90, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading { pointer-events: none; } - /* line 89, ../sass/tree/_tree.scss */ + /* line 92, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading .label { opacity: 0.5; } - /* line 91, ../sass/tree/_tree.scss */ + /* line 94, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading .label .title-label { font-style: italic; } - /* line 95, ../sass/tree/_tree.scss */ + /* line 98, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading .wait-spinner { margin-left: 14px; } - /* line 100, ../sass/tree/_tree.scss */ + /* line 103, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.selected { background: #005177; color: #fff; } - /* line 104, ../sass/tree/_tree.scss */ + /* line 107, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.selected .view-control { color: #0099cc; } - /* line 107, ../sass/tree/_tree.scss */ + /* line 110, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.selected .label .type-icon { color: #fff; } - /* line 113, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item:not(.selected):hover { - background: #404040; - color: #cccccc; } - /* line 116, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item:not(.selected):hover .context-trigger { - display: block; } - /* line 119, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item:not(.selected):hover .icon { - color: #33ccff; } - /* line 125, ../sass/tree/_tree.scss */ + @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { + /* line 118, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item:not(.selected):hover { + background: #404040; + color: #cccccc; } + /* line 121, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item:not(.selected):hover .context-trigger { + display: block; } + /* line 124, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item:not(.selected):hover .icon { + color: #33ccff; } } + /* line 131, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.loading) { cursor: pointer; } - /* line 129, ../sass/tree/_tree.scss */ + /* line 135, ../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 141, ../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 150, ../sass/tree/_tree.scss */ ul.tree ul.tree { margin-left: 15px; } diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index 356bb8a527..4e272960f1 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -41,9 +41,12 @@ ul.tree { font-size: 0.75em; width: $treeVCW; $runningItemW: $interiorMargin + $treeVCW; - &:hover { - color: $colorItemTreeVCHover; - } + // NOTE: [Mobile] Removed Hover on Mobile + @include desktop { + &:hover { + color: $colorItemTreeVCHover; + } + } } .label { @@ -110,16 +113,19 @@ ul.tree { } &:not(.selected) { - &:hover { - background: lighten($colorBodyBg, 5%); - color: lighten($colorBodyFg, 20%); - .context-trigger { - display: block; - } - .icon { - color: $colorItemTreeIconHover; - } - } + // NOTE: [Mobile] Removed Hover on Mobile + @include desktop { + &:hover { + background: lighten($colorBodyBg, 5%); + color: lighten($colorBodyFg, 20%); + .context-trigger { + display: block; + } + .icon { + color: $colorItemTreeIconHover; + } + } + } } &:not(.loading) {