chore(boards): UI/UX improvements + New card shortcut when pressing N (#3)

* Changes to columns width

* Changes card spacing and margins to be more compact

* Adds N shortcut to open inline card form

* Adds press N shortcut tip

* Updates board horizontal scroll speed after dragging a column

Author: viniciusoyama

app/javascript/controllers/grouping_column_controller.js

@@ -33,4 +33,11 @@ export default class extends Controller {
   closeForm() {
     this.hideInlineCardForm();
   }
+
+  nWasPressed(e) {
+    if (document.activeElement == document.body && this.element.matches(':hover')) {
+      e.preventDefault()
+      this.showInlineCardForm()
+    }
+  }
 }

app/javascript/controllers/sortable_controller.js

@@ -35,7 +35,7 @@ export default class extends Controller {
 
     if (didItemReallyMove) {
       this._performMoveRequest(evt).then(() => {
-        evt.item.scrollIntoView({ behavior: "smooth", inline: "center" })
+        evt.item.scrollIntoView({ behavior: "instant", inline: "center" })
       })
     }
   }

app/views/groupings/issues/_form.html.erb

@@ -28,6 +28,7 @@
             <div data-resizable-input-target="replica" class=" text-base p-2 whitespace-pre-line"></div>
 
             <%= f.text_area :title, required: true,
+              autocomplete: 'off',
               autofocus: true,
               class: "text-base p-2 input-primary absolute w-full left-0 top-0 right-0 bottom-0 overflow-y-hidden",
               "data-resizable-input-target": "input"

app/views/visualizations/_card.html.erb

@@ -1,24 +1,20 @@
 <li class="snap-center cpy-card"
   id="<%= dom_id(issue) %>"
   data-grouping-column-target="card">
-  <%= link_to edit_grouping_issue_path(grouping, issue), class: "group flex flex-col gap-2 text-sm text-content-500 border-2 border-background-200 bg-background-50 hover:bg-background-100 hover:border-background-900 cursor-pointer shadow-sm rounded-xl card p-4", data: { turbo_frame: 'issue_form' } do %>
+  <%= link_to edit_grouping_issue_path(grouping, issue), class: "group relative flex flex-col text-sm text-content-500 border-2 border-background-200 bg-background-50 hover:bg-background-100 hover:border-background-900 cursor-pointer shadow-sm rounded-xl card p-3", data: { turbo_frame: 'issue_form' } do %>
+
+    <div class="hidden flex items-center justify-center p-2 text-xs flex group-hover:flex items-center absolute top-2 right-2 rounded-full  bg-background-50">
+      <i class="fa fa-pencil"></i>
+    </div>
 
     <h2 class="font-normal grow">
       <%= issue.title %>
     </h2>
 
-
-    <div class="flex h-2 flex-row items-stretch justify-between text-readable-content-500">
-
-      <div class="flex items-center">
-        <% if issue.description.present? %>
-          <i class="fa-solid text-xs fa-align-justify"></i>
-        <% end %>
+    <% if issue.description.present? %>
+      <div class="flex mt-2 flex-row items-stretch justify-start gap-3 text-readable-content-500">
+        <i class="fa-solid text-sm fa-align-justify"></i>
       </div>
-
-      <div class="hidden flex group-hover:flex items-center">
-        <i class="fa fa-pencil"></i>
-      </div>
-    </div>
+    <% end %>
   <% end %>
 </li>

app/views/visualizations/_column.html.erb

@@ -1,6 +1,7 @@
-<li class="basis-60 max-h-full flex flex-col shrink-0 p-2 border bg-body-contrast border-background-100 rounded-md shadow-xs snap-center cpy-grouping js-sortable-container"
+<li class="w-64 max-h-full flex flex-col shrink-0 p-2 border bg-body-contrast border-background-100 rounded-md shadow-xs snap-center cpy-grouping js-sortable-container"
   id="<%= dom_id(grouping) %>"
   data-controller="grouping-column"
+  data-action="keypress.n@window->grouping-column#nWasPressed"
   >
   <header class="flex flex-row flex-nowrap gap-x-1 mb-4 px-2 relative" data-controller="dropdown">
     <%= link_to edit_visualization_grouping_path(grouping.visualization_id, grouping.id), class: "grow font-semibold truncate text-readable-content-500 hover:text-readable-content-700", data: { turbo_frame: 'grouping_form' } do %>
@@ -41,7 +42,7 @@
 
   <ul
     id="<%= dom_id(grouping) %>-cards-wrapper"
-    class="flex flex-col flex-auto basis-auto flex-nowrap gap-y-2 items-stretch overflow-y-auto overflow-x-hidden scroll-smooth snap-y js-no-column-drag cpy-drop-zone"
+    class="flex flex-col flex-auto flex-nowrap gap-y-2 items-stretch overflow-y-auto overflow-x-hidden scroll-smooth snap-y js-no-column-drag cpy-drop-zone"
     data-controller="sortable"
     data-sortable-target="container"
     data-sortable-shared-group-value="cards"
@@ -56,12 +57,13 @@
   </ul>
 
   <%= render partial: 'visualizations/_column/inline_card_form', locals: { grouping: } %>
-  <button class="cpy-inline-create-button flex flex-row items-center mt-4 p-2 hover:bg-background-100 rounded-md"
+  <button class="cpy-inline-create-button group flex flex-row items-center mt-4 p-2 hover:bg-background-100 rounded-md"
     data-grouping-column-target="showFormButton"
     data-action="click->grouping-column#showInlineCardForm">
     <i class="fa-solid fa-plus mr-2"></i>
     <p class="grow text-left">
       <%= t('visualizations.column_menu.create_issue') %>
     </p>
+    <span class="group-hover:flex hidden text-xs font-medium ml-2"><%= t("actions.press") %> N</span>
   </button>
 </li>

app/views/visualizations/_column/_inline_card_form.html.erb

@@ -9,7 +9,10 @@
   }) do |f| %>
 
   <div class="mb-2 w-full">
-    <%= f.text_field :title, required: true, class: "border-2 border-primary-500 focus:border-primary-500 active:border-primary-500 hover:border-primary-500 bg-primary-50 p-4 rounded-xl text-sm w-full text-sm text-readable-content-500", id: nil %>
+    <%= f.text_field :title,
+      autocomplete: 'off',
+      required: true,
+      class: "border-2 border-primary-500 focus:border-primary-500 active:border-primary-500 hover:border-primary-500 bg-primary-50 p-4 rounded-xl text-sm w-full text-sm text-readable-content-500", id: nil %>
   </div>
 
   <div class="flex gap-2 items-stretch ">

app/views/visualizations/groupings/_form.html.erb

@@ -11,7 +11,7 @@
       </div>
     </div>
     <div class="space-y-4">
-      <%= form_for([visualization, grouping], html: { class: 'flex flex-col gap-2' }) do |f| %>
+      <%= form_for([visualization, grouping], html: { autocomplete: 'off', class: 'flex flex-col gap-2' }) do |f| %>
         <% if grouping.errors.any? %>
           <div class="flex rounded-md w-full border-l-6 border-alert-500 bg-alert-500 bg-opacity-[15%] px-4 py-1 mb-5 shadow-sm md:p-4 text-sm text-alert-500">
             <%= grouping.errors.full_messages.to_sentence.capitalize %>

app/views/visualizations/show.html.erb

@@ -19,7 +19,7 @@
         >
       <%= render partial: 'visualizations/column', collection: @visualization.groupings, as: :grouping %>
 
-      <li class="order-last basis-60 shrink-0 snap-center sm:snap-start" id="js-create-new-column">
+      <li class="order-last w-64 shrink-0 snap-center sm:snap-start" id="js-create-new-column">
         <%= link_to new_visualization_grouping_path(@visualization), class: "border text-primary-400 bg-primary-50 border border-primary-100  hover:text-primary-500 hover:border-primary-100 hover:bg-primary-100 rounded-md shadow-xs p-2 shrink-0 mx-2 flex flex-col max-h-full", data: { turbo_frame: 'grouping_form' } do %>
           <div class="flex items-center justify-between">
             <h2 class="grow font-semibold truncate">

config/locales/app.en.yml

@@ -52,6 +52,7 @@ en:
     filter: "Filter"
     clear_filter: "clear filter"
     preview: "Preview"
+    press: "Press"
   flash:
     change_success: "Change successfully made."
     change_error: "Change could not be made."

config/locales/app.pt-BR.yml

@@ -53,6 +53,7 @@ pt-BR:
     filter: "Filtrar"
     clear_filter: "Limpar filtro"
     preview: "Pré-visualização"
+    press: "Pressione"
   flash:
     change_success: "Alteração feita com sucesso."
     change_error: "Houve um erro na hora de realizar a alteração."