From 75dd0c8cc39c49573e21bc4ebef031671d969076 Mon Sep 17 00:00:00 2001 From: Jufeng Zhang Date: Sat, 25 May 2024 17:16:11 +0800 Subject: [PATCH] finish --- package.json | 1 - src/CodeSnippetsEditor.ts | 11 -- .../src/components/SnippetItem.scss | 131 +++++++++++++++--- .../src/components/SnippetItem.tsx | 49 +++---- yarn.lock | 5 - 5 files changed, 132 insertions(+), 65 deletions(-) diff --git a/package.json b/package.json index 3ae113c..565bdbf 100644 --- a/package.json +++ b/package.json @@ -414,7 +414,6 @@ "jsonc-parser": "^3.0.0", "lodash": "^4.17.21", "sha1": "^1.1.1", - "tab-goto": "^0.1.1", "vscode-ext-codicons": "^1.4.0", "vscode-ext-help-and-feedback-view": "^1.0.1" }, diff --git a/src/CodeSnippetsEditor.ts b/src/CodeSnippetsEditor.ts index 238c0ad..8704a2d 100644 --- a/src/CodeSnippetsEditor.ts +++ b/src/CodeSnippetsEditor.ts @@ -278,16 +278,6 @@ export class CodeSnippetsEditor implements vscode.CustomTextEditorProvider { ) ); - const tabGotoUri = webview.asWebviewUri( - vscode.Uri.joinPath( - this.context.extensionUri, - "node_modules", - "tab-goto", - "dist", - "index.min.js" - ) - ); - // Use a nonce to whitelist which scripts can be run const nonce = getNonce(); @@ -327,7 +317,6 @@ export class CodeSnippetsEditor implements vscode.CustomTextEditorProvider { window.i18nText = ${JSON.stringify(i18nText)} - `; } diff --git a/views/code-snippets-editor/src/components/SnippetItem.scss b/views/code-snippets-editor/src/components/SnippetItem.scss index 52d4e49..89f8c8a 100644 --- a/views/code-snippets-editor/src/components/SnippetItem.scss +++ b/views/code-snippets-editor/src/components/SnippetItem.scss @@ -24,6 +24,7 @@ flex-wrap: wrap; gap: 0.2rem; padding-bottom: 0.5rem; + &__item { overflow: hidden; text-overflow: ellipsis; @@ -36,28 +37,81 @@ color: var(--badge-foreground); padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px); } + } + + &__scope-edit { + padding-bottom: 0.5rem; + + &__label { + display: block; + color: var(--foreground); + cursor: pointer; + font-size: var(--type-ramp-base-font-size); + line-height: var(--type-ramp-base-line-height); + margin-bottom: calc(var(--design-unit) * 1px); + } .tags-input { - background: var(--input-background); .tagify { - --tags-border-color: none; - --tags-hover-border-color: none; - --tags-focus-border-color: none; - --tag-bg: var(--badge-background); - --tag-hover: var(--badge-background); - --tag-text-color: var(--badge-foreground); - --tag-text-color--edit: var(--badge-foreground); - --tag-invalid-bg: var(--badge-background); - --tag-invalid-color: var(--vscode-errorForeground); - --tag-remove-bg: var(--badge-background); - --tag-remove-btn-color: var(--badge-foreground); - --tag-remove-btn-bg: none; - --tag-remove-btn-bg--hover: none; - --input-color: var(--input-foreground); - --placeholder-color: rgba(0, 0, 0, 0.4); - --placeholder-color-focus: rgba(0, 0, 0, 0.25); - --loader-size: 0.8em; - --readonly-striped: 1; + width: 100%; + background: var(--input-background); + border-radius: calc(var(--corner-radius) * 1px); + border: calc(var(--border-width) * 1px) solid var(--dropdown-border); + padding: 0 calc(var(--design-unit) * 2px + 1px); + + &__tag { + font-family: var(--font-family); + font-size: var(--type-ramp-minus1-font-size); + line-height: var(--type-ramp-minus1-line-height); + background-color: var(--badge-background); + border: calc(var(--border-width) * 1px) solid var(--button-border); + border-radius: var(--tag-corner-radius); + padding: calc(var(--design-unit) * 0.5px) + calc(var(--design-unit) * 1px); + margin: calc(var(--design-unit) * 1px) + calc(var(--design-unit) * 1px) calc(var(--design-unit) * 1px) 0; + + &-text { + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + color: var(--badge-foreground); + } + + &__removeBtn { + margin: 0; + color: var(--badge-foreground); + + &:hover + div > span { + opacity: initial; + } + } + + & > div { + max-width: calc(100% - 14px); + padding: 0 4px 0 0; + + &::before { + display: none; + } + } + } + + &__input { + font-size: var(--type-ramp-base-font-size); + padding: calc(var(--design-unit) * 0.5px) + calc(var(--design-unit) * 1px); + margin: calc(var(--design-unit) * 1px) + calc(var(--design-unit) * 1px) calc(var(--design-unit) * 1px) 0; + + &::before { + color: var(--input-placeholder-foreground); + } + } + + &--focus { + border-color: var(--focus-border); + } } } } @@ -66,16 +120,20 @@ padding-bottom: 0.5rem; overflow: hidden; text-overflow: ellipsis; + vscode-text-field { width: 100%; } } + &__body { position: relative; color: var(--vscode-textPreformat-foreground); pre { margin: 0; + width: 100%; + overflow: auto; } vscode-text-area { @@ -119,3 +177,38 @@ gap: 0.5em; } } + +.tagify__dropdown { + &__wrapper { + background: var(--dropdown-background); + border: calc(var(--border-width) * 1px) solid var(--focus-border); + border-radius: calc(var(--corner-radius) * 1px); + } + + &__item { + margin: 0; + border-radius: var(--corner-radius); + border: calc(var(--border-width) * 1px) solid transparent; + color: var(--foreground); + font-size: var(--type-ramp-base-font-size); + line-height: var(--type-ramp-base-line-height); + padding: 0 calc((var(--design-unit) / 2) * 1px) + calc((var(--design-unit) / 4) * 1px); + + &--active, + &:active { + filter: none; + background: var(--list-active-selection-background); + border: calc(var(--border-width) * 1px) solid var(--focus-border); + color: var(--list-active-selection-foreground); + } + } + + &__footer { + margin: 0; + border: calc(var(--border-width) * 1px) solid transparent; + padding: 0 calc((var(--design-unit) / 2) * 1px) + calc((var(--design-unit) / 4) * 1px); + color: var(--input-placeholder-foreground); + } +} diff --git a/views/code-snippets-editor/src/components/SnippetItem.tsx b/views/code-snippets-editor/src/components/SnippetItem.tsx index e626b3f..71d4dd6 100644 --- a/views/code-snippets-editor/src/components/SnippetItem.tsx +++ b/views/code-snippets-editor/src/components/SnippetItem.tsx @@ -16,6 +16,14 @@ interface Props { cancelEdit(): void; } +function originalInputValueFormat( + values: { + value: string; + }[] +) { + return values.map((item) => item.value).join(","); +} + const SnippetItem = ({ snippet, readonly, @@ -181,8 +189,6 @@ const SnippetItem = ({ name="name" value={snippet.name} onInput={handleChange} - tab-goto-key={`${keyName}-name-input`} - shift-tab-goto={`[tab-goto-key="${keyName}-cancel-button"]`} > {window.i18nText.name} @@ -196,45 +202,34 @@ const SnippetItem = ({
- + {window.i18nText.save} {window.i18nText.cancel}
- - {/* - {window.i18nText.scope} - */} -
+
+
+ Scope +
@@ -243,8 +238,6 @@ const SnippetItem = ({ name="description" value={snippet.description} onInput={handleChange} - tab-goto-key={`${keyName}-description-input`} - shift-tab-goto={`[tab-goto-key="${keyName}-scope-input"]`} > {window.i18nText.description} @@ -256,8 +249,6 @@ const SnippetItem = ({ rows={10} value={snippet.body} onInput={handleChange} - tab-goto-key={`${keyName}-body-input`} - tab-goto={`[tab-goto-key="${keyName}-save-button"]`} > {window.i18nText.body} diff --git a/yarn.lock b/yarn.lock index 5dfed74..ea80816 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6380,11 +6380,6 @@ sver-compat@^1.5.0: es6-iterator "^2.0.1" es6-symbol "^3.1.1" -tab-goto@^0.1.1: - version "0.1.1" - resolved "https://registry.npmjs.org/tab-goto/-/tab-goto-0.1.1.tgz#1c98d996a60ccf2e8541e24f704da2bb0f40bbc2" - integrity sha512-ekuFNVHROhsx7atqPSK4K2W04x4HMZ5TmG0YRcUgOXALU5llh+UcTIQzULkaVVm2JbQzsEulHQSL45F9dYd71A== - tabbable@^5.2.0: version "5.3.3" resolved "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf"