Skip to content

V
vscode

xxadev / vscode
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vscode

体验新版 GitCode，发现更多精彩内容 >>

提交 2b59b800 编写于 作者: R Rob Lourens
浏览文件
操作

Settings editor - move TOC back under header

上级 40fb74cf
显示空白变更内容
内联 并排
Showing with 81 addition and 95 deletion
src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
浏览文件 @ 2b59b800
...@@ -5,45 +5,40 @@ ...@@ -5,45 +5,40 @@
.settings-editor { .settings-editor {
padding-top: 11px; padding-top: 11px;
display: flex;
margin: auto;
max-width: 1000px; max-width: 1000px;
} margin: auto;
.settings-editor > .settings-editor-right {
flex: 1;
} }
/* header styling */ /* header styling */
.settings-editor > .settings-editor-right > .settings-header { .settings-editor > .settings-header {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
max-width: 1000px;
box-sizing: border-box; box-sizing: border-box;
margin: auto;
} }
.settings-editor > .settings-editor-right > .settings-header > .settings-preview-header { .settings-editor > .settings-header > .settings-preview-header {
margin-bottom: 5px; margin-bottom: 5px;
} }
.settings-editor > .settings-editor-right > .settings-header > .settings-preview-header .settings-preview-label { .settings-editor > .settings-header > .settings-preview-header .settings-preview-label {
opacity: .7; opacity: .7;
} }
.settings-editor > .settings-editor-right > .settings-header > .settings-advanced-customization .open-settings-button, .settings-editor > .settings-header > .settings-advanced-customization .open-settings-button,
.settings-editor > .settings-editor-right > .settings-header > .settings-advanced-customization .open-settings-button:hover, .settings-editor > .settings-header > .settings-advanced-customization .open-settings-button:hover,
.settings-editor > .settings-editor-right > .settings-header > .settings-advanced-customization .open-settings-button:active { .settings-editor > .settings-header > .settings-advanced-customization .open-settings-button:active {
padding: 0; padding: 0;
text-decoration: underline; text-decoration: underline;
display: inline; display: inline;
} }
.settings-editor > .settings-editor-right > .settings-header > .settings-advanced-customization { .settings-editor > .settings-header > .settings-advanced-customization {
opacity: .7; opacity: .7;
margin-top: 10px; margin-top: 10px;
} }
.settings-editor > .settings-editor-right > .settings-header > .settings-preview-header > .settings-preview-warning { .settings-editor > .settings-header > .settings-preview-header > .settings-preview-warning {
text-align: right; text-align: right;
text-transform: uppercase; text-transform: uppercase;
background: rgba(136, 136, 136, 0.3); background: rgba(136, 136, 136, 0.3);
...@@ -53,140 +48,133 @@ ...@@ -53,140 +48,133 @@
margin-right: 7px; margin-right: 7px;
} }
.settings-editor > .settings-editor-right > .settings-header > .search-container { .settings-editor > .settings-header > .search-container {
position: relative; position: relative;
} }
.settings-editor > .settings-editor-right > .settings-header .search-container > .settings-search-input { .settings-editor > .settings-header .search-container > .settings-search-input {
vertical-align: middle; vertical-align: middle;
} }
.settings-editor > .settings-editor-right > .settings-header .search-container > .settings-search-input > .monaco-inputbox { .settings-editor > .settings-header .search-container > .settings-search-input > .monaco-inputbox {
height: 30px; height: 30px;
width: 100%; width: 100%;
} }
.settings-editor > .settings-editor-right > .settings-header .search-container > .settings-search-input > .monaco-inputbox .input { .settings-editor > .settings-header .search-container > .settings-search-input > .monaco-inputbox .input {
font-size: 14px; font-size: 14px;
padding-left: 10px; padding-left: 10px;
} }
.settings-editor > .settings-editor-right > .settings-header > .settings-header-controls { .settings-editor > .settings-header > .settings-header-controls {
margin-top: 2px; margin-top: 2px;
height: 30px; height: 30px;
display: flex; display: flex;
} }
.settings-editor > .settings-editor-right > .settings-header .settings-tabs-widget > .monaco-action-bar .action-item:not(:first-child) .action-label { .settings-editor > .settings-header .settings-tabs-widget > .monaco-action-bar .action-item:not(:first-child) .action-label {
margin-left: 14px; margin-left: 14px;
} }
.settings-editor > .settings-editor-right > .settings-header .settings-tabs-widget .monaco-action-bar .action-item .dropdown-icon { .settings-editor > .settings-header .settings-tabs-widget .monaco-action-bar .action-item .dropdown-icon {
/** The tab widget container height is shorter than elsewhere, need to tweak this */ /** The tab widget container height is shorter than elsewhere, need to tweak this */
padding-top: 3px; padding-top: 3px;
} }
.settings-editor > .settings-editor-right > .settings-header > .settings-header-controls .settings-header-controls-right { .settings-editor > .settings-header > .settings-header-controls .settings-header-controls-right {
margin-left: auto; margin-left: auto;
padding-top: 3px; padding-top: 3px;
display: flex; display: flex;
} }
.settings-editor > .settings-editor-right > .settings-header > .settings-header-controls .settings-header-controls-right #configured-only-checkbox { .settings-editor > .settings-header > .settings-header-controls .settings-header-controls-right #configured-only-checkbox {
flex-shrink: 0; flex-shrink: 0;
} }
.settings-editor > .settings-editor-right > .settings-header > .settings-header-controls .settings-header-controls-right .configured-only-label { .settings-editor > .settings-header > .settings-header-controls .settings-header-controls-right .configured-only-label {
white-space: nowrap; white-space: nowrap;
margin-right: 10px; margin-right: 10px;
margin-left: 2px; margin-left: 2px;
opacity: 0.7; opacity: 0.7;
} }
.settings-editor > .settings-editor-right > .settings-body { .settings-editor > .settings-body {
display: flex; display: flex;
margin: auto;
margin-top: 5px;
max-width: 1000px; max-width: 1000px;
} }
.settings-editor > .settings-editor-right > .settings-body .settings-tree-container .monaco-tree-wrapper { .settings-editor > .settings-body .settings-tree-container .monaco-tree::before {
max-width: 800px;
}
.settings-editor > .settings-editor-right > .settings-body .settings-tree-container .monaco-scrollable-element .shadow.top-left-corner {
left: calc((100% - 800px)/2);
}
.settings-editor > .settings-editor-right > .settings-body .settings-tree-container .monaco-scrollable-element .shadow {
left: calc((100% - 794px)/2);
width: 800px;
}
.settings-editor > .settings-editor-right > .settings-body .settings-tree-container .monaco-tree::before {
outline: none !important; outline: none !important;
} }
.settings-editor > .settings-toc-container { .settings-editor > .settings-body .settings-toc-container {
width: 175px; width: 200px;
margin-top: 114px;
margin-right: 5px; margin-right: 5px;
} }
.settings-editor.search-mode > .settings-toc-container .monaco-tree { .search-mode .settings-toc-container .monaco-tree {
display: none; display: none;
} }
.settings-editor > .settings-toc-container .monaco-tree-row .settings-toc-entry { .settings-editor > .settings-body .settings-toc-container .monaco-tree-row .settings-toc-entry {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 22px; line-height: 22px;
} }
.settings-editor > .settings-editor-right > .settings-body .settings-tree-container { .settings-editor > .settings-body .settings-tree-container {
flex: 1; flex: 1;
border-spacing: 0; border-spacing: 0;
border-collapse: separate; border-collapse: separate;
position: relative; position: relative;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item { .settings-editor > .settings-body > .settings-tree-container .setting-item {
padding-top: 4px; padding-top: 5px;
padding-left: 5px;
cursor: default; cursor: default;
white-space: normal; white-space: normal;
height: 100%; height: 100%;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item.odd:not(.focused):not(.selected):not(:hover), .settings-editor > .settings-body > .settings-tree-container .setting-item.odd:not(.focused):not(.selected):not(:hover),
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .monaco-tree:not(:focus) .setting-item.focused.odd:not(.selected):not(:hover), .settings-editor > .settings-body > .settings-tree-container .monaco-tree:not(:focus) .setting-item.focused.odd:not(.selected):not(:hover),
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .monaco-tree:not(.focused) .setting-item.focused.odd:not(.selected):not(:hover) { .settings-editor > .settings-body > .settings-tree-container .monaco-tree:not(.focused) .setting-item.focused.odd:not(.selected):not(:hover) {
background-color: rgba(130, 130, 130, 0.04); background-color: rgba(130, 130, 130, 0.04);
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-is-configured-label { .settings-editor > .settings-body > .settings-tree-container .setting-item > .setting-item-left {
flex: 1;
padding-top: 3px;
padding-bottom: 12px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-is-configured-label {
font-style: italic; font-style: italic;
opacity: 0.8; opacity: 0.8;
margin-right: 7px; margin-right: 7px;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-overrides { .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-overrides {
opacity: 0.5; opacity: 0.5;
font-style: italic; font-style: italic;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-label { .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-label {
margin-right: 7px; margin-right: 7px;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-label, .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-label,
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-category { .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-category {
font-weight: bold; font-weight: bold;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-category { .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-category {
opacity: 0.7; opacity: 0.7;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-description { .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description {
opacity: 0.7; opacity: 0.7;
margin-top: 3px; margin-top: 3px;
overflow: hidden; overflow: hidden;
...@@ -195,59 +183,53 @@ ...@@ -195,59 +183,53 @@
height: 18px; height: 18px;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-measure-container.monaco-tree-row { .settings-editor > .settings-body > .settings-tree-container .setting-item.is-expanded .setting-item-description,
padding-left: 15px; .settings-editor > .settings-body > .settings-tree-container .setting-item.setting-measure-helper .setting-item-description {
opacity: 0;
max-width: 800px;
}
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item.is-expanded .setting-item-description,
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item.setting-measure-helper .setting-item-description {
height: initial; height: initial;
white-space: pre-wrap; white-space: pre-wrap;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value { .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value {
margin-top: 5px; margin-top: 5px;
margin-bottom: 7px; /* Needed when measuring an expanded row */ margin-bottom: 7px; /* Needed when measuring an expanded row */
display: flex; display: flex;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-number { .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-number {
min-width: 200px; min-width: 200px;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-enum, .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-enum,
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-string { .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-string {
flex: 1; flex: 1;
min-width: initial; min-width: initial;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-enum > *:first-child { .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-enum > *:first-child {
width: 100%; width: 100%;
min-width: 250px; min-width: 250px;
display: inline-block; display: inline-block;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control > .edit-in-settings-button, .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button,
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control > .edit-in-settings-button:hover, .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button:hover,
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control > .edit-in-settings-button:active { .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button:active {
margin: auto; margin: auto;
text-align: left; text-align: left;
text-decoration: underline; text-decoration: underline;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control > .edit-in-settings-button + .setting-reset-button.monaco-button { .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button + .setting-reset-button.monaco-button {
display: none; display: none;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .monaco-select-box { .settings-editor > .settings-body > .settings-tree-container .setting-item .monaco-select-box {
width: initial; width: initial;
font: inherit; font: inherit;
height: 26px; height: 26px;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-reset-button.monaco-button { .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-reset-button.monaco-button {
text-align: left; text-align: left;
display: inline-block; display: inline-block;
visibility: hidden; visibility: hidden;
...@@ -256,39 +238,43 @@ ...@@ -256,39 +238,43 @@
padding-top: 2px; padding-top: 2px;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-value > .setting-reset-button.monaco-button { .settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-value > .setting-reset-button.monaco-button {
visibility: visible; visibility: visible;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .all-settings { .settings-editor > .settings-body > .settings-tree-container .all-settings {
display: flex; display: flex;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .all-settings .all-settings-button { .settings-editor > .settings-body > .settings-tree-container .all-settings .all-settings-button {
margin: auto; margin: auto;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .all-settings .all-settings-button .monaco-button { .settings-editor > .settings-body > .settings-tree-container .all-settings .all-settings-button .monaco-button {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .settings-group-title-label { .settings-editor > .settings-body > .settings-tree-container .settings-group-title,
.settings-editor > .settings-body > .settings-tree-container .setting-item {
padding-left: 5px;
}
.settings-editor > .settings-body > .settings-tree-container .settings-group-title-label {
margin: 0px; margin: 0px;
padding-left: 5px !important;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .settings-group-level-1 { .settings-editor > .settings-body > .settings-tree-container .settings-group-level-1 {
padding-top: 16px; padding-top: 16px;
font-size: 24px; font-size: 24px;
} }
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .settings-group-level-2 { .settings-editor > .settings-body > .settings-tree-container .settings-group-level-2 {
padding-top: 16px; padding-top: 16px;
font-size: 20px; font-size: 20px;
} }
.settings-editor > .settings-editor-right > .settings-body .settings-feedback-button { .settings-editor > .settings-body .settings-feedback-button {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
background-color: rgb(14, 99, 156); background-color: rgb(14, 99, 156);
position: absolute; position: absolute;
......
src/vs/workbench/parts/preferences/browser/settingsEditor2.ts
浏览文件 @ 2b59b800
...@@ -102,11 +102,9 @@ export class SettingsEditor2 extends BaseEditor { ...@@ -102,11 +102,9 @@ export class SettingsEditor2 extends BaseEditor {
createEditor(parent: HTMLElement): void { createEditor(parent: HTMLElement): void {
this.rootElement = DOM.append(parent, $('.settings-editor')); this.rootElement = DOM.append(parent, $('.settings-editor'));
this.createTOC(this.rootElement);
const settingsEditorRightElement = DOM.append(this.rootElement, $('.settings-editor-right')); this.createHeader(this.rootElement);
this.createHeader(settingsEditorRightElement); this.createBody(this.rootElement);
this.createBody(settingsEditorRightElement);
} }
setInput(input: SettingsEditor2Input, options: EditorOptions, token: CancellationToken): Thenable<void> { setInput(input: SettingsEditor2Input, options: EditorOptions, token: CancellationToken): Thenable<void> {
...@@ -217,6 +215,7 @@ export class SettingsEditor2 extends BaseEditor { ...@@ -217,6 +215,7 @@ export class SettingsEditor2 extends BaseEditor {
private createBody(parent: HTMLElement): void { private createBody(parent: HTMLElement): void {
const bodyContainer = DOM.append(parent, $('.settings-body')); const bodyContainer = DOM.append(parent, $('.settings-body'));
this.createTOC(bodyContainer);
this.createSettingsTree(bodyContainer); this.createSettingsTree(bodyContainer);
if (this.environmentService.appQuality !== 'stable') { if (this.environmentService.appQuality !== 'stable') {
...@@ -237,7 +236,8 @@ export class SettingsEditor2 extends BaseEditor { ...@@ -237,7 +236,8 @@ export class SettingsEditor2 extends BaseEditor {
filter: this.instantiationService.createInstance(SettingsTreeFilter, this.viewState) filter: this.instantiationService.createInstance(SettingsTreeFilter, this.viewState)
}, },
{ {
showLoading: false showLoading: false,
twistiePixels: 15
}); });
this._register(this.tocTree.onDidChangeSelection(e => { this._register(this.tocTree.onDidChangeSelection(e => {
...@@ -291,12 +291,12 @@ export class SettingsEditor2 extends BaseEditor { ...@@ -291,12 +291,12 @@ export class SettingsEditor2 extends BaseEditor {
this._register(registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { this._register(registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
const activeBorderColor = theme.getColor(listActiveSelectionBackground); const activeBorderColor = theme.getColor(listActiveSelectionBackground);
if (activeBorderColor) { if (activeBorderColor) {
collector.addRule(`.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .monaco-tree:focus .monaco-tree-row.focused {outline: solid 1px ${activeBorderColor}; outline-offset: -1px; }`); collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree:focus .monaco-tree-row.focused {outline: solid 1px ${activeBorderColor}; outline-offset: -1px; }`);
} }
const inactiveBorderColor = theme.getColor(listInactiveSelectionBackground); const inactiveBorderColor = theme.getColor(listInactiveSelectionBackground);
if (inactiveBorderColor) { if (inactiveBorderColor) {
collector.addRule(`.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .monaco-tree .monaco-tree-row.focused {outline: solid 1px ${inactiveBorderColor}; outline-offset: -1px; }`); collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree .monaco-tree-row.focused {outline: solid 1px ${inactiveBorderColor}; outline-offset: -1px; }`);
} }
})); }));
......
src/vs/workbench/parts/preferences/browser/settingsTree.ts
浏览文件 @ 2b59b800
...@@ -41,7 +41,7 @@ export const modifiedItemForeground = registerColor('settings.modifiedItemForegr ...@@ -41,7 +41,7 @@ export const modifiedItemForeground = registerColor('settings.modifiedItemForegr
registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
const modifiedItemForegroundColor = theme.getColor(modifiedItemForeground); const modifiedItemForegroundColor = theme.getColor(modifiedItemForeground);
if (modifiedItemForegroundColor) { if (modifiedItemForegroundColor) {
collector.addRule(`.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-is-configured-label { color: ${modifiedItemForegroundColor}; }`); collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-is-configured-label { color: ${modifiedItemForegroundColor}; }`);
} }
}); });
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或