development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-10-13 14:57:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

use SVG in tree twisties

Browse source 
fixes #9170
This commit is contained in:
Joao Moreno 2016-08-31 12:17:42 +02:00
parent 02436846cb
commit 02659b1479
10 changed files with 64 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/vs/base/parts/tree/browser/collapsed-dark.svg Executable file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#E8E8E8" d="M6 4v8l4-4-4-4zm1 2.414L8.586 8 7 9.586V6.414z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 139 B

1
src/vs/base/parts/tree/browser/collapsed-hc.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#fff" d="M6 4v8l4-4-4-4zm1 2.414l1.586 1.586-1.586 1.586v-3.172z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 148 B

1
src/vs/base/parts/tree/browser/collapsed.svg Executable file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#646465" d="M6 4v8l4-4-4-4zm1 2.414L8.586 8 7 9.586V6.414z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 139 B

1
src/vs/base/parts/tree/browser/expanded-dark.svg Executable file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#E8E8E8" d="M11 10H5.344L11 4.414V10z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 118 B

1
src/vs/base/parts/tree/browser/expanded-hc.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#fff" d="M11 10.07h-5.656l5.656-5.656v5.656z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 128 B

1
src/vs/base/parts/tree/browser/expanded.svg Executable file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#646465" d="M11 10H5.344L11 4.414V10z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 118 B

29
src/vs/base/parts/tree/browser/loading-hc.svg Normal file
View file

@ -0,0 +1,29 @@
<?xml version='1.0' standalone='no' ?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
<g style="fill:#fff;">
<circle cx='5' cy='1' r='1' style='opacity:0.3;'>
<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0s' />
</circle>
<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;'>
<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.075s' />
</circle>
<circle cx='9' cy='5' r='1' style='opacity:0.3;'>
<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.15s' />
</circle>
<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;'>
<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.225s' />
</circle>
<circle cx='5' cy='9' r='1' style='opacity:0.3;'>
<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.3s' />
</circle>
<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;'>
<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.375s' />
</circle>
<circle cx='1' cy='5' r='1' style='opacity:0.3;'>
<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.45s' />
</circle>
<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;'>
<animate attributeType='CSS' attributeName='opacity' from='1' to='0.3' dur='0.6s' repeatCount='indefinite' begin='0.525s' />
</circle>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

124
src/vs/base/parts/tree/browser/tree.css
View file

@ -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 {

1
src/vs/workbench/parts/files/browser/media/explorerviewlet.css
View file

@ -11,6 +11,7 @@
.explorer-viewlet .explorer-item,
.explorer-viewlet .open-editor,
.explorer-viewlet .editor-group {
height: 22px;
line-height: 22px;
}

3
src/vs/workbench/parts/git/browser/views/changes/changesView.css
View file

@ -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 {