Skip to content

Commit

Permalink
finish
Browse files Browse the repository at this point in the history
  • Loading branch information
@zjffun
zjffun committed May 25, 2024
1 parent a4cbcd4 commit 75dd0c8
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 65 deletions.
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
11 changes: 0 additions & 11 deletions src/CodeSnippetsEditor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -327,7 +317,6 @@ export class CodeSnippetsEditor implements vscode.CustomTextEditorProvider {
window.i18nText = ${JSON.stringify(i18nText)}
</script>
<script nonce="${nonce}" src="${scriptUri}"></script>
<script nonce="${nonce}" src="${tabGotoUri}"></script>
</body>
</html>`;
}
Expand Down
131 changes: 112 additions & 19 deletions views/code-snippets-editor/src/components/SnippetItem.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
flex-wrap: wrap;
gap: 0.2rem;
padding-bottom: 0.5rem;

&__item {
overflow: hidden;
text-overflow: ellipsis;
Expand All @@ -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);
}
}
}
}
Expand All @@ -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 {
Expand Down Expand Up @@ -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);
}
}
49 changes: 20 additions & 29 deletions views/code-snippets-editor/src/components/SnippetItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@ interface Props {
cancelEdit(): void;
}

function originalInputValueFormat(
values: {
value: string;
}[]
) {
return values.map((item) => item.value).join(",");
}

const SnippetItem = ({
snippet,
readonly,
Expand Down Expand Up @@ -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}
</vscode-text-field>
Expand All @@ -196,45 +202,34 @@ const SnippetItem = ({
</div>
<div style={{ flex: "1 1 0" }}></div>
<div className="code-snippets-editor-operation">
<vscode-button
ref={saveBtnRef}
onClick={saveEdit}
tab-goto-key={`${keyName}-save-button`}
shift-tab-goto={`[tab-goto-key="${keyName}-body-input"]`}
>
<vscode-button ref={saveBtnRef} onClick={saveEdit}>
{window.i18nText.save}
</vscode-button>
<vscode-button
ref={cancelBtnRef}
appearance="secondary"
onClick={cancelEdit}
tab-goto-key={`${keyName}-cancel-button`}
tab-goto={`[tab-goto-key="${keyName}-name-input"]`}
>
{window.i18nText.cancel}
</vscode-button>
</div>
</div>

{/* <vscode-text-field
name="scope"
value={snippet.scope}
onInput={handleChange}
tab-goto-key={`${keyName}-scope-input`}
tab-goto={`[tab-goto-key="${keyName}-description-input"]`}
>
{window.i18nText.scope}
</vscode-text-field> */}
<div
className="code-snippets-editor-snippet__scope"
tab-goto-key={`${keyName}-scope-input`}
tab-goto={`[tab-goto-key="${keyName}-description-input"]`}
>
<div className="code-snippets-editor-snippet__scope-edit">
<div className="code-snippets-editor-snippet__scope-edit__label">
Scope
</div>
<Tags
name="scope"
whitelist={langIds}
placeholder="Add Scopes"
defaultValue={snippet.scope} // initial value
onChange={handleChange}
settings={{
dropdown: {
enabled: 1,
},
originalInputValueFormat,
}}
/>
</div>

Expand All @@ -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}
</vscode-text-field>
Expand All @@ -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}
</vscode-text-area>
Expand Down
5 changes: 0 additions & 5 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit 75dd0c8

Please sign in to comment.