bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style prompts and insertions in the terminal

Browse Source
This commit is contained in:
Andy Smith
2025-07-01 13:58:54 -05:00
parent a34b18a77c
commit 22283851ee
4 changed files with 226 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/actiontext-lexical.css
+9
View File
@@ -150,6 +150,8 @@
background-color: var(--color-canvas);
border-radius: calc(var(--lexical-prompt-padding) * 2);
box-shadow: var(--shadow);
color: var(--color-ink);
font-family: var(--font-sans);
font-size: var(--text-small);
list-style: none;
margin: 0;
@@ -193,6 +195,13 @@
inline-size: var(--lexical-prompt-avatar-size);
margin: 0;
}
code {
background-color: var(--color-terminal-text-light);
border-radius: 0.25ch;
font-size: 0.95em;
padding-inline: 0.5ch;
}
}
/* Empty state */
app/assets/stylesheets/rich-text-content.css
+204 -198
View File
@@ -53,173 +53,6 @@
}
}
/* Attachments */
.attachment:not(.attachment--custom) {
block-size: auto;
display: inline-block;
inline-size: 100%;
position: relative;
margin-inline: 0;
max-inline-size: 100%;
&:is(figure) img,
&:is(figure) video {
block-size: auto;
display: block;
margin-inline: auto;
max-inline-size: 100%;
user-select: none;
}
:where(progress) {
inline-size: 100%;
margin: auto;
}
}
.attachment__caption {
color: var(--color-ink-dark);
display: flex;
font-size: var(--text-small);
flex-wrap: wrap;
line-height: 1.3;
column-gap: 0.5ch;
justify-content: center;
margin: var(--block-space-half) var(--inline-space);
text-align: center;
.input {
inline-size: 100%;
max-inline-size: 100%;
text-align: center;
@supports (field-sizing: content) {
field-sizing: content;
inline-size: auto;
min-inline-size: 20ch;
}
}
}
.attachment__figure {
--hover-size: 0;
}
.attachment--file {
align-items: center;
display: inline-flex;
.attachment__caption {
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
text-align: start;
strong {
color: var(--color-ink);
}
}
}
.attachment__icon {
aspect-ratio: 4/5;
background-color: var(--color-canvas);
block-size: calc(2.5lh + 0.5ch);
border: 2px solid var(--color-ink-medium);
border-radius: 0.3em;
color: var(--color-ink-dark);
display: inline-grid;
font-size: var(--text-small);
font-weight: 800;
inline-size: auto;
overflow: clip;
padding-block-start: 0.4lh;
place-content: center;
position: relative;
text-transform: uppercase;
&::before {
background-color: var(--color-ink-medium);
block-size: 0.5lh;
content: "";
display: block;
inline-size: 100%;
inset: 0 0 auto;
position: absolute;
}
.attachment--psd &,
.attachment--key &,
.attachment--sketch &,
.attachment--ai &,
.attachment--eps &,
.attachment--indd &,
.attachment--svg &,
.attachment--ppt &,
.attachment--pptx & {
color: oklch(var(--lch-red-dark));
background-color: oklch(var(--lch-red-lightest));
border-color: oklch(var(--lch-red-medium));
&::before {
background-color: oklch(var(--lch-red-medium));
}
}
.attachment--css &,
.attachment--php &,
.attachment--json &,
.attachment--htm &,
.attachment--html &,
.attachment--rb &,
.attachment--erb &,
.attachment--ts &,
.attachment--js & {
color: oklch(var(--lch-purple-dark));
background-color: oklch(var(--lch-purple-lightest));
border-color: oklch(var(--lch-purple-medium));
&::before {
background-color: oklch(var(--lch-purple-medium));
}
}
.attachment--txt &,
.attachment--pages &,
.attachment--rtf &,
.attachment--md &,
.attachment--doc &,
.attachment--docx & {
color: oklch(var(--lch-blue-dark));
background-color: oklch(var(--lch-blue-lightest));
border-color: oklch(var(--lch-blue-medium));
&::before {
background-color: oklch(var(--lch-blue-medium));
}
}
.attachment--csv &,
.attachment--numbers &,
.attachment--xls &,
.attachment--xlsx & {
color: oklch(var(--lch-green-dark));
background-color: oklch(var(--lch-green-lightest));
border-color: oklch(var(--lch-green-medium));
&::before {
background-color: oklch(var(--lch-green-medium));
}
}
}
.attachment__link {
--hover-size: 0;
color: var(--color-link);
text-decoration: underline;
}
/* Avoid extra space due to empty paragraphs */
p:empty {
display: none;
@@ -320,44 +153,217 @@
}
}
}
}
/* Custom attachments such as mentions, etc. */
.attachment--custom {
display: inline;
padding: 0;
margin: 0;
white-space: normal;
/* Attachments
/* ------------------------------------------------------------------------ */
.attachment:not(.attachment--custom) {
block-size: auto;
display: inline-block;
inline-size: 100%;
position: relative;
margin-inline: 0;
max-inline-size: 100%;
&:is(figure) img,
&:is(figure) video {
block-size: auto;
display: block;
margin-inline: auto;
max-inline-size: 100%;
user-select: none;
}
.attachment--custom,
action-text-attachment[content-type^='application/vnd.actiontext'] {
--attachment-image-size: 1em;
--attachment-selected-color: oklch(var(--lch-blue-dark));
:where(progress) {
inline-size: 100%;
margin: auto;
}
}
align-items: center;
display: inline-flex;
gap: 0.25ch;
position: relative;
vertical-align: bottom;
.attachment__caption {
color: var(--color-ink-dark);
display: flex;
font-size: var(--text-small);
flex-wrap: wrap;
line-height: 1.3;
column-gap: 0.5ch;
justify-content: center;
margin: var(--block-space-half) var(--inline-space);
text-align: center;
lexical-editor & {
cursor: pointer;
}
.input {
inline-size: 100%;
max-inline-size: 100%;
text-align: center;
img {
block-size: var(--attachment-image-size);
border-radius: 50%;
inline-size: var(--attachment-image-size);
}
&.node--selected {
background: var(--attachment-selected-color);
box-shadow:
-0.25ch 0 0 var(--attachment-selected-color),
0.5ch 0 0 var(--attachment-selected-color);
border-radius: 99rem;
color: var(--color-ink-inverted);
@supports (field-sizing: content) {
field-sizing: content;
inline-size: auto;
min-inline-size: 20ch;
}
}
}
.attachment__figure {
--hover-size: 0;
}
.attachment--file {
align-items: center;
display: inline-flex;
.attachment__caption {
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
text-align: start;
strong {
color: var(--color-ink);
}
}
}
.attachment__icon {
aspect-ratio: 4/5;
background-color: var(--color-canvas);
block-size: calc(2.5lh + 0.5ch);
border: 2px solid var(--color-ink-medium);
border-radius: 0.3em;
color: var(--color-ink-dark);
display: inline-grid;
font-size: var(--text-small);
font-weight: 800;
inline-size: auto;
overflow: clip;
padding-block-start: 0.4lh;
place-content: center;
position: relative;
text-transform: uppercase;
&::before {
background-color: var(--color-ink-medium);
block-size: 0.5lh;
content: "";
display: block;
inline-size: 100%;
inset: 0 0 auto;
position: absolute;
}
.attachment--psd &,
.attachment--key &,
.attachment--sketch &,
.attachment--ai &,
.attachment--eps &,
.attachment--indd &,
.attachment--svg &,
.attachment--ppt &,
.attachment--pptx & {
color: oklch(var(--lch-red-dark));
background-color: oklch(var(--lch-red-lightest));
border-color: oklch(var(--lch-red-medium));
&::before {
background-color: oklch(var(--lch-red-medium));
}
}
.attachment--css &,
.attachment--php &,
.attachment--json &,
.attachment--htm &,
.attachment--html &,
.attachment--rb &,
.attachment--erb &,
.attachment--ts &,
.attachment--js & {
color: oklch(var(--lch-purple-dark));
background-color: oklch(var(--lch-purple-lightest));
border-color: oklch(var(--lch-purple-medium));
&::before {
background-color: oklch(var(--lch-purple-medium));
}
}
.attachment--txt &,
.attachment--pages &,
.attachment--rtf &,
.attachment--md &,
.attachment--doc &,
.attachment--docx & {
color: oklch(var(--lch-blue-dark));
background-color: oklch(var(--lch-blue-lightest));
border-color: oklch(var(--lch-blue-medium));
&::before {
background-color: oklch(var(--lch-blue-medium));
}
}
.attachment--csv &,
.attachment--numbers &,
.attachment--xls &,
.attachment--xlsx & {
color: oklch(var(--lch-green-dark));
background-color: oklch(var(--lch-green-lightest));
border-color: oklch(var(--lch-green-medium));
&::before {
background-color: oklch(var(--lch-green-medium));
}
}
}
.attachment__link {
--hover-size: 0;
color: var(--color-link);
text-decoration: underline;
}
/* Custom attachments such as mentions, etc. */
.attachment--custom {
display: inline;
padding: 0;
margin: 0;
white-space: normal;
}
.attachment--custom,
action-text-attachment[content-type^='application/vnd.actiontext'] {
--attachment-bg-color: transparent;
--attachment-image-size: 1em;
--attachment-text-color: var(--color-ink);
align-items: center;
color: var(--attachment-text-color);
display: inline-flex;
gap: 0.25ch;
position: relative;
vertical-align: bottom;
background: var(--attachment-bg-color);
box-shadow:
-0.25ch 0 0 var(--attachment-bg-color),
0.5ch 0 0 var(--attachment-bg-color);
border-radius: 99rem;
lexical-editor & {
cursor: pointer;
}
img {
block-size: var(--attachment-image-size);
border-radius: 50%;
inline-size: var(--attachment-image-size);
}
&.node--selected {
--attachment-bg-color: oklch(var(--lch-blue-dark));
--attachment-text-color: var(--color-ink-inverted);
}
}
}
app/assets/stylesheets/terminals.css
+10
View File
@@ -204,4 +204,14 @@
}
}
}
/* Lexical prompt insertions
/* ------------------------------------------------------------------------ */
.terminal {
.attachment--custom:not(.node--selected) {
--attachment-bg-color: oklch(var(--lch-white) / 15%);
--attachment-text-color: var(--color-terminal-text);
}
}
}
app/views/prompts/commands/index.html.erb
+3 -3
View File
@@ -1,6 +1,6 @@
<lexical-prompt-item search="assign cards to users">
<template type="menu">
<code>/assign</code> - Assign cards to users
<code>/assign</code> Assign cards to users
</template>
<template type="editor">
/assign @
@@ -9,7 +9,7 @@
<lexical-prompt-item search="close cards">
<template type="menu">
<code>/close</code> - Close cards
<code>/close</code> Close cards
</template>
<template type="editor">
/close
@@ -18,7 +18,7 @@
<lexical-prompt-item search="tag cards">
<template type="menu">
<code>/tag</code> - Tag cards
<code>/tag</code> Tag cards
</template>
<template type="editor">
/tag #