From cda20600b1fb72cee65fc63de80469823b41302a Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 19 Jun 2025 12:16:32 +0200 Subject: [PATCH 01/67] Show mentions in the editor --- Gemfile | 2 +- Gemfile.lock | 13 ++++---- app/assets/stylesheets/actiontext-lexical.css | 32 ++++++++++++++++++- app/assets/stylesheets/rich-text-content.css | 22 +++++++++++-- app/controllers/prompts/users_controller.rb | 6 ++++ app/helpers/rich_text_helper.rb | 5 +++ app/models/user.rb | 6 +++- app/views/cards/edit.html.erb | 4 ++- app/views/prompts/users/_user.html.erb | 10 ++++++ app/views/prompts/users/index.html.erb | 1 + app/views/users/_attachable.html.erb | 2 ++ config/routes.rb | 4 +++ 12 files changed, 93 insertions(+), 14 deletions(-) create mode 100644 app/controllers/prompts/users_controller.rb create mode 100644 app/helpers/rich_text_helper.rb create mode 100644 app/views/prompts/users/_user.html.erb create mode 100644 app/views/prompts/users/index.html.erb create mode 100644 app/views/users/_attachable.html.erb diff --git a/Gemfile b/Gemfile index 8c43ff533..4935a7c87 100644 --- a/Gemfile +++ b/Gemfile @@ -27,7 +27,7 @@ gem "rqrcode" gem "redcarpet" gem "rouge" gem "jbuilder" -gem "actiontext-lexical", bc: "actiontext-lexical" +gem "actiontext-lexical", path: "/Users/jorge/Work/jorgemanrubia/actiontext-lexical" gem "image_processing", "~> 1.14" gem "platform_agent" gem "aws-sdk-s3", require: false diff --git a/Gemfile.lock b/Gemfile.lock index 696e77ae4..27b510c14 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,10 +1,3 @@ -GIT - remote: https://github.com/basecamp/actiontext-lexical - revision: 3f1ec3916f468ac2bb626091bcb97469c2c52483 - specs: - actiontext-lexical (0.1.0) - rails (>= 8.0.2) - GIT remote: https://github.com/basecamp/active_record-tenanted revision: f6fca189655ae6609d10ecad7cceed61592320c4 @@ -154,6 +147,12 @@ GIT thor (~> 1.0, >= 1.2.2) zeitwerk (~> 2.6) +PATH + remote: /Users/jorge/Work/jorgemanrubia/actiontext-lexical + specs: + actiontext-lexical (0.1.0) + rails (>= 8.0.2) + GEM remote: https://rubygems.org/ specs: diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css index a8a3e227a..db03addc8 100644 --- a/app/assets/stylesheets/actiontext-lexical.css +++ b/app/assets/stylesheets/actiontext-lexical.css @@ -1,5 +1,9 @@ lexical-editor { - .node--selected { + display: block; + position: relative; + overflow: visible; + + .node--selected:not(.attachment--custom) { &:not(:has(img)) { box-shadow: 0 0 0 var(--hover-size) var(--hover-color); } @@ -134,3 +138,29 @@ lexical-toolbar { } } } + +/* Debug styles by Jorge */ +.lexical-prompt-menu { + background: white; + border: 2px solid black; + list-style: none; + + margin: 0; + padding: 0; + min-height: 100px; + min-width: 300px; + + visibility: hidden; + + &.lexical-prompt-menu--visible { + visibility: initial; + } + + [aria-selected] { + border: 1px solid red; + } +} + +.attachment--custom.node--selected { + box-shadow: 0 0 0 var(--hover-size) var(--hover-color); +} diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css index 9b8c91cf6..1652b4cbb 100644 --- a/app/assets/stylesheets/rich-text-content.css +++ b/app/assets/stylesheets/rich-text-content.css @@ -20,7 +20,7 @@ :where(h5) { font-size: 0.83em; } :where(h6) { font-size: 0.67em; } - :where(p, ul, ol, dl, blockquote, figure, .attachment) { + :where(p, ul, ol, dl, blockquote, figure:not(.attachment--custom), .attachment:not(.attachment--custom)) { margin-block: var(--block-margin); overflow-wrap: break-word; text-wrap: pretty; @@ -54,7 +54,7 @@ } /* Attachments */ - .attachment { + .attachment:not(.attachment--custom) { block-size: auto; display: inline-block; inline-size: 100%; @@ -221,7 +221,7 @@ } /* Attachment junk gets wrapped in a paragraph causing unwanted space */ - p:has(action-text-attachment) { + p:has(action-text-attachment[src]) { display: none; + * { @@ -330,4 +330,20 @@ } } } + + /* Debug styles by Jorge */ + /* Custom attachments such as mentions, etc. */ + .attachment--custom { + display: inline; + padding: 0; + margin: 0; + white-space: normal; + } + + .attachment--custom, .lexical-prompt-menu__item, action-text-attachment { + img { + display: inline; + width: 24px; + } + } } diff --git a/app/controllers/prompts/users_controller.rb b/app/controllers/prompts/users_controller.rb new file mode 100644 index 000000000..1aaf995c4 --- /dev/null +++ b/app/controllers/prompts/users_controller.rb @@ -0,0 +1,6 @@ +class Prompts::UsersController < ApplicationController + def index + @users = User.all + render layout: false + end +end diff --git a/app/helpers/rich_text_helper.rb b/app/helpers/rich_text_helper.rb new file mode 100644 index 000000000..e3ac46c83 --- /dev/null +++ b/app/helpers/rich_text_helper.rb @@ -0,0 +1,5 @@ +module RichTextHelper + def mentions_prompt + content_tag "lexical-prompt", "", trigger: "@", src: prompts_users_path, name: "mention" + end +end diff --git a/app/models/user.rb b/app/models/user.rb index d68ccff46..c1dbc8c83 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -1,5 +1,5 @@ class User < ApplicationRecord - include Accessor, Assignee, Mentionable, Named, Role, Transferable + include Accessor, ActionText::Attachable, Assignee, Mentionable, Named, Role, Transferable include Timelined # Depends on Accessor has_one_attached :avatar @@ -25,6 +25,10 @@ class User < ApplicationRecord update! active: false, email_address: deactived_email_address end + def to_attachable_partial_path + "users/attachable" + end + private def deactived_email_address email_address.sub(/@/, "-deactivated-#{SecureRandom.uuid}@") diff --git a/app/views/cards/edit.html.erb b/app/views/cards/edit.html.erb index d7cbe9e6c..4a6043125 100644 --- a/app/views/cards/edit.html.erb +++ b/app/views/cards/edit.html.erb @@ -10,7 +10,9 @@ <%= form.rich_textarea :description, class: "card-field__description rich-text-content", placeholder: "Add some notes, context, pictures, or video about this…", - data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } %> + data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } do %> + <%= mentions_prompt %> + <% end %> <%= form.button "Save changes", type: :submit, class: "btn btn--reversed", style: "--btn-background: #{@card.color}" %> <%= link_to "Close editor and discard changes", collection_card_path(@card.collection, @card), data: { form_target: "cancel" }, hidden: true %> diff --git a/app/views/prompts/users/_user.html.erb b/app/views/prompts/users/_user.html.erb new file mode 100644 index 000000000..7204e5162 --- /dev/null +++ b/app/views/prompts/users/_user.html.erb @@ -0,0 +1,10 @@ +" sgid="<%= user.attachable_sgid %>"> + + + diff --git a/app/views/prompts/users/index.html.erb b/app/views/prompts/users/index.html.erb new file mode 100644 index 000000000..4d78c50f9 --- /dev/null +++ b/app/views/prompts/users/index.html.erb @@ -0,0 +1 @@ +<%= render partial: "prompts/users/user", collection: @users %> diff --git a/app/views/users/_attachable.html.erb b/app/views/users/_attachable.html.erb new file mode 100644 index 000000000..0f973fc6f --- /dev/null +++ b/app/views/users/_attachable.html.erb @@ -0,0 +1,2 @@ +<%= avatar_image_tag user %> +<%= user.name %> diff --git a/config/routes.rb b/config/routes.rb index 3e9761dd4..dc00a8766 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -103,6 +103,10 @@ Rails.application.routes.draw do resources :pins end + namespace :prompts do + resources :users + end + namespace :public do resources :collections do scope module: :collections do From 0b8d93be020e06accb3743917f003685373edf65 Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 19 Jun 2025 12:28:00 +0200 Subject: [PATCH 02/67] Prefer first names for now --- app/views/prompts/users/_user.html.erb | 2 +- app/views/users/_attachable.html.erb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/prompts/users/_user.html.erb b/app/views/prompts/users/_user.html.erb index 7204e5162..836467bca 100644 --- a/app/views/prompts/users/_user.html.erb +++ b/app/views/prompts/users/_user.html.erb @@ -5,6 +5,6 @@ diff --git a/app/views/users/_attachable.html.erb b/app/views/users/_attachable.html.erb index 0f973fc6f..d6e474b6c 100644 --- a/app/views/users/_attachable.html.erb +++ b/app/views/users/_attachable.html.erb @@ -1,2 +1,2 @@ <%= avatar_image_tag user %> -<%= user.name %> +<%= user.first_name %> From 6446e5b409eb6df2ab23eb7e8d13d4a6a979e96c Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 19 Jun 2025 13:00:26 +0200 Subject: [PATCH 03/67] Select cards with # --- app/controllers/prompts/cards_controller.rb | 15 +++++++++++++++ app/helpers/rich_text_helper.rb | 4 ++++ app/models/card/searchable.rb | 2 +- app/models/concerns/searchable.rb | 1 + app/views/cards/edit.html.erb | 1 + app/views/prompts/cards/_card.html.erb | 8 ++++++++ app/views/prompts/cards/index.html.erb | 1 + config/routes.rb | 1 + db/schema.rb | 1 + db/schema_cache.yml | 18 +++++++++++++++++- 10 files changed, 50 insertions(+), 2 deletions(-) create mode 100644 app/controllers/prompts/cards_controller.rb create mode 100644 app/views/prompts/cards/_card.html.erb create mode 100644 app/views/prompts/cards/index.html.erb diff --git a/app/controllers/prompts/cards_controller.rb b/app/controllers/prompts/cards_controller.rb new file mode 100644 index 000000000..04737be76 --- /dev/null +++ b/app/controllers/prompts/cards_controller.rb @@ -0,0 +1,15 @@ +class Prompts::CardsController < ApplicationController + def index + @cards = if filter_param.present? + Current.user.accessible_cards.mentioning(filter_param) + else + Current.user.accessible_cards.latest.limit(10) + end + render layout: false + end + + private + def filter_param + params[:filter] + end +end diff --git a/app/helpers/rich_text_helper.rb b/app/helpers/rich_text_helper.rb index e3ac46c83..42c7cf5f1 100644 --- a/app/helpers/rich_text_helper.rb +++ b/app/helpers/rich_text_helper.rb @@ -2,4 +2,8 @@ module RichTextHelper def mentions_prompt content_tag "lexical-prompt", "", trigger: "@", src: prompts_users_path, name: "mention" end + + def cards_prompt + content_tag "lexical-prompt", "", trigger: "#", src: prompts_cards_path, name: "card", "insert-editable-text": true, "remote-filtering": true + end end diff --git a/app/models/card/searchable.rb b/app/models/card/searchable.rb index af2d3dbc9..97fb5b665 100644 --- a/app/models/card/searchable.rb +++ b/app/models/card/searchable.rb @@ -45,7 +45,7 @@ module Card::Searchable private # TODO: Temporary until we stabilize the search API def title_and_description - [ title, description.to_plain_text ].join(" ") + [ id.to_s, title, description.to_plain_text ].join(" ") end def search_embedding_content diff --git a/app/models/concerns/searchable.rb b/app/models/concerns/searchable.rb index 5946212dd..9a6b03bc0 100644 --- a/app/models/concerns/searchable.rb +++ b/app/models/concerns/searchable.rb @@ -68,3 +68,4 @@ module Searchable search_embedding&.destroy end end + diff --git a/app/views/cards/edit.html.erb b/app/views/cards/edit.html.erb index 4a6043125..03b1ae325 100644 --- a/app/views/cards/edit.html.erb +++ b/app/views/cards/edit.html.erb @@ -12,6 +12,7 @@ placeholder: "Add some notes, context, pictures, or video about this…", data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } do %> <%= mentions_prompt %> + <%= cards_prompt %> <% end %> <%= form.button "Save changes", type: :submit, class: "btn btn--reversed", style: "--btn-background: #{@card.color}" %> diff --git a/app/views/prompts/cards/_card.html.erb b/app/views/prompts/cards/_card.html.erb new file mode 100644 index 000000000..ebecb20a6 --- /dev/null +++ b/app/views/prompts/cards/_card.html.erb @@ -0,0 +1,8 @@ + + + + diff --git a/app/views/prompts/cards/index.html.erb b/app/views/prompts/cards/index.html.erb new file mode 100644 index 000000000..253e6e543 --- /dev/null +++ b/app/views/prompts/cards/index.html.erb @@ -0,0 +1 @@ +<%= render partial: "prompts/cards/card", collection: @cards %> diff --git a/config/routes.rb b/config/routes.rb index dc00a8766..8032e842d 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -105,6 +105,7 @@ Rails.application.routes.draw do namespace :prompts do resources :users + resources :cards end namespace :public do diff --git a/db/schema.rb b/db/schema.rb index d27ab0295..dff0ccb02 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -324,6 +324,7 @@ ActiveRecord::Schema[8.1].define(version: 2025_06_09_102553) do t.datetime "created_at", null: false t.string "title" t.datetime "updated_at", null: false + t.index ["title"], name: "index_tags_on_account_id_and_title", unique: true end create_table "users", force: :cascade do |t| diff --git a/db/schema_cache.yml b/db/schema_cache.yml index 479604bf0..89fca8331 100644 --- a/db/schema_cache.yml +++ b/db/schema_cache.yml @@ -2200,7 +2200,23 @@ indexes: nulls_not_distinct: comment: valid: true - tags: [] + tags: + - !ruby/object:ActiveRecord::ConnectionAdapters::IndexDefinition + table: tags + name: index_tags_on_account_id_and_title + unique: true + columns: + - title + lengths: {} + orders: {} + opclasses: {} + where: + type: + using: + include: + nulls_not_distinct: + comment: + valid: true users: - !ruby/object:ActiveRecord::ConnectionAdapters::IndexDefinition table: users From 68dededbca09f4c8fc02bb8eb902e026f4dc703d Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 19 Jun 2025 13:34:36 +0200 Subject: [PATCH 04/67] CSS tweak for clickable elements --- app/assets/stylesheets/actiontext-lexical.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css index db03addc8..be0ab2fcd 100644 --- a/app/assets/stylesheets/actiontext-lexical.css +++ b/app/assets/stylesheets/actiontext-lexical.css @@ -159,6 +159,10 @@ lexical-toolbar { [aria-selected] { border: 1px solid red; } + + .lexical-prompt-menu__item { + cursor: pointer; + } } .attachment--custom.node--selected { From 2dbb53da1f145a999c6d2bcc6fa668e045481881 Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 19 Jun 2025 13:34:44 +0200 Subject: [PATCH 05/67] Add prompts to the rest of rich text editors --- app/models/user.rb | 4 ---- app/models/user/mentionable.rb | 9 +++++++++ app/views/cards/comments/_new.html.erb | 9 ++++++--- app/views/cards/comments/edit.html.erb | 7 +++++-- app/views/cards/container/_title.html.erb | 5 ++++- 5 files changed, 24 insertions(+), 10 deletions(-) diff --git a/app/models/user.rb b/app/models/user.rb index c1dbc8c83..23b2f1cb2 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -25,10 +25,6 @@ class User < ApplicationRecord update! active: false, email_address: deactived_email_address end - def to_attachable_partial_path - "users/attachable" - end - private def deactived_email_address email_address.sub(/@/, "-deactivated-#{SecureRandom.uuid}@") diff --git a/app/models/user/mentionable.rb b/app/models/user/mentionable.rb index 7a930ab02..be82f3d95 100644 --- a/app/models/user/mentionable.rb +++ b/app/models/user/mentionable.rb @@ -3,6 +3,11 @@ module User::Mentionable included do has_many :mentions, dependent: :destroy, inverse_of: :mentionee + + # Need to set in the included block so that it overrides Action Text's + def to_attachable_partial_path + "users/attachable" + end end def mentioned_by(mentioner, at:) @@ -13,6 +18,10 @@ module User::Mentionable [ initials, first_name, first_name_with_last_name_initial ].collect(&:downcase) end + def content_type + "application/vnd.actiontext.mention" + end + private def first_name_with_last_name_initial "#{first_name}#{last_name&.first}" diff --git a/app/views/cards/comments/_new.html.erb b/app/views/cards/comments/_new.html.erb index 68659dd38..8237fda1e 100644 --- a/app/views/cards/comments/_new.html.erb +++ b/app/views/cards/comments/_new.html.erb @@ -7,10 +7,13 @@
<%= form_with model: Comment.new, url: card_comments_path(card), class: "flex flex-column gap full-width", data: { controller: "form local-save", - local_save_key_value: "comment-#{card.id}", - action: "turbo:submit-end->local-save#submit keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } do |form| %> + local_save_key_value: "comment-#{card.id}", + action: "turbo:submit-end->local-save#submit keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } do |form| %> <%= form.rich_textarea :body, required: true, placeholder: new_comment_placeholder(card), - data: { local_save_target: "input", action: "actiontext:change->local-save#save turbo:morph-element->local-save#restoreContent" } %> + data: { local_save_target: "input", action: "actiontext:change->local-save#save turbo:morph-element->local-save#restoreContent" } do %> + <%= mentions_prompt %> + <%= cards_prompt %> + <% end %> <%= form.button class: "comment__submit btn btn--reversed flex-item-justify-start" do %> Post this comment <% end %> diff --git a/app/views/cards/comments/edit.html.erb b/app/views/cards/comments/edit.html.erb index 726693c47..ebf55a8b1 100644 --- a/app/views/cards/comments/edit.html.erb +++ b/app/views/cards/comments/edit.html.erb @@ -8,7 +8,10 @@
<%= form_with model: [ @card, @comment ], class: "flex flex-column gap full-width", data: { controller: "form", action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } do |form| %> - <%= form.rich_textarea :body, required: true, autofocus: true, placeholder: new_comment_placeholder(@card) %> + <%= form.rich_textarea :body, required: true, autofocus: true, placeholder: new_comment_placeholder(@card) do %> + <%= mentions_prompt %> + <%= cards_prompt %> + <% end %>
<%= form.button class: "btn btn--reversed", type: :submit do %> Save changes @@ -18,7 +21,7 @@ <% end %> <%= tag.button type: :submit, class: "btn btn--negative flex-item-justify-end", form: dom_id(@comment, :delete_form), - data: { turbo_confirm: "Are you sure you want to delete this comment?" } do %> + data: { turbo_confirm: "Are you sure you want to delete this comment?" } do %> <%= icon_tag "trash" %> Delete <% end %> diff --git a/app/views/cards/container/_title.html.erb b/app/views/cards/container/_title.html.erb index 0a45685e9..e95064726 100644 --- a/app/views/cards/container/_title.html.erb +++ b/app/views/cards/container/_title.html.erb @@ -20,7 +20,10 @@
<%= form.rich_textarea :description, class: "card-field__description", placeholder: "Add some notes, context, pictures, or video about this…", - data: { action: "actiontext:change->auto-save#change focusout->auto-save#submit keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } %> + data: { action: "actiontext:change->auto-save#change focusout->auto-save#submit keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } do %> + <%= mentions_prompt %> + <%= cards_prompt %> + <% end %>
<% end %> <% end %> From a6324f22f22623318c955c010adbe3d053f81fda Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 19 Jun 2025 14:32:34 +0200 Subject: [PATCH 06/67] Use remote version from branch --- Gemfile | 2 +- Gemfile.lock | 14 ++++++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/Gemfile b/Gemfile index 4935a7c87..a914cd42b 100644 --- a/Gemfile +++ b/Gemfile @@ -27,7 +27,7 @@ gem "rqrcode" gem "redcarpet" gem "rouge" gem "jbuilder" -gem "actiontext-lexical", path: "/Users/jorge/Work/jorgemanrubia/actiontext-lexical" +gem "actiontext-lexical", bc: "actiontext-lexical", branch: "prompts" gem "image_processing", "~> 1.14" gem "platform_agent" gem "aws-sdk-s3", require: false diff --git a/Gemfile.lock b/Gemfile.lock index 27b510c14..eeff67ab0 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,3 +1,11 @@ +GIT + remote: https://github.com/basecamp/actiontext-lexical + revision: 34d8d1bafede56feb5c8a01c939d0c7f6c181e8b + branch: prompts + specs: + actiontext-lexical (0.1.0) + rails (>= 8.0.2) + GIT remote: https://github.com/basecamp/active_record-tenanted revision: f6fca189655ae6609d10ecad7cceed61592320c4 @@ -147,12 +155,6 @@ GIT thor (~> 1.0, >= 1.2.2) zeitwerk (~> 2.6) -PATH - remote: /Users/jorge/Work/jorgemanrubia/actiontext-lexical - specs: - actiontext-lexical (0.1.0) - rails (>= 8.0.2) - GEM remote: https://rubygems.org/ specs: From c59a99fa68f22ee12ac25993329a869f82e2e0c0 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 19 Jun 2025 13:35:20 -0500 Subject: [PATCH 07/67] Only display workflows when the card is in Doing --- app/views/cards/display/_preview.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb index e0c67a9e0..b622bae69 100644 --- a/app/views/cards/display/_preview.html.erb +++ b/app/views/cards/display/_preview.html.erb @@ -7,7 +7,7 @@ <%= render "cards/display/preview/collection", card: card %> <%= render "cards/display/preview/tags", card: card %> - <% if card.staged? %> + <% if card.staged? && card.doing? %> <%= card.stage.name %> From e51b47ad40fa6516e401cbf6c1ffefb35b7d826d Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 19 Jun 2025 13:48:08 -0500 Subject: [PATCH 08/67] Style the prompt --- app/assets/stylesheets/actiontext-lexical.css | 288 ++++++++++-------- app/assets/stylesheets/rich-text-content.css | 8 +- 2 files changed, 161 insertions(+), 135 deletions(-) diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css index be0ab2fcd..ec2cfecb3 100644 --- a/app/assets/stylesheets/actiontext-lexical.css +++ b/app/assets/stylesheets/actiontext-lexical.css @@ -1,170 +1,192 @@ -lexical-editor { - display: block; - position: relative; - overflow: visible; +@layer components { + lexical-editor { + display: block; + position: relative; + overflow: visible; - .node--selected:not(.attachment--custom) { - &:not(:has(img)) { - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + .node--selected:not(.attachment--custom) { + &:not(:has(img)) { + box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + } + + &:has(img) { + img { + box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + } + } } - &:has(img) { - img { - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + &.lexical-editor--empty { + .lexical-editor__content::before { + content: attr(placeholder); + color: currentColor; + cursor: text; + opacity: 0.66; + pointer-events: none; + position: absolute; + white-space: pre-line; } } } - &.lexical-editor--empty { - .lexical-editor__content::before { - content: attr(placeholder); - color: currentColor; - cursor: text; - opacity: 0.66; - pointer-events: none; - position: absolute; - white-space: pre-line; + .lexical-dialog-actions { + display: flex; + font-size: var(--text-x-small); + flex: 1 1 0%; + gap: var(--inline-space-half); + margin-block-start: var(--block-space-half); + + .btn { + --radius: 0.3em; + + inline-size: 100%; + justify-content: center; + + &:is([type="submit"]) { + --btn-background: var(--card-color, var(--color-link)); + --btn-color: var(--color-ink-inverted); + --outline-color: var(--card-color, var(--color-link)); + } } - } -} -.lexical-dialog-actions { - display: flex; - font-size: var(--text-x-small); - flex: 1 1 0%; - gap: var(--inline-space-half); - margin-block-start: var(--block-space-half); - - .btn { - --radius: 0.3em; - - inline-size: 100%; - justify-content: center; - - &:is([type="submit"]) { - --btn-background: var(--card-color, var(--color-link)); - --btn-color: var(--color-ink-inverted); - --outline-color: var(--card-color, var(--color-link)); + span { + inline-size: 100%; } } - span { - inline-size: 100%; - } -} + .lexical-editor__content { + --outline-size: max(2px, 0.08em); -.lexical-editor__content { - --outline-size: max(2px, 0.08em); + margin: var(--block-space-half) 0; + min-block-size: calc(7lh + var(--block-space)); + outline: 0; + padding: var(--block-space-half) var(--inline-space); - margin: var(--block-space-half) 0; - min-block-size: calc(7lh + var(--block-space)); - outline: 0; - padding: var(--block-space-half) var(--inline-space); + * { + &:first-child { + margin-block-start: 0; + } - * { - &:first-child { - margin-block-start: 0; - } - - &:last-child { - margin-block-end: 0; - } - } -} - -.lexical-editor--drag-over { - background-color: var(--color-selected); - border-radius: 4px; - outline: 2px dashed var(--color-selected-dark); -} - -lexical-toolbar { - background-color: inherit; - border-block-end: 1px solid var(--color-ink-light); - color: currentColor; - display: flex; - font-size: inherit; - margin: 0; - max-inline-size: 100%; - padding: 0.2em 0; - position: relative; - - dialog { - background-color: var(--color-canvas); - border: 1px solid var(--color-ink-lighter); - border-radius: 0.5em; - box-shadow: var(--shadow); - color: var(--color-ink); - padding: var(--block-space) calc(var(--inline-space) * 1.5); - position: absolute; - z-index: 1; - - .input[type="url"] { - min-inline-size: 30ch; + &:last-child { + margin-block-end: 0; + } } } - > button { - aspect-ratio: 4/3.5; - appearance: none; - background-color: transparent; - block-size: 2em; - border: none; - border-radius: 0.2em; + .lexical-editor--drag-over { + background-color: var(--color-selected); + border-radius: 4px; + outline: 2px dashed var(--color-selected-dark); + } + + lexical-toolbar { + background-color: inherit; + border-block-end: 1px solid var(--color-ink-light); color: currentColor; - cursor: pointer; - display: grid; + display: flex; font-size: inherit; - inline-size: auto; - place-items: center; - transition: background-color 300ms ease; + margin: 0; + max-inline-size: 100%; + padding: 0.2em 0; + position: relative; - svg { - -webkit-touch-callout: none; - block-size: 0.85em; - fill: currentColor; - grid-area: 1/1; + dialog { + background-color: var(--color-canvas); + border: 1px solid var(--color-ink-lighter); + border-radius: 0.5em; + box-shadow: var(--shadow); + color: var(--color-ink); + padding: var(--block-space) calc(var(--inline-space) * 1.5); + position: absolute; + z-index: 1; + + .input[type="url"] { + min-inline-size: 30ch; + } + } + + > button { + aspect-ratio: 4/3.5; + appearance: none; + background-color: transparent; + block-size: 2em; + border: none; + border-radius: 0.2em; + color: currentColor; + cursor: pointer; + display: grid; + font-size: inherit; inline-size: auto; - user-select: none; - } + place-items: center; + transition: background-color 300ms ease; - &:is(:focus, :hover) { - background-color: var(--color-ink-lighter); - box-shadow: none; - } + svg { + -webkit-touch-callout: none; + block-size: 0.85em; + fill: currentColor; + grid-area: 1/1; + inline-size: auto; + user-select: none; + } - &:is(:active) { - background-color: var(--color-selected); + &:is(:focus, :hover) { + background-color: var(--color-ink-lighter); + box-shadow: none; + } + + &:is(:active) { + background-color: var(--color-selected); + } } } -} -/* Debug styles by Jorge */ -.lexical-prompt-menu { - background: white; - border: 2px solid black; - list-style: none; + /* Prompt + /* ------------------------------------------------------------------------ */ - margin: 0; - padding: 0; - min-height: 100px; - min-width: 300px; + .lexical-prompt-menu { + --lexical-prompt-avatar-size: 24px; + --lexical-prompt-min-height: 5lh; + --lexical-prompt-min-width: 20ch; + --lexical-prompt-padding: 0.5ch; - visibility: hidden; + background-color: var(--color-canvas); + border-radius: calc(var(--lexical-prompt-padding) * 2); + box-shadow: var(--shadow); + font-size: var(--text-small); + list-style: none; + margin: 0; + min-block-size: var(--lexical-prompt-min-height); + min-inline-size: var(--lexical-prompt-min-width); + padding: var(--lexical-prompt-padding); + visibility: hidden; + } - &.lexical-prompt-menu--visible { + .lexical-prompt-menu--visible { visibility: initial; } - [aria-selected] { - border: 1px solid red; - } - .lexical-prompt-menu__item { + align-items: center; + border-radius: 0.5ch; cursor: pointer; + display: flex; + gap: var(--lexical-prompt-padding); + padding: var(--lexical-prompt-padding); + + &[aria-selected] { + background-color: var(--color-ink-lighter); + } + + img { + block-size: var(--lexical-prompt-avatar-size); + border-radius: 50%; + flex-shrink: 0; + inline-size: var(--lexical-prompt-avatar-size); + margin: 0; + } + } + + .attachment--custom.node--selected { + box-shadow: 0 0 0 var(--hover-size) var(--hover-color); } } - -.attachment--custom.node--selected { - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); -} diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css index 1652b4cbb..89357b036 100644 --- a/app/assets/stylesheets/rich-text-content.css +++ b/app/assets/stylesheets/rich-text-content.css @@ -340,10 +340,14 @@ white-space: normal; } - .attachment--custom, .lexical-prompt-menu__item, action-text-attachment { + .attachment--custom, + action-text-attachment { + --attachment-image-size: 24px; + img { + block-size: var(--attachment-image-size); display: inline; - width: 24px; + inline-size: var(--attachment-image-size); } } } From 188d5266bc0f850ab907bacf9a29f022b897312d Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 19 Jun 2025 13:51:14 -0500 Subject: [PATCH 09/67] Needs overflow to contain `code` elements --- app/assets/stylesheets/cards.css | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index b06987c19..a84ca00b3 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -88,6 +88,7 @@ .card__content { flex: 2 1 auto; max-inline-size: 100%; + overflow: hidden; } .card__description { From 123b7de0892b9422dc6abee81912b372e450612e Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 19 Jun 2025 14:05:41 -0500 Subject: [PATCH 10/67] Style inserted mentions --- app/assets/stylesheets/actiontext-lexical.css | 2 -- app/assets/stylesheets/rich-text-content.css | 9 +++++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css index ec2cfecb3..8ce554b6d 100644 --- a/app/assets/stylesheets/actiontext-lexical.css +++ b/app/assets/stylesheets/actiontext-lexical.css @@ -145,7 +145,6 @@ .lexical-prompt-menu { --lexical-prompt-avatar-size: 24px; - --lexical-prompt-min-height: 5lh; --lexical-prompt-min-width: 20ch; --lexical-prompt-padding: 0.5ch; @@ -155,7 +154,6 @@ font-size: var(--text-small); list-style: none; margin: 0; - min-block-size: var(--lexical-prompt-min-height); min-inline-size: var(--lexical-prompt-min-width); padding: var(--lexical-prompt-padding); visibility: hidden; diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css index 89357b036..d96e76d11 100644 --- a/app/assets/stylesheets/rich-text-content.css +++ b/app/assets/stylesheets/rich-text-content.css @@ -342,11 +342,16 @@ .attachment--custom, action-text-attachment { - --attachment-image-size: 24px; + --attachment-image-size: 1em; + + align-items: center; + display: inline-flex; + gap: 0.25ch; + vertical-align: bottom; img { block-size: var(--attachment-image-size); - display: inline; + border-radius: 50%; inline-size: var(--attachment-image-size); } } From 36c3b58558f8768b8d405888a4aa0c2e6add827f Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 19 Jun 2025 14:17:52 -0500 Subject: [PATCH 11/67] Adjust layout to keep items 3-up --- app/assets/stylesheets/buttons.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index d28368044..fc708ae10 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -227,7 +227,7 @@ } .btn__group--chunky { - --gap: 0.2em; + --gap: 3px; gap: var(--gap); margin: var(--block-space-half) auto calc(var(--block-space-half) / 2); @@ -237,11 +237,12 @@ align-content: end; aspect-ratio: 5/3; - flex-basis: calc(33% - var(--gap) / 2); + flex-basis: calc((100% - var(--gap) * 2) / 3); flex-direction: column; font-size: var(--text-small); line-height: 1; justify-content: center; + overflow: hidden; position: relative; row-gap: 0.3lh; text-align: center; @@ -260,6 +261,7 @@ span { display: flex; + text-wrap: nowrap; } } } From ac09940509921cc5a4cf22645b75c6b24540d6b7 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 19 Jun 2025 14:20:07 -0500 Subject: [PATCH 12/67] This isn't a generic component, change to proper namespace --- app/assets/stylesheets/buttons.css | 40 ------------------------ app/assets/stylesheets/fizzy-menu.css | 40 ++++++++++++++++++++++++ app/views/events/filter/_header.html.erb | 2 +- 3 files changed, 41 insertions(+), 41 deletions(-) diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index fc708ae10..4c6e84874 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -225,45 +225,5 @@ inline-size: 100%; } } - - .btn__group--chunky { - --gap: 3px; - - gap: var(--gap); - margin: var(--block-space-half) auto calc(var(--block-space-half) / 2); - - .btn { - --btn-border-radius: 0.4em; - - align-content: end; - aspect-ratio: 5/3; - flex-basis: calc((100% - var(--gap) * 2) / 3); - flex-direction: column; - font-size: var(--text-small); - line-height: 1; - justify-content: center; - overflow: hidden; - position: relative; - row-gap: 0.3lh; - text-align: center; - - kbd { - border: none; - box-shadow: none; - inset: 0.66em 0.33em auto auto; - opacity: 0.5; - position: absolute; - } - - .icon { - --icon-size: 2em !important; - } - - span { - display: flex; - text-wrap: nowrap; - } - } - } } diff --git a/app/assets/stylesheets/fizzy-menu.css b/app/assets/stylesheets/fizzy-menu.css index 8e68174bb..aac5c96ed 100644 --- a/app/assets/stylesheets/fizzy-menu.css +++ b/app/assets/stylesheets/fizzy-menu.css @@ -25,4 +25,44 @@ margin-block-end: 0.2em; margin-inline-end: 0.8ch; } +} + +.fizzy-menu__hotkeys { + --gap: 3px; + + gap: var(--gap); + margin: var(--block-space-half) auto calc(var(--block-space-half) / 2); + + .btn { + --btn-border-radius: 0.4em; + + align-content: end; + aspect-ratio: 5/3; + flex-basis: calc((100% - var(--gap) * 2) / 3); + flex-direction: column; + font-size: var(--text-small); + line-height: 1; + justify-content: center; + overflow: hidden; + position: relative; + row-gap: 0.3lh; + text-align: center; + + kbd { + border: none; + box-shadow: none; + inset: 0.66em 0.33em auto auto; + opacity: 0.5; + position: absolute; + } + + .icon { + --icon-size: 2em !important; + } + + span { + display: flex; + text-wrap: nowrap; + } + } } \ No newline at end of file diff --git a/app/views/events/filter/_header.html.erb b/app/views/events/filter/_header.html.erb index 1d5c58717..1b248ad08 100644 --- a/app/views/events/filter/_header.html.erb +++ b/app/views/events/filter/_header.html.erb @@ -1,4 +1,4 @@ -
+
<%= link_to root_path, class: "btn popup__group borderless", data: { value: "home", filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.1@document->hotkey#click keydown.shift+1@document->hotkey#click" } do %> <%= icon_tag "home" %> Home From c9db74bb6fe883b5ec64521e10037d498d5fb76b Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 19 Jun 2025 14:22:37 -0500 Subject: [PATCH 13/67] Style the selected state --- app/assets/stylesheets/actiontext-lexical.css | 4 -- app/assets/stylesheets/rich-text-content.css | 54 ++++++++++++------- 2 files changed, 34 insertions(+), 24 deletions(-) diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css index 8ce554b6d..f68c1c833 100644 --- a/app/assets/stylesheets/actiontext-lexical.css +++ b/app/assets/stylesheets/actiontext-lexical.css @@ -183,8 +183,4 @@ margin: 0; } } - - .attachment--custom.node--selected { - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); - } } diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css index d96e76d11..897ab0127 100644 --- a/app/assets/stylesheets/rich-text-content.css +++ b/app/assets/stylesheets/rich-text-content.css @@ -329,30 +329,44 @@ } } } - } - /* Debug styles by Jorge */ - /* Custom attachments such as mentions, etc. */ - .attachment--custom { - display: inline; - padding: 0; - margin: 0; - white-space: normal; - } + /* Custom attachments such as mentions, etc. */ + .attachment--custom { + display: inline; + padding: 0; + margin: 0; + white-space: normal; + } - .attachment--custom, - action-text-attachment { - --attachment-image-size: 1em; + .attachment--custom, + action-text-attachment { + --attachment-image-size: 1em; + --attachment-selected-color: oklch(var(--lch-blue-dark)); - align-items: center; - display: inline-flex; - gap: 0.25ch; - vertical-align: bottom; + align-items: center; + display: inline-flex; + gap: 0.25ch; + position: relative; + vertical-align: bottom; - img { - block-size: var(--attachment-image-size); - border-radius: 50%; - inline-size: var(--attachment-image-size); + lexical-editor & { + cursor: pointer; + } + + 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); + } } } } From b0f3404eb8ac59f0d543ee6833c2bfc70d4fb83c Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 19 Jun 2025 14:27:55 -0500 Subject: [PATCH 14/67] Add z-index to the menu --- app/assets/stylesheets/actiontext-lexical.css | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css index f68c1c833..27e1286a2 100644 --- a/app/assets/stylesheets/actiontext-lexical.css +++ b/app/assets/stylesheets/actiontext-lexical.css @@ -157,6 +157,7 @@ min-inline-size: var(--lexical-prompt-min-width); padding: var(--lexical-prompt-padding); visibility: hidden; + z-index: var(--z-popup); } .lexical-prompt-menu--visible { From 6946c1d6d5e9b83e2ee62239a8d1fbf94bbbaa7c Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 19 Jun 2025 14:40:52 -0500 Subject: [PATCH 15/67] Set `@layer` --- app/assets/stylesheets/fizzy-menu.css | 116 +++++++++++++------------- 1 file changed, 59 insertions(+), 57 deletions(-) diff --git a/app/assets/stylesheets/fizzy-menu.css b/app/assets/stylesheets/fizzy-menu.css index aac5c96ed..6dffe739a 100644 --- a/app/assets/stylesheets/fizzy-menu.css +++ b/app/assets/stylesheets/fizzy-menu.css @@ -1,68 +1,70 @@ -.fizzy-dialog { - --panel-border-color: var(--color-selected-dark); - --panel-border-radius: 1.4em; +@layer components { + .fizzy-dialog { + --panel-border-color: var(--color-selected-dark); + --panel-border-radius: 1.4em; - box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%), - 0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%), - 0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%), - 0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%); - z-index: 5; -} - -.fizzy-menu { - --input-border-color: var(--color-selected-dark); - --input-padding: 0.2em 2em 0.2em 0.9em; - - box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%), - 0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%), - 0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%), - 0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%); - margin-block-start: 0.1em; - - svg { - block-size: auto; - inline-size: 1.3em; - margin-block-end: 0.2em; - margin-inline-end: 0.8ch; + box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%), + 0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%), + 0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%), + 0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%); + z-index: 5; } -} -.fizzy-menu__hotkeys { - --gap: 3px; + .input:is(.fizzy-menu) { + --input-border-color: var(--color-selected-dark); + --input-padding: 0.2em 2em 0.2em 0.9em; - gap: var(--gap); - margin: var(--block-space-half) auto calc(var(--block-space-half) / 2); + box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%), + 0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%), + 0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%), + 0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%); + margin-block-start: 0.1em; - .btn { - --btn-border-radius: 0.4em; - - align-content: end; - aspect-ratio: 5/3; - flex-basis: calc((100% - var(--gap) * 2) / 3); - flex-direction: column; - font-size: var(--text-small); - line-height: 1; - justify-content: center; - overflow: hidden; - position: relative; - row-gap: 0.3lh; - text-align: center; - - kbd { - border: none; - box-shadow: none; - inset: 0.66em 0.33em auto auto; - opacity: 0.5; - position: absolute; + svg { + block-size: auto; + inline-size: 1.3em; + margin-block-end: 0.2em; + margin-inline-end: 0.8ch; } + } - .icon { - --icon-size: 2em !important; - } + .fizzy-menu__hotkeys { + --gap: 3px; - span { - display: flex; - text-wrap: nowrap; + gap: var(--gap); + margin: var(--block-space-half) auto calc(var(--block-space-half) / 2); + + .btn { + --btn-border-radius: 0.4em; + + align-content: end; + aspect-ratio: 5/3; + flex-basis: calc((100% - var(--gap) * 2) / 3); + flex-direction: column; + font-size: var(--text-small); + line-height: 1; + justify-content: center; + overflow: hidden; + position: relative; + row-gap: 0.3lh; + text-align: center; + + kbd { + border: none; + box-shadow: none; + inset: 0.66em 0.33em auto auto; + opacity: 0.5; + position: absolute; + } + + .icon { + --icon-size: 2em !important; + } + + span { + display: flex; + text-wrap: nowrap; + } } } } \ No newline at end of file From 5163382bee841f2656404c9b19112d46e134ee22 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 19 Jun 2025 15:02:24 -0500 Subject: [PATCH 16/67] Avoid visits to the card when marking as read --- app/helpers/notifications_helper.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/helpers/notifications_helper.rb b/app/helpers/notifications_helper.rb index 4638e0590..d36a034ad 100644 --- a/app/helpers/notifications_helper.rb +++ b/app/helpers/notifications_helper.rb @@ -35,7 +35,7 @@ module NotificationsHelper button_to read_notification_path(notification), class: "card__notification-unread-indicator btn btn--circle borderless", title: "Mark as read", - data: { turbo_frame: "_top" } do + data: { action: "form#submit:stop", controller: "form", form_target: "submit", turbo_frame: "_top" } do concat(icon_tag("remove-med")) concat(tag.span("Mark as read", class: "for-screen-reader")) end From 0d03c4027cfb42d0f04ef1306db24662712fda16 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 19 Jun 2025 15:09:54 -0500 Subject: [PATCH 17/67] Clearer put before nested selectors --- app/assets/stylesheets/popup.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index d450a46a2..6b9655fe6 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -120,11 +120,11 @@ .popup__new { --btn-icon-size: 1em; + padding-inline-start: var(--inline-space-half); + .icon { margin-inline-end: 0.5em; } - - padding-inline-start: var(--inline-space-half); } .popup__title { From 87f70f93c4e90b3987c559ece2cbb3c200f875f3 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 19 Jun 2025 15:33:04 -0500 Subject: [PATCH 18/67] Differentiate hover and select states --- app/assets/stylesheets/actiontext-lexical.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css index 27e1286a2..5e1ab771e 100644 --- a/app/assets/stylesheets/actiontext-lexical.css +++ b/app/assets/stylesheets/actiontext-lexical.css @@ -172,8 +172,16 @@ gap: var(--lexical-prompt-padding); padding: var(--lexical-prompt-padding); + &:hover { + background-color: var(--color-selected); + } + &[aria-selected] { - background-color: var(--color-ink-lighter); + box-shadow: 0 0 0 var(--hover-size) var(--color-selected-dark) inset; + + &:hover { + --hover-size: 0; + } } img { From 9553a75ea95c82496f7dd5504cf1248c49ba1c21 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 19 Jun 2025 17:56:21 -0500 Subject: [PATCH 19/67] Adjust styles when footer is present --- app/assets/stylesheets/popup.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index 6b9655fe6..13c426ecf 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -1,7 +1,7 @@ @layer components { .popup { --panel-border-radius: 0.5em; - --panel-padding: var(--block-space) var(--block-space) 0 var(--block-space); + --panel-padding: var(--block-space); --panel-size: auto; inline-size: auto; @@ -18,6 +18,10 @@ display: flex; } + &:has(.popup__footer) { + --panel-padding: var(--block-space) var(--block-space) 0 var(--block-space) + } + #header:has(&) { max-inline-size: 100vw; position: relative; @@ -37,8 +41,9 @@ .popup__footer { background-color: var(--color-canvas); + border-block-start: 1px solid var(--color-ink-lighter); inset: auto 0 0 0; - padding: var(--block-space); + padding: var(--block-space-half) var(--inline-space) var(--block-space); position: sticky; z-index: 1; } From cb4b0eebcaa6ee072c641f09e4f5632bb45a1e7f Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 19 Jun 2025 17:56:45 -0500 Subject: [PATCH 20/67] These are inline, they should be relative to the enclosing text size --- app/assets/stylesheets/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index 425ff7156..0ddaf0c8c 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -90,7 +90,7 @@ border-radius: 0.3em; box-shadow: 0 0.1em 0 currentColor; font-family: var(--font-mono); - font-size: var(--text-x-small); + font-size: 0.8em; font-weight: 600; opacity: 0.7; padding: 0 0.4em; From 4edb5e5a0106363386ce50464c04980c01c9903d Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 19 Jun 2025 18:13:24 -0500 Subject: [PATCH 21/67] Try plain color items --- app/assets/stylesheets/fizzy-menu.css | 5 +++-- app/assets/stylesheets/popup.css | 6 +++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/fizzy-menu.css b/app/assets/stylesheets/fizzy-menu.css index 6dffe739a..813a33380 100644 --- a/app/assets/stylesheets/fizzy-menu.css +++ b/app/assets/stylesheets/fizzy-menu.css @@ -29,16 +29,17 @@ } .fizzy-menu__hotkeys { - --gap: 3px; + --gap: 8px; gap: var(--gap); - margin: var(--block-space-half) auto calc(var(--block-space-half) / 2); + margin: var(--block-space) auto calc(var(--block-space-half) / 2); .btn { --btn-border-radius: 0.4em; align-content: end; aspect-ratio: 5/3; + background-color: var(--color-ink-lightest); flex-basis: calc((100% - var(--gap) * 2) / 3); flex-direction: column; font-size: var(--text-small); diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index 13c426ecf..7619131c7 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -49,7 +49,8 @@ } .popup__group { - background: var(--color-ink-lightest); + background: transparent; + border-radius: 0.3em; max-inline-size: 100%; padding-inline: var(--inline-space); @@ -66,13 +67,12 @@ } &[aria-selected] { - border-radius: 0.3em; box-shadow: 0 0 0 var(--hover-size) var(--color-selected-dark) inset; } } .popup__item { - --btn-background: var(--color-ink-lightest); + --btn-background: transparent; --btn-border-radius: 0.3em; --btn-border-size: 0; --btn-font-weight: 500; From 8b9ee506a53b5a704317f6dcfbf9336227e63916 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 19 Jun 2025 20:24:02 -0500 Subject: [PATCH 22/67] DRY up, tweak look --- app/assets/stylesheets/fizzy-menu.css | 1 + app/assets/stylesheets/popup.css | 12 +++++++++++- app/views/cards/index/_header.html.erb | 8 ++++---- app/views/cards/show/_collections.html.erb | 2 +- app/views/cards/show/_header.html.erb | 6 +++--- app/views/events/_filter.html.erb | 8 ++++---- 6 files changed, 24 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/fizzy-menu.css b/app/assets/stylesheets/fizzy-menu.css index 813a33380..9d7ac4ca9 100644 --- a/app/assets/stylesheets/fizzy-menu.css +++ b/app/assets/stylesheets/fizzy-menu.css @@ -40,6 +40,7 @@ align-content: end; aspect-ratio: 5/3; background-color: var(--color-ink-lightest); + border-radius: 0.5em; flex-basis: calc((100% - var(--gap) * 2) / 3); flex-direction: column; font-size: var(--text-small); diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index 7619131c7..46a15941d 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -42,9 +42,12 @@ .popup__footer { background-color: var(--color-canvas); border-block-start: 1px solid var(--color-ink-lighter); - inset: auto 0 0 0; + font-size: var(--text-small); + inset: auto 0 0; + margin-inline: calc(var(--block-space) * -1); padding: var(--block-space-half) var(--inline-space) var(--block-space); position: sticky; + text-align: center; z-index: 1; } @@ -135,6 +138,13 @@ .popup__title { font-weight: 800; } + + .popup__group-title { + font-size: var(--text-small); + margin-block: var(--block-space-half); + padding-inline: var(--inline-space); + text-transform: uppercase; + } } .popup--animated { diff --git a/app/views/cards/index/_header.html.erb b/app/views/cards/index/_header.html.erb index 2eb65dbac..b457b17ee 100644 --- a/app/views/cards/index/_header.html.erb +++ b/app/views/cards/index/_header.html.erb @@ -29,24 +29,24 @@ type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> <%= render "events/filter/header" %> <% if Current.user.collections.many? %> - Collections + Collections <%= render "cards/index/collections_filter", filter: filter %> <% end %> - Tags + Tags
<%= render partial: "events/filter/tag", collection: Tag.all.alphabetically, as: :tag %>
- People + People
<%= render partial: "events/filter/user", collection: User.active.alphabetically, as: :user %>
<% if platform.desktop? %> -