diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 37af77acf..a2ba4d925 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -163,6 +163,7 @@
--color-marker: oklch(var(--lch-red-medium));
--color-terminal-bg: oklch(var(--lch-blue-darkest));
--color-terminal-text: oklch(var(--lch-green-medium));
+ --color-terminal-text-light: oklch(var(--lch-green-light));
/* Colors: Cards */
--color-card-default: oklch(var(--lch-blue-dark));
@@ -268,6 +269,8 @@
--lch-pink-lighter: 30% 0.03 346;
--lch-pink-lightest: 25% 0.011 348;
+ --color-terminal-text-light: oklch(var(--lch-green-dark));
+
--shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42),
0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),
0 .4em 2.4em -1em oklch(var(--lch-black) / 0.7),
diff --git a/app/assets/stylesheets/animation.css b/app/assets/stylesheets/animation.css
index 025189d5a..5fa47f1c4 100644
--- a/app/assets/stylesheets/animation.css
+++ b/app/assets/stylesheets/animation.css
@@ -8,6 +8,12 @@
5%,60% { opacity: 1; }
}
+ @keyframes pulse {
+ 0% { opacity: 1; }
+ 50% { opacity: 0.6; }
+ 100% { opacity: 1; }
+ }
+
/* Keyframes */
@keyframes react {
0% { transform: scale(0.85); opacity: 0; }
diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css
index 2532bd7b4..0d23d000b 100644
--- a/app/assets/stylesheets/terminals.css
+++ b/app/assets/stylesheets/terminals.css
@@ -7,7 +7,7 @@
font-family: var(--font-mono);
font-size: var(--text-normal);
inset: auto 0 0 0;
- padding: var(--block-space) calc(var(--tray-size) + var(--inline-space) * 3);
+ padding: var(--block-space) calc(var(--tray-size) + var(--inline-space-double));
position: fixed;
z-index: var(--z-terminal);
@@ -15,24 +15,6 @@
background-color: var(--color-black);
border-block-start: 1px solid var(--color-ink-lighter);
}
-
- .terminal__input {
- --input-border-color: transparent;
- --input-border-radius: 0.3em;
- --hover-color: transparent;
- --input-color: var(--color-terminal-text);
- --outline-size: 0;
- --outline-color: transparent;
-
- accent-color: var(--color-terminal-text);
- caret-color: var(--color-terminal-text);
- font-family: inherit;
-
- &::placeholder {
- color: oklch(var(--lch-green-light));
- opacity: 0.5;
- }
- }
}
.terminal__button {
@@ -62,17 +44,9 @@
transition: unset;
}
- .terminal__menu {
- display: none;
- list-style: none;
-
- .terminal--open & {
- display: flex;
- }
-
- .terminal--showing-help & {
- display: none;
- }
+ .terminal__container {
+ max-block-size: calc(100vh - var(--btn-size) - var(--block-space));
+ overflow: auto;
}
.terminal__help {
@@ -119,6 +93,57 @@
}
}
+ .terminal__input:is(.input) {
+ --input-border-color: transparent;
+ --input-border-radius: 0.3em;
+ --hover-color: transparent;
+ --input-color: var(--color-terminal-text);
+ --outline-size: 0;
+ --outline-color: transparent;
+
+ accent-color: var(--color-terminal-text);
+ caret-color: var(--color-terminal-text);
+ font-family: inherit;
+
+ &::placeholder {
+ color: var(--color-terminal-text-light);
+ opacity: 0.5;
+ }
+
+ &:focus::placeholder {
+ opacity: 0.7;
+ }
+
+ .terminal--confirmation & {
+ color: var(--color-terminal-text-light);
+ }
+
+ .terminal--error & {
+ accent-color: var(--color-negative);
+ caret-color: var(--color-negative);
+ color: var(--color-negative);
+ }
+ }
+
+ .terminal__label {
+ .terminal--busy:is(:not(.terminal--confirmation)) & {
+ animation: pulse 1s infinite;
+ }
+ }
+
+ .terminal__menu {
+ display: none;
+ list-style: none;
+
+ .terminal--open & {
+ display: flex;
+ }
+
+ .terminal--showing-help & {
+ display: none;
+ }
+ }
+
.terminal__item {
&[aria-current] {
--btn-color: var(--color-terminal-bg);
@@ -139,24 +164,25 @@
}
}
- .terminal--error .terminal__input {
- accent-color: var(--color-negative);
- caret-color: var(--color-negative);
- color: var(--color-negative);
- }
-
- /* @TODO: Review these. */
- .terminal--output {
- overflow: scroll;
- max-height: 400px;
+ .terminal__output {
display: none;
+ .terminal--confirmation & {
+ color: var(--color-terminal-text-light);
+ }
+
.terminal--showing-output & {
display: block;
}
- }
- .terminal--busy {
- border: 5px solid orange;
+ p {
+ + ul {
+ margin-block-start: 0;
+ }
+
+ &:has(+ ul) {
+ margin-block-end: 0;
+ }
+ }
}
}
diff --git a/app/javascript/controllers/terminal_controller.js b/app/javascript/controllers/terminal_controller.js
index 83494de8a..2cefd5765 100644
--- a/app/javascript/controllers/terminal_controller.js
+++ b/app/javascript/controllers/terminal_controller.js
@@ -149,7 +149,7 @@ export default class extends Controller {
#showConfirmationPrompt(confirmationPrompt) {
if (isMultiLineString(confirmationPrompt)) {
this.#showOutput(confirmationPrompt)
- this.inputTarget.value = `Do you confirm? [Y/n] `
+ this.inputTarget.value = `Apply these changes? [Y/n] `
} else {
this.inputTarget.value = `${confirmationPrompt}? [Y/n] `
}
diff --git a/app/models/command/assign.rb b/app/models/command/assign.rb
index 69c4a06dd..b6c22221a 100644
--- a/app/models/command/assign.rb
+++ b/app/models/command/assign.rb
@@ -8,7 +8,7 @@ class Command::Assign < Command
def title
assignee_description = assignees.collect(&:first_name).join(", ")
- "Assign #{assignee_description} to #{cards_description}"
+ "Assign #{cards_description} to #{assignee_description}"
end
def execute
diff --git a/app/models/command/composite.rb b/app/models/command/composite.rb
index 7595e52b9..59256b773 100644
--- a/app/models/command/composite.rb
+++ b/app/models/command/composite.rb
@@ -21,10 +21,10 @@ class Command::Composite < Command
end
def confirmation_prompt
- confirmations = commands_excluding_redirections.collect(&:confirmation_prompt).collect { "- #{it}" }.join("\n")
+ confirmations = commands_excluding_redirections.collect(&:confirmation_prompt).collect { "- #{it}." }.join("\n")
<<~MD
- This will:
+ You are about to:
#{confirmations}
MD
diff --git a/app/views/commands/_form.html.erb b/app/views/commands/_form.html.erb
index f13de4d5c..d10a919d8 100644
--- a/app/views/commands/_form.html.erb
+++ b/app/views/commands/_form.html.erb
@@ -17,7 +17,7 @@
terminal_target: "input",
action: "keydown.up->toggle-class#add:prevent keydown.up->navigable-list#selectCurrentOrLast terminal#hideError"
},
- placeholder: "Press ⌘+K to search or type /commands…",
+ placeholder: "Press ⌘+K to search or type commands…",
spellcheck: "false" %>
<%= hidden_field_tag "confirmed", nil, data: { terminal_target: "confirmation" } %>
diff --git a/app/views/commands/_help.html.erb b/app/views/commands/_help.html.erb
index 8c18abcf3..45d9db64c 100644
--- a/app/views/commands/_help.html.erb
+++ b/app/views/commands/_help.html.erb
@@ -1,28 +1,28 @@
Commands you can use in Fizzy:
+ Commands you can use in Fizzy:
Navigation
@username[card id][id]Filtering
- #tag_name[card id 1] [card id 2]...search_term#tag[id] [id]…[search term]/clearCards
- /assign [username 1] [username 2].../assign [person] [person]…/close [reason]/tag [tag name]/tag [tag]