From 02b859d3e2d2ba15ba4c3e50950a02fc4abfa89a Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Wed, 20 Jan 2016 16:49:34 +0100 Subject: [PATCH] same focus indication in tree as elsewhere --- src/vs/base/parts/tree/browser/tree.css | 25 +++++++++++++------ .../electron-browser/media/shell.css | 22 ++++++---------- 2 files changed, 24 insertions(+), 23 deletions(-) diff --git a/src/vs/base/parts/tree/browser/tree.css b/src/vs/base/parts/tree/browser/tree.css index 89451206a89..71ed091b24a 100644 --- a/src/vs/base/parts/tree/browser/tree.css +++ b/src/vs/base/parts/tree/browser/tree.css @@ -28,6 +28,7 @@ .monaco-tree .monaco-tree-rows { position: absolute; width: 100%; + height: 100%; } .monaco-tree .monaco-tree-rows > .monaco-tree-row { @@ -155,11 +156,24 @@ background-color: inherit !important; } -/* Default style */ -.monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) { background-color: #DCEBFC; } -.monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { background-color: #4FA7FF; color: white; } +/* Focus Indication */ +.monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.focused, +.monaco-tree.focused .monaco-tree-rows:empty { + outline: 2px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +/* Pre 0.10.7 styles we used for focus indication */ +/*.monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) { background-color: #DCEBFC; } .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.focused.selected:not(.highlighted) { background-color: #3399FF; color: white; } .monaco-tree .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) { background-color: #eaeaea; } +.vs-dark .monaco-tree.focused .monaco-tree-row.focused:not(.highlighted) { background-color: #073655; } +.vs-dark .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.focused.selected:not(.highlighted) { background-color: #094771; color: white; } +.vs-dark .monaco-tree .monaco-tree-row.focused:not(.highlighted) { background-color: #2f3334; } +.hc-black .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) { border: 1px dotted #DF740C; } +.hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) { border: 1px dotted #DF740C; }*/ + +/* Default style */ +.monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { background-color: #4FA7FF; color: white; } .monaco-tree .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { background-color: #CCCEDB; } .monaco-tree .monaco-tree-rows > .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused) { background-color: #F0F0F0; } .monaco-tree .monaco-tree-wrapper.drop-target, @@ -179,10 +193,7 @@ .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.selected.expanded > .content:before { border-right-color: white; border-left-color: transparent; } /* VS Dark */ -.vs-dark .monaco-tree.focused .monaco-tree-row.focused:not(.highlighted) { background-color: #073655; } .vs-dark .monaco-tree.focused .monaco-tree-row.selected:not(.highlighted) { background-color: #0E639C; color: white; } -.vs-dark .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.focused.selected:not(.highlighted) { background-color: #094771; color: white; } -.vs-dark .monaco-tree .monaco-tree-row.focused:not(.highlighted) { background-color: #2f3334; } .vs-dark .monaco-tree .monaco-tree-row.selected:not(.highlighted) { background-color: #3F3F46; } .vs-dark .monaco-tree .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused) { background-color: #2A2D2E; } .vs-dark .monaco-tree-wrapper.drop-target, @@ -200,9 +211,7 @@ /* High Contrast Theming */ .hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row { background: none !important; } -.hc-black .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) { border: 1px dotted #DF740C; } .hc-black .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { border: 1px solid #DF740C; } -.hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) { border: 1px dotted #DF740C; } .hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { border: 1px solid #DF740C; } .hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused) { border: 1px dashed #DF740C; } .hc-black .monaco-tree .monaco-tree-wrapper.drop-target, diff --git a/src/vs/workbench/electron-browser/media/shell.css b/src/vs/workbench/electron-browser/media/shell.css index bd1f9316444..1bb7eaa8ddf 100644 --- a/src/vs/workbench/electron-browser/media/shell.css +++ b/src/vs/workbench/electron-browser/media/shell.css @@ -47,33 +47,25 @@ text-decoration: none; } -.monaco-shell a[tabindex="0"]:focus, -.monaco-shell div[tabindex="0"]:focus, +.monaco-shell [tabindex="0"]:focus, .monaco-shell select:focus, .monaco-shell input[type="button"]:focus, .monaco-shell input[type="submit"]:focus, -.monaco-shell input[type="checkbox"]:focus, -.monaco-shell iframe[tabindex="0"]:focus { +.monaco-shell input[type="checkbox"]:focus { outline: 2px auto -webkit-focus-ring-color; outline-offset: -2px; opacity: 1 !important; /* prevent components from dimming focus feedback */ } -/*.monaco-shell a[tabindex="0"]:active, .monaco-shell a[tabindex="0"]:hover, -.monaco-shell div[tabindex="0"]:active, .monaco-shell div[tabindex="0"]:hover, -.monaco-shell select:active, .monaco-shell select:hover, -.monaco-shell input[type="button"]:active, .monaco-shell input[type="button"]:hover, -.monaco-shell input[type="checkbox"]:active, .monaco-shell input[type="checkbox"]:hover, -.monaco-shell input[type="submit"]:active, .monaco-shell input[type="submit"]:hover, -.monaco-shell iframe[tabindex="0"]:active, .monaco-shell iframe[tabindex="0"]:hover { - outline: 0; - opacity: inherit; -}*/ - .monaco-shell input[type="text"], .monaco-shell textarea { outline: 0; /* do not show outline in input fields and textarea */ } +.monaco-shell .monaco-tree:focus { + outline: 0; /* tree indicates focus not via outline but through the focussed item */ +} + + .monaco-shell a.prominent { text-decoration: underline; } -- GitLab