Edit text field in modal

app/assets/stylesheets/characters.css

@@ -89,6 +89,7 @@
     max-width: 20em;
     overflow-y: scroll;
     font-size: .8em;
+    align-content: center;
   }
   input[type=submit] {
     width: 100%;
@@ -96,6 +97,9 @@
     height: auto;
     padding: auto;
   }
+  a:link, a:visited {
+    text-decoration: none;
+  }
 }
 
 .feature-edit-buttons {

app/assets/stylesheets/forms.css

@@ -46,8 +46,21 @@ form.stat-form {
   flex-direction: column;
 }
 
-.feature-box form.stat-form {
+.feature-box trix-toolbar {
+  display: block;
+}
+
+.feature-box form.stat-form, .feature-box form.text-field-form {
   display: block;
   margin: 1em auto;
   width: fit-content;
 }
+
+.feature-box form.text-field-form {
+  width: 100%;
+  .trix-content, .trix-editor {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 1em;
+  }
+}

app/assets/stylesheets/layout.css

@@ -113,7 +113,7 @@ hr {
   z-index: 5000;
 }
 
-#modal div {
+#modal > div {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -133,6 +133,10 @@ hr {
   text-align: center;
 }
 
+.feature-box trix-editor {
+  grid-column: 1/3;
+}
+
 .nf {
   color: var(--text-color);
 }
@@ -143,8 +147,3 @@ hr {
   cursor: pointer;
   box-shadow: 0 0 5px var(--shadow-color);
 }
-
-.roll-button::before {
-  content: "YO";
-  background-color: red;
-}

app/controllers/text_fields_controller.rb

@@ -3,7 +3,7 @@
 class TextFieldsController < ApplicationController
   before_action :set_section, only: [ :new, :create ]
   before_action :set_character, only: [ :new, :create ]
-  before_action :set_text_field, only: [ :update, :destroy ]
+  before_action :set_text_field, only: [ :show, :update, :destroy ]
 
   def new
     @text_field = @section.text_fields.new
@@ -18,6 +18,9 @@ class TextFieldsController < ApplicationController
     end
   end
 
+  def show
+  end
+
   def update
     @text_field.update(text_field_params)
   end

app/models/text_field.rb

@@ -3,6 +3,7 @@
 class TextField < ApplicationRecord
   has_one :character_sheet_feature, as: :featurable, dependent: :destroy
   has_one :character_sheet_section, through: :character_sheet_feature
+  has_one :character, through: :character_sheet_section
   accepts_nested_attributes_for :character_sheet_feature, allow_destroy: true
 
   has_rich_text :content

app/views/text_fields/_text_field.html.erb

@@ -17,7 +17,9 @@
       <%= f.submit t(".save") %>
     <% end %>
   <% else %>
-    <%= text_field.content %>
+    <%= link_to text_field, data: { turbo_frame: :modal } do %>
+      <%= text_field.content %>
+    <% end %>
   <% end %>
 </div>
 

app/views/text_fields/show.html.erb

@@ -0,0 +1,13 @@
+<%= turbo_frame_tag :modal do %>
+  <div class="feature-box text-field">
+    <%= icon_link_to "fa-close",
+          table_character_character_sheet_sections_path(@text_field.character.table, @text_field.character),
+      class: "icon-link" %>
+    <h2><%= @text_field.name %></h2>
+    <%= form_with model: @text_field, class: "text-field-form",
+      data: { controller: "dice-roll modal-closer", action: "modal-closer#closeModal" } do |f| %>
+      <%= f.rich_text_area :content %>
+      <%= f.submit t(".save") %>
+    <% end %>
+  </div>
+<% end %>

config/locales/en.yml

@@ -217,6 +217,8 @@ en:
       delete: Delete text field
       confirm_delete: Are you sure you want to delete %{name}?
       save: Save
+    show:
+      save: Save
     new:
       create_text_field: Create text field
   users:

config/routes.rb

@@ -38,7 +38,7 @@ Rails.application.routes.draw do
     resources :events, only: [ :index ]
     resources :table_invites, only: [ :new, :create ]
   end
-  resources :text_fields, only: [ :update, :destroy ]
+  resources :text_fields, only: [ :show, :update, :destroy ]
 
   resources :admin, only: [ :index ]
   namespace :admin do