Skip to content

V
vscode

xxadev / vscode
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vscode

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

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

Settings editor - move TOC out to the left

上级 ea97a591
隐藏空白更改
内联 并排
Showing with 93 addition and 73 deletion
src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
浏览文件 @ 44c8c2d3
......@@ -5,40 +5,45 @@
.settings-editor {
padding-top: 11px;
display: flex;
margin: auto;
max-width: 1000px;
}
.settings-editor > .settings-editor-right {
flex: 1;
}
/* header styling */
.settings-editor > .settings-header {
.settings-editor > .settings-editor-right > .settings-header {
padding-left: 15px;
padding-right: 5px;
max-width: 1000px;
box-sizing: border-box;
margin: auto;
}
.settings-editor > .settings-header > .settings-preview-header {
.settings-editor > .settings-editor-right > .settings-header > .settings-preview-header {
margin-bottom: 5px;
}
.settings-editor > .settings-header > .settings-preview-header .settings-preview-label {
.settings-editor > .settings-editor-right > .settings-header > .settings-preview-header .settings-preview-label {
opacity: .7;
}
.settings-editor > .settings-header > .settings-advanced-customization .open-settings-button,
.settings-editor > .settings-header > .settings-advanced-customization .open-settings-button:hover,
.settings-editor > .settings-header > .settings-advanced-customization .open-settings-button:active {
.settings-editor > .settings-editor-right > .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-editor-right > .settings-header > .settings-advanced-customization .open-settings-button:active {
padding: 0;
text-decoration: underline;
display: inline;
}
.settings-editor > .settings-header > .settings-advanced-customization {
.settings-editor > .settings-editor-right > .settings-header > .settings-advanced-customization {
opacity: .7;
margin-top: 10px;
}
.settings-editor > .settings-header > .settings-preview-header > .settings-preview-warning {
.settings-editor > .settings-editor-right > .settings-header > .settings-preview-header > .settings-preview-warning {
text-align: right;
text-transform: uppercase;
background: rgba(136, 136, 136, 0.3);
......@@ -48,159 +53,159 @@
margin-right: 7px;
}
.settings-editor > .settings-header > .search-container {
.settings-editor > .settings-editor-right > .settings-header > .search-container {
position: relative;
}
.settings-editor > .settings-header .search-container > .settings-search-input {
.settings-editor > .settings-editor-right > .settings-header .search-container > .settings-search-input {
vertical-align: middle;
}
.settings-editor > .settings-header .search-container > .settings-search-input > .monaco-inputbox {
.settings-editor > .settings-editor-right > .settings-header .search-container > .settings-search-input > .monaco-inputbox {
height: 30px;
width: 100%;
}
.settings-editor > .settings-header .search-container > .settings-search-input > .monaco-inputbox .input {
.settings-editor > .settings-editor-right > .settings-header .search-container > .settings-search-input > .monaco-inputbox .input {
font-size: 14px;
padding-left: 10px;
}
.settings-editor > .settings-header > .settings-header-controls {
.settings-editor > .settings-editor-right > .settings-header > .settings-header-controls {
margin-top: 2px;
height: 30px;
display: flex;
}
.settings-editor > .settings-header .settings-tabs-widget > .monaco-action-bar .action-item:not(:first-child) .action-label {
.settings-editor > .settings-editor-right > .settings-header .settings-tabs-widget > .monaco-action-bar .action-item:not(:first-child) .action-label {
margin-left: 14px;
}
.settings-editor > .settings-header .settings-tabs-widget .monaco-action-bar .action-item .dropdown-icon {
.settings-editor > .settings-editor-right > .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 */
padding-top: 3px;
}
.settings-editor > .settings-header > .settings-header-controls .settings-header-controls-right {
.settings-editor > .settings-editor-right > .settings-header > .settings-header-controls .settings-header-controls-right {
margin-left: auto;
padding-top: 3px;
display: flex;
}
.settings-editor > .settings-header > .settings-header-controls .settings-header-controls-right #configured-only-checkbox {
.settings-editor > .settings-editor-right > .settings-header > .settings-header-controls .settings-header-controls-right #configured-only-checkbox {
flex-shrink: 0;
}
.settings-editor > .settings-header > .settings-header-controls .settings-header-controls-right .configured-only-label {
.settings-editor > .settings-editor-right > .settings-header > .settings-header-controls .settings-header-controls-right .configured-only-label {
white-space: nowrap;
margin-right: 10px;
margin-left: 2px;
opacity: 0.7;
}
.settings-editor > .settings-body {
.settings-editor > .settings-editor-right > .settings-body {
display: flex;
margin: auto;
max-width: 1000px;
}
.settings-editor > .settings-body .settings-tree-container .monaco-tree-wrapper {
.settings-editor > .settings-editor-right > .settings-body .settings-tree-container .monaco-tree-wrapper {
max-width: 800px;
margin: auto;
}
.settings-editor > .settings-body .settings-tree-container .monaco-scrollable-element .shadow.top-left-corner {
.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-body .settings-tree-container .monaco-scrollable-element .shadow {
.settings-editor > .settings-editor-right > .settings-body .settings-tree-container .monaco-scrollable-element .shadow {
left: calc((100% - 794px)/2);
width: 800px;
}
.settings-editor > .settings-body .settings-tree-container .monaco-tree::before {
.settings-editor > .settings-editor-right > .settings-body .settings-tree-container .monaco-tree::before {
outline: none !important;
}
.settings-editor > .settings-body .settings-toc-container {
.settings-editor > .settings-toc-container {
width: 200px;
margin-top: 114px;
}
.search-mode .settings-toc-container .monaco-tree {
.settings-editor.search-mode > .settings-toc-container .monaco-tree {
display: none;
}
.settings-editor > .settings-body .settings-toc-container .monaco-tree-row .settings-toc-entry {
.settings-editor > .settings-toc-container .monaco-tree-row .settings-toc-entry {
overflow: hidden;
text-overflow: ellipsis;
}
.settings-editor > .settings-body .settings-tree-container {
.settings-editor > .settings-editor-right > .settings-body .settings-tree-container {
flex: 1;
border-spacing: 0;
border-collapse: separate;
position: relative;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item {
padding-top: 5px;
cursor: default;
white-space: normal;
height: 100%;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.odd:not(.focused):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-body > .settings-tree-container .monaco-tree:not(.focused) .setting-item.focused.odd:not(.selected):not(:hover) {
.settings-editor > .settings-editor-right > .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-editor-right > .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);
}
.settings-editor > .settings-body > .settings-tree-container .setting-item > .setting-item-left {
.settings-editor > .settings-editor-right > .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-right {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item > .setting-item-right {
min-width: 180px;
margin: 21px 10px 0px 5px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title {
/* .settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-title {
margin-top: 2px;
line-height: initial;
}
} */
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-is-configured-label {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-is-configured-label {
font-style: italic;
opacity: 0.8;
margin-right: 7px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-overrides {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-overrides {
opacity: 0.5;
font-style: italic;
}
.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-label {
margin-right: 7px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-label,
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-category {
.settings-editor > .settings-editor-right > .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 {
font-weight: bold;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-category {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-category {
opacity: 0.7;
}
.settings-editor > .settings-body > .settings-tree-container .setting-measure-container.monaco-tree-row {
/* .settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-measure-container.monaco-tree-row {
padding-left: 15px;
opacity: 0;
max-width: 800px;
}
} */
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-description {
opacity: 0.7;
margin-top: 3px;
overflow: hidden;
......@@ -209,51 +214,65 @@
height: 18px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.is-expanded .setting-item-description,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-measure-helper .setting-item-description {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-measure-container.monaco-tree-row {
padding-left: 15px;
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;
white-space: pre-wrap;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value {
margin-top: 5px;
margin-bottom: 9px; /* Needed when measuring an expanded row */
display: flex;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-number {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-number {
min-width: 200px;
}
.settings-editor > .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-string {
.settings-editor > .settings-editor-right > .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 {
flex: 1;
min-width: initial;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-enum > *:first-child {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-enum > *:first-child {
width: 100%;
min-width: 250px;
display: inline-block;
}
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value {
margin-top: 7px;
margin-bottom: 8px;
display: inline-block;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button,
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button:hover,
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button:active {
.settings-editor > .settings-editor-right > .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 > .edit-in-settings-button:hover,
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button:active {
margin: auto;
text-align: left;
text-decoration: underline;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button + .setting-reset-button.monaco-button {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button + .setting-reset-button.monaco-button {
display: none;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .monaco-select-box {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .monaco-select-box {
width: initial;
font: inherit;
height: 26px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-reset-button.monaco-button {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-reset-button.monaco-button {
text-align: left;
display: inline-block;
visibility: hidden;
......@@ -262,19 +281,19 @@
padding-top: 2px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-value > .setting-reset-button.monaco-button {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-value > .setting-reset-button.monaco-button {
visibility: visible;
}
.settings-editor > .settings-body > .settings-tree-container .all-settings {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .all-settings {
display: flex;
}
.settings-editor > .settings-body > .settings-tree-container .all-settings .all-settings-button {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .all-settings .all-settings-button {
margin: auto;
}
.settings-editor > .settings-body > .settings-tree-container .all-settings .all-settings-button .monaco-button {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .all-settings .all-settings-button .monaco-button {
padding-left: 10px;
padding-right: 10px;
}
......@@ -291,13 +310,13 @@
overflow: visible;
}
.settings-editor > .settings-body > .settings-tree-container .settings-group-title-label {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .settings-group-title-label {
margin: 0px;
padding: 5px 0px;
font-size: 13px;
}
.settings-editor > .settings-body .settings-feedback-button {
.settings-editor > .settings-editor-right > .settings-body .settings-feedback-button {
color: rgb(255, 255, 255);
background-color: rgb(14, 99, 156);
position: absolute;
......
src/vs/workbench/parts/preferences/browser/settingsEditor2.ts
浏览文件 @ 44c8c2d3
......@@ -100,10 +100,12 @@ export class SettingsEditor2 extends BaseEditor {
}
createEditor(parent: HTMLElement): void {
const prefsEditorElement = DOM.append(parent, $('div', { class: 'settings-editor' }));
const settingsEditorElement = DOM.append(parent, $('.settings-editor'));
this.createTOC(settingsEditorElement);
this.createHeader(prefsEditorElement);
this.createBody(prefsEditorElement);
const settingsEditorRightElement = DOM.append(settingsEditorElement, $('.settings-editor-right'));
this.createHeader(settingsEditorRightElement);
this.createBody(settingsEditorRightElement);
}
setInput(input: SettingsEditor2Input, options: EditorOptions, token: CancellationToken): Thenable<void> {
......@@ -214,7 +216,6 @@ export class SettingsEditor2 extends BaseEditor {
private createBody(parent: HTMLElement): void {
const bodyContainer = DOM.append(parent, $('.settings-body'));
this.createTOC(bodyContainer);
this.createSettingsTree(bodyContainer);
if (this.environmentService.appQuality !== 'stable') {
......@@ -289,12 +290,12 @@ export class SettingsEditor2 extends BaseEditor {
this._register(registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
const activeBorderColor = theme.getColor(listActiveSelectionBackground);
if (activeBorderColor) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree:focus .monaco-tree-row.focused {outline: solid 1px ${activeBorderColor}; outline-offset: -1px; }`);
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; }`);
}
const inactiveBorderColor = theme.getColor(listInactiveSelectionBackground);
if (inactiveBorderColor) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree .monaco-tree-row.focused {outline: solid 1px ${inactiveBorderColor}; outline-offset: -1px; }`);
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; }`);
}
}));
......
src/vs/workbench/parts/preferences/browser/settingsTree.ts
浏览文件 @ 44c8c2d3
......@@ -41,7 +41,7 @@ export const modifiedItemForeground = registerColor('settings.modifiedItemForegr
registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
const modifiedItemForegroundColor = theme.getColor(modifiedItemForeground);
if (modifiedItemForegroundColor) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-is-configured-label { color: ${modifiedItemForegroundColor}; }`);
collector.addRule(`.settings-editor > .settings-editor-right > .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.
先完成此消息的编辑！
想要评论请 注册 或