Minimalist UI for prov and messages (#824)

pulibrary · Jan 9, 2023 · 8d549c3 · 8d549c3
1 parent d315513
commit 8d549c3
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 49 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -163,6 +163,7 @@ details {
   }
 
   summary.show-changes {
+    font-weight: normal;
     &::after {
       content: 'Show Changes';
     }
@@ -206,4 +207,29 @@ dl {
   dd {
     grid-column-start: 2;
   }
+}
+
+ul.beads {
+  padding-left: 1em;
+  margin-left: 1em;
+  border-left: 2px solid;
+  li {
+    list-style: none;
+  }
+  li::before {
+      content: "⦁";
+      margin-left: -1em;
+      font-size: 150%;
+  }
+}
+
+ul.no-beads {
+  padding-left: 0;
+  li {
+    list-style: none;
+    border: 1px solid #dddcdc;
+    border-radius: .25rem;
+    margin-bottom: 5px;
+    padding: 5px;
+  }
 }
diff --git a/app/models/work_activity.rb b/app/models/work_activity.rb
@@ -112,15 +112,18 @@ def comment_timestamp_html
       "at #{event_timestamp}" if comment_event_type?
     end
 
-    def event_html(children:)
+    def title_html
       <<-HTML
-<div class="activity-history-#{event_type}-title">
+<span class="activity-history-title">
   #{event_timestamp_html}
   #{created_by_user_html}
   #{comment_timestamp_html}
-</div>
-<span class="comment-html">#{children.chomp}</span>
-    HTML
+</span>
+      HTML
+    end
+
+    def event_html(children:)
+      title_html + "<span class='comment-html'>#{children.chomp}</span>"
     end
 
     # Returns the message formatted to display _file_ changes that were logged as an activity
@@ -141,19 +144,17 @@ def file_changes_html
 
     # Returns the message formatted to display _metadata_ changes that were logged as an activity
     def metadata_changes_html
-      text = ""
+      html = title_html
       changes = JSON.parse(message)
 
       changes.keys.each do |field|
         change = changes[field]
         mapped = change.map { |value| change_value_html(value) }
         values = mapped.join
-
-        children = "<details><summary class='show-changes'>#{field}</summary>#{values}</details>"
-        text += event_html(children: children)
+        html += "<details class='comment-html'><summary class='show-changes'>#{field}</summary>#{values}</details>"
       end
 
-      text
+      html
     end
 
     # rubocop:disable Metrics/MethodLength

diff --git a/app/views/works/_work_activity.html.erb b/app/views/works/_work_activity.html.erb
@@ -1,3 +1,3 @@
-<div class="activity-history-item activity-history-<%= event_type %>-item">
+<li class="activity-history-item">
   <%= activity.to_html.html_safe %>
-</div>
+</li>
diff --git a/app/views/works/_work_activity_history.html.erb b/app/views/works/_work_activity_history.html.erb
@@ -3,21 +3,24 @@
   <% if @comments.size == 0 && !@work.submission_notes.present? %>
     No messages
   <% end %>
-
-  <% @comments.each do |activity| %>
-    <%= render partial: 'work_activity', locals: {
-      activity: activity,
-      event_type: activity.event_type
-    } %>
-  <% end %>
-  <% if @work.submission_notes.present? %>
-    <div class="activity-history-item activity-history-comment-item">
-      <div class="activity-history-comment-title">
-        Submission message
-      </div>
-      <%= @work.submission_notes %>
-    </div>
-  <% end %>
+  <ul class="no-beads">
+    <% @comments.each do |activity| %>
+      <%= render partial: 'work_activity', locals: {
+        activity: activity,
+        event_type: activity.event_type
+      } %>
+    <% end %>
+    <% if @work.submission_notes.present? %>
+      <li class="activity-history-item">
+        <span class="activity-history-title">
+          Submission message
+        </span>
+        <div>
+          <%= @work.submission_notes %>
+        </div>
+      </li>
+    <% end %>
+  </ul>
 
   <div id="new-comment-section">
     <%= form_with url: add_comment_work_path(@work) do |f| %>
@@ -36,10 +39,12 @@
   <% if @changes.size == 0 %>
     No activity
   <% end %>
-  <% @changes.each do |activity| %>
-    <%= render partial: 'work_activity', locals: {
-      activity: activity,
-      event_type: activity.event_type
-    } %>
-  <% end %>
+  <ul class="beads">
+    <% @changes.each do |activity| %>
+      <%= render partial: 'work_activity', locals: {
+        activity: activity,
+        event_type: activity.event_type
+      } %>
+    <% end %>
+  </ul>
 </div>
diff --git a/app/views/works/show.html.erb b/app/views/works/show.html.erb
@@ -12,21 +12,8 @@
     font-size: 12px;
   }
 
-  .activity-history-item {
-    border-style: solid;
-    border-width: 1px;
-    border-color: #dddcdc;
-    border-radius: .25rem;
-    margin-bottom: 5px;
-    padding-bottom: 10px;
-  }
-
-  .activity-history-comment-title {
-    background-color:#bfe9fd;
-  }
-
-  .activity-history-log-title {
-    background-color:#f4d28f;
+  .activity-history-title {
+    font-weight: bold;
   }
 
   .comment-html > p {

diff --git a/spec/system/work_edit_spec.rb b/spec/system/work_edit_spec.rb
@@ -160,7 +160,7 @@
       fill_in "title_main", with: "UPDATED" + work.resource.titles.first.title
       click_on "Save Work"
       # This depends on the timezone configured in application.rb:
-      expect(page.first(".activity-history-log-title", visible: true)).to have_content "December 31, 2021 19:00"
+      expect(page.first(".activity-history-title", visible: true)).to have_content "December 31, 2021 19:00"
     end
   end