提交 fa8083bb 编写于 作者: M Miguel Solorio

Update icon twisties to work with file icons

上级 1d36a381
......@@ -20,38 +20,22 @@
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
padding-left: 20px;
overflow: hidden;
display: flex;
cursor: pointer;
}
.monaco-panel-view .panel > .panel-header {
background-image: url('tree-collapsed-light.svg');
background-position: 2px center;
background-repeat: no-repeat;
}
.monaco-panel-view .panel > .panel-header.expanded {
background-image: url('tree-expanded-light.svg');
background-position: 2px center;
background-repeat: no-repeat;
}
.vs-dark .monaco-panel-view .panel > .panel-header {
background-image: url('tree-collapsed-dark.svg');
}
.vs-dark .monaco-panel-view .panel > .panel-header.expanded {
background-image: url('tree-expanded-dark.svg');
}
.hc-black .monaco-panel-view .panel > .panel-header {
background-image: url('tree-collapsed-hc.svg');
.monaco-panel-view .panel > .panel-header > .twisties {
width: 20px;
display: flex;
align-items: center;
justify-content: center;
transform-origin: center;
color: inherit;
}
.hc-black .monaco-panel-view .panel > .panel-header.expanded {
background-image: url('tree-expanded-hc.svg');
.monaco-panel-view .panel > .panel-header.expanded > .twisties::before {
transform: rotate(90deg);
}
/* TODO: actions should be part of the panel, but they aren't yet */
......@@ -79,6 +63,7 @@
display: flex;
align-items: center;
justify-content: center;
color: inherit;
}
/* Bold font style does not go well with CJK fonts */
......
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69064L6.33333 3.02397L5.71461 3.64269L10.0719 7.99999Z" fill="#C5C5C5"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69063L6.33333 3.02396L5.71461 3.64268L10.0719 7.99999Z" fill="white"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69063L6.33333 3.02396L5.71461 3.64268L10.0719 7.99999Z" fill="#424242"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.71461L12.9521 6.33333L8.28539 11L7.66667 11L3 6.33333L3.61872 5.71461L7.97603 10.0719Z" fill="#C5C5C5"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.71461L12.9521 6.33333L8.28539 11L7.66667 11L3 6.33333L3.61872 5.71461L7.97603 10.0719Z" fill="white"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.71461L12.9521 6.33333L8.28539 11L7.66667 11L3 6.33333L3.61872 5.71461L7.97603 10.0719Z" fill="#424242"/>
</svg>
......@@ -300,7 +300,7 @@ class TreeRenderer<T, TFilterData, TRef, TTemplateData> implements IListRenderer
renderTemplate(container: HTMLElement): ITreeListTemplateData<TTemplateData> {
const el = append(container, $('.monaco-tl-row'));
const indent = append(el, $('.monaco-tl-indent'));
const twistie = append(el, $('.monaco-tl-twistie.codicon'));
const twistie = append(el, $('.monaco-tl-twistie'));
const contents = append(el, $('.monaco-tl-contents'));
const templateData = this.renderer.renderTemplate(contents);
......@@ -370,8 +370,10 @@ class TreeRenderer<T, TFilterData, TRef, TTemplateData> implements IListRenderer
this.renderer.renderTwistie(node.element, templateData.twistie);
}
toggleClass(templateData.twistie, 'codicon', node.collapsible);
toggleClass(templateData.twistie, 'codicon-chevron-down', node.collapsible);
toggleClass(templateData.twistie, 'codicon-chevron-right', node.collapsible && node.collapsed);
toggleClass(templateData.twistie, 'collapsible', node.collapsible);
toggleClass(templateData.twistie, 'collapsed', node.collapsible && node.collapsed);
if (node.collapsible) {
templateData.container.setAttribute('aria-expanded', String(!node.collapsed));
......
......@@ -56,6 +56,10 @@
overflow: hidden;
}
.monaco-tl-twistie.collapsed::before {
transform: rotate(-90deg);
}
.monaco-tl-twistie.codicon-loading {
animation: codicon-spin 1.25s linear infinite;
}
<?xml version='1.0' standalone='no' ?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
<style>
circle {
animation: ball 0.6s linear infinite;
}
circle:nth-child(2) { animation-delay: 0.075s; }
circle:nth-child(3) { animation-delay: 0.15s; }
circle:nth-child(4) { animation-delay: 0.225s; }
circle:nth-child(5) { animation-delay: 0.3s; }
circle:nth-child(6) { animation-delay: 0.375s; }
circle:nth-child(7) { animation-delay: 0.45s; }
circle:nth-child(8) { animation-delay: 0.525s; }
@keyframes ball {
from { opacity: 1; }
to { opacity: 0.3; }
}
</style>
<g style="fill:grey;">
<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
</g>
</svg>
<?xml version='1.0' standalone='no' ?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
<style>
circle {
animation: ball 0.6s linear infinite;
}
circle:nth-child(2) { animation-delay: 0.075s; }
circle:nth-child(3) { animation-delay: 0.15s; }
circle:nth-child(4) { animation-delay: 0.225s; }
circle:nth-child(5) { animation-delay: 0.3s; }
circle:nth-child(6) { animation-delay: 0.375s; }
circle:nth-child(7) { animation-delay: 0.45s; }
circle:nth-child(8) { animation-delay: 0.525s; }
@keyframes ball {
from { opacity: 1; }
to { opacity: 0.3; }
}
</style>
<g style="fill:white;">
<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
</g>
</svg>
<?xml version='1.0' standalone='no' ?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
<style>
circle {
animation: ball 0.6s linear infinite;
}
circle:nth-child(2) { animation-delay: 0.075s; }
circle:nth-child(3) { animation-delay: 0.15s; }
circle:nth-child(4) { animation-delay: 0.225s; }
circle:nth-child(5) { animation-delay: 0.3s; }
circle:nth-child(6) { animation-delay: 0.375s; }
circle:nth-child(7) { animation-delay: 0.45s; }
circle:nth-child(8) { animation-delay: 0.525s; }
@keyframes ball {
from { opacity: 1; }
to { opacity: 0.3; }
}
</style>
<g>
<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
</g>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69064L6.33333 3.02397L5.71461 3.64269L10.0719 7.99999Z" fill="#C5C5C5"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69063L6.33333 3.02396L5.71461 3.64268L10.0719 7.99999Z" fill="white"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69063L6.33333 3.02396L5.71461 3.64268L10.0719 7.99999Z" fill="#424242"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97602 10.0719L12.3333 5.71461L12.952 6.33333L8.28538 11L7.66666 11L3 6.33333L3.61872 5.71461L7.97602 10.0719Z" fill="#C5C5C5"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97602 10.0719L12.3333 5.71461L12.952 6.33333L8.28538 11L7.66666 11L3 6.33333L3.61872 5.71461L7.97602 10.0719Z" fill="white"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97602 10.0719L12.3333 5.71461L12.952 6.33333L8.28538 11L7.66666 11L3 6.33333L3.61872 5.71461L7.97602 10.0719Z" fill="#424242"/>
</svg>
......@@ -60,53 +60,8 @@
display: none;
}
/* Expansion */
.monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children > .content:before {
content: ' ';
position: absolute;
display: block;
background: url('tree-collapsed-light.svg') 50% 50% no-repeat;
width: 16px;
height: 100%;
top: 0;
left: -16px;
}
.monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.expanded > .content:before {
background-image: url('tree-expanded-light.svg');
}
.monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children.loading > .content:before {
background-image: url('loading.svg');
}
/* Highlighted */
.monaco-tree.highlighted .monaco-tree-rows > .monaco-tree-row:not(.highlighted) {
opacity: 0.3;
}
.vs-dark .monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children > .content:before {
background-image: url('tree-collapsed-dark.svg');
}
.vs-dark .monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.expanded > .content:before {
background-image: url('tree-expanded-dark.svg');
}
.vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children.loading > .content:before {
background-image: url('loading-dark.svg');
}
.hc-black .monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children > .content:before {
background-image: url('tree-collapsed-hc.svg');
}
.hc-black .monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.expanded > .content:before {
background-image: url('tree-expanded-hc.svg');
}
.hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children.loading > .content:before {
background-image: url('loading-hc.svg');
}
......@@ -14,4 +14,7 @@
*/
.monaco-editor .margin-view-overlays .cgmr {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
......@@ -3,7 +3,8 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.monaco-editor .margin-view-overlays .codicon {
.monaco-editor .margin-view-overlays .codicon-chevron-right,
.monaco-editor .margin-view-overlays .codicon-chevron-down {
cursor: pointer;
opacity: 0;
transition: opacity 0.5s;
......
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69064L6.33333 3.02397L5.71461 3.64269L10.0719 7.99999Z" fill="#C5C5C5"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69063L6.33333 3.02396L5.71461 3.64268L10.0719 7.99999Z" fill="white"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69063L6.33333 3.02396L5.71461 3.64268L10.0719 7.99999Z" fill="#424242"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.71461L12.9521 6.33333L8.28539 11L7.66667 11L3 6.33333L3.61872 5.71461L7.97603 10.0719Z" fill="#C5C5C5"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.71461L12.9521 6.33333L8.28539 11L7.66667 11L3 6.33333L3.61872 5.71461L7.97603 10.0719Z" fill="white"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.71461L12.9521 6.33333L8.28539 11L7.66667 11L3 6.33333L3.61872 5.71461L7.97603 10.0719Z" fill="#424242"/>
</svg>
......@@ -20,31 +20,6 @@
content: ' ';
}
.file-icon-themable-tree .monaco-tree-row.has-children.expanded .content::before {
background-image: url("tree-expanded-light.svg");
}
.file-icon-themable-tree .monaco-tree-row.has-children .content::before {
display: inline-block;
background-image: url("tree-collapsed-light.svg");
}
.vs-dark .file-icon-themable-tree .monaco-tree-row.has-children.expanded .content::before {
background-image: url("tree-expanded-dark.svg");
}
.vs-dark .file-icon-themable-tree .monaco-tree-row.has-children .content::before {
background-image: url("tree-collapsed-dark.svg");
}
.hc-black .file-icon-themable-tree .monaco-tree-row.has-children.expanded .content::before {
background-image: url("tree-expanded-hc.svg");
}
.hc-black .file-icon-themable-tree .monaco-tree-row.has-children .content::before {
background-image: url("tree-collapsed-hc.svg");
}
.file-icon-themable-tree.align-icons-and-twisties .monaco-tree-row:not(.has-children) .content::before,
.file-icon-themable-tree.hide-arrows .monaco-tree-row .content::before {
display: none;
......@@ -52,12 +27,13 @@
/* File icons in trees */
.file-icon-themable-tree.align-icons-and-twisties .monaco-tl-twistie:not(.force-twistie):not(.codicon),
.file-icon-themable-tree .align-icon-with-twisty .monaco-tl-twistie:not(.force-twistie):not(.codicon),
.file-icon-themable-tree.align-icons-and-twisties .monaco-tl-twistie:not(.force-twistie):not(.collapsible),
.file-icon-themable-tree .align-icon-with-twisty .monaco-tl-twistie:not(.force-twistie):not(.collapsible),
.file-icon-themable-tree.hide-arrows .monaco-tl-twistie:not(.force-twistie) {
background-image: none !important;
width: 0 !important;
margin-right: 0 !important;
visibility: hidden;
}
/* Misc */
......
......@@ -71,6 +71,7 @@ export abstract class ViewletPanel extends Panel implements IView {
private readonly showActionsAlways: boolean = false;
private headerContainer: HTMLElement;
private titleContainer: HTMLElement;
private twistiesContainer: HTMLElement;
constructor(
options: IViewletPanelOptions,
......@@ -133,6 +134,8 @@ export abstract class ViewletPanel extends Panel implements IView {
protected renderHeader(container: HTMLElement): void {
this.headerContainer = container;
this.renderTwisties(container);
this.renderHeaderTitle(container, this.title);
const actions = append(container, $('.actions'));
......@@ -153,6 +156,10 @@ export abstract class ViewletPanel extends Panel implements IView {
this.updateActionsVisibility();
}
protected renderTwisties(container: HTMLElement): void {
this.twistiesContainer = append(container, $('.twisties.codicon.codicon-chevron-right'));
}
protected renderHeaderTitle(container: HTMLElement, title: string): void {
this.titleContainer = append(container, $('h3.title', undefined, title));
}
......
......@@ -203,25 +203,17 @@
outline: 1px dotted #f38518;
}
.monaco-editor .settings-group-title-widget .title-container .expand-collapse-icon {
background: url("tree-expanded-light.svg") 50% 50% no-repeat;
margin-right: 2px;
.monaco-editor .settings-group-title-widget .title-container .codicon {
margin: 0 2px;
width: 16px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.monaco-editor.vs-dark .settings-group-title-widget .title-container .expand-collapse-icon,
.monaco-editor.hc-black .settings-group-title-widget .title-container .expand-collapse-icon {
background: url("tree-expanded-dark.svg") 50% 50% no-repeat;
}
.monaco-editor .settings-group-title-widget .title-container.collapsed .expand-collapse-icon {
background: url("tree-collapsed-light.svg") 50% 50% no-repeat;
}
.monaco-editor.vs-dark .settings-group-title-widget .title-container.collapsed .expand-collapse-icon,
.monaco-editor.hc-black .settings-group-title-widget .title-container.collapsed .expand-collapse-icon {
background: url("tree-collapsed-dark.svg") 50% 50% no-repeat;
.monaco-editor .settings-group-title-widget .title-container.collapsed .codicon::before {
transform: rotate(-90deg);
}
.monaco-editor .edit-preferences-widget {
......
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 8.00005L5.71461 12.3574L6.33333 12.9761L11 8.30941V7.69069L6.33333 3.02402L5.71461 3.64274L10.0719 8.00005Z" fill="#C5C5C5"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 8.00005L5.71461 12.3574L6.33333 12.9761L11 8.30941V7.69069L6.33333 3.02402L5.71461 3.64274L10.0719 8.00005Z" fill="#424242"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.7146L12.9521 6.33332L8.28539 11L7.66667 11L3 6.33332L3.61872 5.7146L7.97603 10.0719Z" fill="#C5C5C5"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.7146L12.9521 6.33332L8.28539 11L7.66667 11L3 6.33332L3.61872 5.7146L7.97603 10.0719Z" fill="#424242"/>
</svg>
......@@ -168,7 +168,7 @@ export class SettingsGroupTitleWidget extends Widget implements IViewZone {
this._register(focusTracker.onDidFocus(() => this.toggleFocus(true)));
this._register(focusTracker.onDidBlur(() => this.toggleFocus(false)));
this.icon = DOM.append(this.titleContainer, DOM.$('.expand-collapse-icon'));
this.icon = DOM.append(this.titleContainer, DOM.$('.codicon.codicon-chevron-down'));
this.title = DOM.append(this.titleContainer, DOM.$('.title'));
this.title.textContent = this.settingsGroup.title + ` (${this.settingsGroup.sections.reduce((count, section) => count + section.settings.length, 0)})`;
......@@ -737,7 +737,7 @@ export class SearchWidget extends Widget {
export class EditPreferenceWidget<T> extends Disposable {
static readonly GLYPH_MARGIN_CLASS_NAME = 'edit-preferences-widget';
static readonly GLYPH_MARGIN_CLASS_NAME = 'codicon codicon-edit';
private _line: number = -1;
private _preferences: T[] = [];
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册