Skip to content

Commit

Permalink
Better UX components for code action buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@gencay
gencay committed Dec 10, 2022
1 parent b59de89 commit 4c19369
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 24 deletions.
Binary file added images/conversation-mode-2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 12 additions & 11 deletions media/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@ a:active {
color: var(--vscode-textLink-activeForeground);
}

pre {
margin-top: 1rem !important;
}

code {
font-family: var(--vscode-editor-font-family) !important;
}
Expand All @@ -49,13 +53,16 @@ button {
text-align: center;
outline: 1px solid transparent;
outline-offset: 2px !important;
color: var(--vscode-button-foreground);
background: var(--vscode-button-background);
color: var(--vscode-button-secondaryForeground);
background: var(--vscode-button-secondaryBackground);
}

button:hover {
cursor: pointer;
background: var(--vscode-button-hoverBackground);
background: var(--vscode-button-secondaryHoverBackground);
}

button:hover svg {
stroke: var(--vscode-button-secondaryForeground);
}

button:focus {
Expand Down Expand Up @@ -147,12 +154,6 @@ textarea::placeholder {
}
}

button.ask-button:hover {
cursor: pointer;
color: var(--vscode-button-secondaryForeground);
background: var(--vscode-button-secondaryBackground);
}

.textarea-wrapper {
display: grid;
}
Expand All @@ -177,7 +178,7 @@ button.ask-button:hover {
}

.pre-code-element .code-actions-wrapper {
opacity: 0.25;
opacity: 0.70;
}

.pre-code-element:hover .code-actions-wrapper {
Expand Down
20 changes: 7 additions & 13 deletions media/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,17 +45,17 @@
switch (message.type) {
case "addQuestion":
const html = message.code != null
? marked.parseInline(message.value + "<br /> <br /><pre><code class='block whitespace-pre overflow-x-scroll'>```" + message.code + "```</code></pre>")
? marked.parse(message.value + "\r\n\n\n```\n" + message.code + "\n```")
: message.value;

list.innerHTML +=
`<div class="p-4 self-end mt-4 question-element-gnc relative" style="background: var(--vscode-list-hoverBackground)">
<p class="font-bold mb-5 flex">${userSvg}You</p>
<div class="mb-2 flex items-center">
<button title="Edit and resend this prompt" class="resend-element-gnc p-2 flex items-center rounded-lg absolute right-6 top-2" style="background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground);">${pencilSvg}</button>
<div class="hidden send-cancel-elements-gnc flex gap-4">
<button title="Send this prompt" class="send-element-gnc p-1 pr-2 flex items-center" style="background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground);">${sendSvg}Send</button>
<button title="Cancel" class="cancel-element-gnc p-1 pr-2 flex items-center" style="background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground);">${cancelSvg}Cancel</button>
<button title="Edit and resend this prompt" class="resend-element-gnc p-2 flex items-center rounded-lg absolute right-6 top-2">${pencilSvg}</button>
<div class="hidden send-cancel-elements-gnc flex gap-2">
<button title="Send this prompt" class="send-element-gnc p-1 pr-2 flex items-center">${sendSvg}Send</button>
<button title="Cancel" class="cancel-element-gnc p-1 pr-2 flex items-center">${cancelSvg}Cancel</button>
</div>
</div>
<div>${html}</div>
Expand All @@ -71,7 +71,7 @@
const preCodeList = markedResponse.querySelectorAll("pre > code");

preCodeList.forEach((preCode, index) => {
preCode.parentElement.classList.add("pre-code-element", "relative", "mt-4");
preCode.parentElement.classList.add("pre-code-element", "relative");

if (index != preCodeList.length - 1) {
preCode.parentElement.classList.add("mb-8");
Expand All @@ -80,32 +80,26 @@
preCode.classList.add("block", "whitespace-pre", "overflow-x-scroll");

const buttonWrapper = document.createElement("div");
buttonWrapper.classList.add("code-actions-wrapper", "flex", "gap-4", "flex-wrap", "items-center", "right-0", "top-0", "absolute");
buttonWrapper.classList.add("code-actions-wrapper", "flex", "gap-4", "flex-wrap", "items-center", "right-2", "top-1", "absolute");

// Create copy to clipboard button
const copyButton = document.createElement("button");
copyButton.title = "Copy to clipboard";
copyButton.innerHTML = clipboardSvg;

copyButton.classList.add("code-element-gnc", "p-2", "flex", "items-center", "rounded-lg");
copyButton.style.background = "var(--vscode-button-secondaryBackground)";
copyButton.style.color = "var(--vscode-button-secondaryForeground)";

const insert = document.createElement("button");
insert.title = "Insert the below code to the current file";
insert.innerHTML = insertSvg;

insert.classList.add("edit-element-gnc", "p-2", "flex", "items-center", "rounded-lg");
insert.style.background = "var(--vscode-button-secondaryBackground)";
insert.style.color = "var(--vscode-button-secondaryForeground)";

const newTab = document.createElement("button");
newTab.title = "Create a new file with the below code";
newTab.innerHTML = plusSvg;

newTab.classList.add("new-code-element-gnc", "p-2", "flex", "items-center", "rounded-lg");
newTab.style.background = "var(--vscode-button-secondaryBackground)";
newTab.style.color = "var(--vscode-button-secondaryForeground)";

buttonWrapper.append(copyButton, insert, newTab);

Expand Down

0 comments on commit 4c19369

Please sign in to comment.