From 02659b1479f8dc6f549297471b5af4aeda1ed1a7 Mon Sep 17 00:00:00 2001 From: Joao Moreno Date: Wed, 31 Aug 2016 12:17:42 +0200 Subject: [PATCH] use SVG in tree twisties fixes #9170 --- .../parts/tree/browser/collapsed-dark.svg | 1 + .../base/parts/tree/browser/collapsed-hc.svg | 1 + src/vs/base/parts/tree/browser/collapsed.svg | 1 + .../base/parts/tree/browser/expanded-dark.svg | 1 + .../base/parts/tree/browser/expanded-hc.svg | 1 + src/vs/base/parts/tree/browser/expanded.svg | 1 + src/vs/base/parts/tree/browser/loading-hc.svg | 29 ++++ src/vs/base/parts/tree/browser/tree.css | 124 ++++-------------- .../files/browser/media/explorerviewlet.css | 1 + .../git/browser/views/changes/changesView.css | 3 +- 10 files changed, 64 insertions(+), 99 deletions(-) create mode 100755 src/vs/base/parts/tree/browser/collapsed-dark.svg create mode 100644 src/vs/base/parts/tree/browser/collapsed-hc.svg create mode 100755 src/vs/base/parts/tree/browser/collapsed.svg create mode 100755 src/vs/base/parts/tree/browser/expanded-dark.svg create mode 100644 src/vs/base/parts/tree/browser/expanded-hc.svg create mode 100755 src/vs/base/parts/tree/browser/expanded.svg create mode 100644 src/vs/base/parts/tree/browser/loading-hc.svg diff --git a/src/vs/base/parts/tree/browser/collapsed-dark.svg b/src/vs/base/parts/tree/browser/collapsed-dark.svg new file mode 100755 index 00000000000..cf5c3641aa7 --- /dev/null +++ b/src/vs/base/parts/tree/browser/collapsed-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/base/parts/tree/browser/collapsed-hc.svg b/src/vs/base/parts/tree/browser/collapsed-hc.svg new file mode 100644 index 00000000000..145c763338f --- /dev/null +++ b/src/vs/base/parts/tree/browser/collapsed-hc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/base/parts/tree/browser/collapsed.svg b/src/vs/base/parts/tree/browser/collapsed.svg new file mode 100755 index 00000000000..3a63808c358 --- /dev/null +++ b/src/vs/base/parts/tree/browser/collapsed.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/base/parts/tree/browser/expanded-dark.svg b/src/vs/base/parts/tree/browser/expanded-dark.svg new file mode 100755 index 00000000000..73d41e63990 --- /dev/null +++ b/src/vs/base/parts/tree/browser/expanded-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/base/parts/tree/browser/expanded-hc.svg b/src/vs/base/parts/tree/browser/expanded-hc.svg new file mode 100644 index 00000000000..d38d4abc89e --- /dev/null +++ b/src/vs/base/parts/tree/browser/expanded-hc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/base/parts/tree/browser/expanded.svg b/src/vs/base/parts/tree/browser/expanded.svg new file mode 100755 index 00000000000..75f73adbb02 --- /dev/null +++ b/src/vs/base/parts/tree/browser/expanded.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/base/parts/tree/browser/loading-hc.svg b/src/vs/base/parts/tree/browser/loading-hc.svg new file mode 100644 index 00000000000..9d4fa14a907 --- /dev/null +++ b/src/vs/base/parts/tree/browser/loading-hc.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/vs/base/parts/tree/browser/tree.css b/src/vs/base/parts/tree/browser/tree.css index 3f029712b7f..56377a213e5 100644 --- a/src/vs/base/parts/tree/browser/tree.css +++ b/src/vs/base/parts/tree/browser/tree.css @@ -44,11 +44,7 @@ .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content { position: relative; - -moz-transition: opacity 0.15s ease-out; - -webkit-transition: opacity 0.15s ease-out; - -ms-transition: opacity 0.15s ease-out; - -o-transition: opacity 0.15s ease-out; - transition: opacity 0.15s ease-out; + height: 100%; } .monaco-tree-drag-image { @@ -70,76 +66,23 @@ /* Expansion */ -.monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children > .content:before, -.monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children > .content:after { +.monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children > .content:before { + content: ' '; position: absolute; display: block; - content: ""; - width: 0; - height: 0; - border-style: solid; -} - -/* Expansion: collapsed */ - -.monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children > .content:before { - border-width: 4px; - border-left-width: 5px; - top: 8px; - left: -10px; -} - -.monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children > .content:after { - border-width: 2px; - border-left-width: 2px; - top: 10px; - left: -9px; -} - -.monaco-tree.no-row-padding .monaco-tree-rows > .monaco-tree-row.has-children > .content:before { - left: 10px; -} - -.monaco-tree.no-row-padding .monaco-tree-rows > .monaco-tree-row.has-children > .content:after { - left: 11px; -} - -/* Expansion: expanded */ - -.monaco-tree .monaco-tree-rows > .monaco-tree-row.expanded > .content:before { - border-width: 6px 6px 0 5px; - top: 9px; + background: url('collapsed.svg') 50% 50% no-repeat; + width: 16px; + height: 100%; + top: 0; left: -16px; } -.monaco-tree.no-row-padding .monaco-tree-rows > .monaco-tree-row.expanded > .content:before { - left: 4px; +.monaco-tree .monaco-tree-rows > .monaco-tree-row.expanded > .content:before { + background-image: url('expanded.svg'); } -.monaco-tree .monaco-tree-rows > .monaco-tree-row.expanded > .content:after { - border-width: 0; -} - -.monaco-tree .monaco-tree-rows > .monaco-tree-row.selected.expanded > .content:before { - border-left-width: 5px; -} - -.monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.selected.expanded > .content:before { - border-left-width: 5px; -} - -/* Refreshing */ .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children.loading > .content:before { - background: url('loading.svg') 50% 50% no-repeat; - width: 10px; - height: 10px; - border: none; - top: 7px; - left: -12px; -} - -.monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children.loading > .content:after { - background: none; + background-image: url('loading.svg'); } /* Highlighted */ @@ -148,8 +91,8 @@ opacity: 0.3; } - /* Bare row */ + .monaco-tree.bare .monaco-tree-wrapper.drop-target, .monaco-tree.bare .monaco-tree-row { color: inherit !important; @@ -157,6 +100,7 @@ } /* 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; } .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.focused.selected:not(.highlighted) { background-color: #3399FF; color: white; } @@ -165,20 +109,8 @@ .monaco-tree .monaco-tree-wrapper.drop-target, .monaco-tree .monaco-tree-rows > .monaco-tree-row.drop-target { background-color: #DDECFF !important; color: inherit !important; } -.monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children > .content:before { border-color: transparent; border-left-color: #A6A6A6; } -.monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children > .content:after { border-color: transparent; border-left-color: #F6F6F6; } -.monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.selected.has-children > .content:before { border-left-color: white; } -.monaco-tree .monaco-tree-rows > .monaco-tree-row.selected.has-children > .content:before { border-left-color: #646465; } -.monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children:hover:not(.selected):not(.focused) > .content:after { border-left-color: #f0f0f0; } -.monaco-tree .monaco-tree-rows > .monaco-tree-row.selected.has-children > .content:after { border-left-color: #CCCEDB; } -.monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.selected.has-children > .content:after { border-left-color: #3399FF; } - -.monaco-tree .monaco-tree-rows > .monaco-tree-row.expanded > .content:before { border-color: transparent; border-right-color: #646465; } -.monaco-tree .monaco-tree-rows > .monaco-tree-row.expanded > .content:after { border-color: transparent; } -.monaco-tree .monaco-tree-rows > .monaco-tree-row.selected.expanded > .content:before { border-left-color: transparent; } -.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; } @@ -187,17 +119,20 @@ .vs-dark .monaco-tree-wrapper.drop-target, .vs-dark .monaco-tree .monaco-tree-row.drop-target { background-color: #383B3D !important; color: inherit !important; } -/* VS Dark twistie */ -.vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children > .content:before { border-left-color: #D4D4D4; } -.vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children > .content:after { border-left-color: #252526; } -.vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row.expanded > .content:before { border-left-color: transparent; border-right-color: #D4D4D4; } -.vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children:hover:not(.selected):not(.focused) > .content:after { border-left-color: #2A2D2E; } +.vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children > .content:before { + background-image: url('collapsed-dark.svg'); +} + +.vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row.expanded > .content:before { + background-image: url('expanded-dark.svg'); +} .vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children.loading > .content:before { background-image: url('loading-dark.svg'); } /* High Contrast Theming */ + .hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row { background: none !important; border: 1px solid transparent; } .hc-black .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) { border: 1px dotted #f38518; } .hc-black .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { border: 1px solid #f38518; } @@ -207,20 +142,15 @@ .hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row.drop-target { background: none !important; border: 1px dashed #f38518; } .hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children > .content:before { - border: none; - content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTYgNHY4bDQtNC00LTR6bTEgMi40MTRsMS41ODYgMS41ODYtMS41ODYgMS41ODZ2LTMuMTcyeiIvPjwvc3ZnPg=="); - top: 2px; - left: -16px; -} - -.hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children > .content:after { - border: none; + background-image: url('collapsed-hc.svg'); } .hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row.expanded > .content:before { - border: none; - content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExIDEwLjA3aC01LjY1Nmw1LjY1Ni01LjY1NnY1LjY1NnoiLz48L3N2Zz4="); - top: 3px; + background-image: url('expanded-hc.svg'); +} + +.hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children.loading > .content:before { + background-image: url('loading-hc.svg'); } .monaco-tree-action.collapse-all { diff --git a/src/vs/workbench/parts/files/browser/media/explorerviewlet.css b/src/vs/workbench/parts/files/browser/media/explorerviewlet.css index 2be9a958fce..b13e08721ee 100644 --- a/src/vs/workbench/parts/files/browser/media/explorerviewlet.css +++ b/src/vs/workbench/parts/files/browser/media/explorerviewlet.css @@ -11,6 +11,7 @@ .explorer-viewlet .explorer-item, .explorer-viewlet .open-editor, .explorer-viewlet .editor-group { + height: 22px; line-height: 22px; } diff --git a/src/vs/workbench/parts/git/browser/views/changes/changesView.css b/src/vs/workbench/parts/git/browser/views/changes/changesView.css index 4fe3736c87e..bd5892f7cc4 100644 --- a/src/vs/workbench/parts/git/browser/views/changes/changesView.css +++ b/src/vs/workbench/parts/git/browser/views/changes/changesView.css @@ -57,9 +57,8 @@ display: none; } -.git-viewlet > .changes-view > .status-view > .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content:after, .git-viewlet > .changes-view > .status-view > .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content:before { - border: none; + background: none; } .git-viewlet > .changes-view > .status-view > .monaco-tree .monaco-tree-row .status-group {