Various UI Updates/Cleanup (#34)

Co-authored-by: Scott Miller <[email protected]>

app/assets/stylesheets/application.tailwind.css

@@ -30,7 +30,7 @@
   }
 
   .alert-success {
-    @apply bg-green-300 rounded text-green-900 outline-1 outline-green-900 p-4;
+    @apply bg-green-300 rounded text-green-900 border-1 border-green-900 p-4;
   }
 
   .pagy-nav {

app/helpers/application_helper.rb

@@ -2,25 +2,36 @@ module ApplicationHelper
 
   include Pagy::Frontend
 
-  # Map flash error types to specific bs classes
-  FLASH_CLASS = {
-    notice: 'secondary',
-    alert: 'warning',
-    error: 'danger',
-    success: 'success'
-  }
+  # Map flash error types to specific classes
+  FLASH_COLOR = {
+    notice: 'slate',
+    alert: 'red',
+    error: 'orange',
+    success: 'green'
+  }.freeze
 
   def flash_messages(flash)
     return if flash.blank?
 
     flash.map do |type, msg| 
-      content_tag :div, class: "alert-#{FLASH_CLASS[type.to_sym]}" do
-        concat msg
-        concat button_tag('', class: 'btn-close', data: { 'bs-dismiss': 'alert' } )
-      end
+      content_tag :div, class: "w-full mb-5", 'x-data': "{ openFlash: 1, msg: '#{msg}'}" do
+        content_tag :div, "x-if: msg" do
+          content_tag :div, class: "flex items-center justify-between px-4 py-4 rounded text-white bg-#{FLASH_COLOR[type.to_sym]}-500 border-2 border-#{FLASH_COLOR[type.to_sym]}-500" do          
+            concat msg
+            # concat :span, 'X', "x-on:click=\"msg = ''\""
+            concat close_button
+          end
+        end
+      end 
     end.join
   end
 
+  def close_button
+    content_tag :span, "x-on:click=\"msg = ''\"" do
+      "X"
+    end
+  end
+
   def logo
     concat image_tag('logo.png', class: 'h-9 w-9 float-left mr-2')
     concat content_tag(:h3, "Trustb.in", class: 'font-semibold text-gray-800 text-lg')

app/models/user.rb

@@ -3,4 +3,11 @@ class User < ApplicationRecord
   # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
   devise :database_authenticatable, :recoverable, :validatable
   has_many :snippets
+
+  def full_name
+    return "#{first_name} #{last_name}" if first_name.present? && last_name.present?
+    return "#{first_name}" if last_name.present?
+    return "#{email}" if @first_name.blank? && last_name.blank?
+    return ""
+  end
 end

app/views/admin/users/_user.html.erb

@@ -3,7 +3,7 @@
         <%= image_tag "https://source.boringavatars.com/beam/40/#{user.email}?colors=264653,2a9d8f,e9c46a,f4a261,e76f51", class: 'float-left' %>
     </div>
     <div class="w-1/2">
-        <%= "#{user.first_name} #{user.last_name}" %> (<%= user.email %>)
+        <%= "#{user.full_name}" %> (<%= user.email %>)
     </div>
     <div class="w-1/2 text-right">
         <%= link_to 'edit', edit_admin_user_path(uuid: user.uuid), class: 'btn-outline' %>

app/views/admin/users/edit.html.erb

@@ -1,3 +1,7 @@
+<%= content_tag :h4, class: 'mb-5' do %>
+  <%= "Edit \"#{@user.full_name}\"" %>
+<% end %>
+
 <%= simple_form_for(@user, url: admin_user_path(uuid: @user.uuid)) do |f| %>
     <%= render partial: 'admin/users/form', locals: { f: f } %>
     <%= f.button :submit, class: 'btn btn-primary' %> 

app/views/admin/users/new.html.erb

@@ -1,3 +1,6 @@
+<%= content_tag :h4, class: 'mb-5' do %>
+  <%= "New Team Member" %>
+<% end %>
 <%= simple_form_for @user, url: admin_users_path do |f| %>
     <%= render partial: 'admin/users/form', locals: { f: f } %>
     <%= f.button :submit, class: 'btn btn-primary' %>

app/views/snippets/_snippet.html.erb

@@ -12,7 +12,7 @@
 <div class="mb-10 align-middle float-right">
   <div class="flex align-middle space-x-2">
     <%= image_tag "https://source.boringavatars.com/beam/20/#{snippet.user.email}?colors=264653,2a9d8f,e9c46a,f4a261,e76f51" %> 
-    <span class="text-sm text-gray-500"> Added by <%= snippet.user.email %> - <%= time_ago(snippet.updated_at) %></span>
+    <span class="text-sm text-gray-500"> Added by <%= snippet.user.full_name %> - <%= time_ago(snippet.updated_at) %></span>
   </div>
 </div>
 <script>

app/views/snippets/index.html.erb

@@ -5,9 +5,4 @@
   <div class="flex w-full justify-center pt-5">
     <%== pagy_nav(@pagy) if @pagy.count > 10 %>
   </div>
-</div>
-
-
-
-
-
+</div>

app/views/snippets/new.html.erb

@@ -1,3 +1,7 @@
+<%= content_tag :h4, class: 'mb-5' do %>
+  <%= @snippet.name.present? ? "Edit \"#{@snippet.name}\"" : 'New Snippet' %>
+<% end %>
+
 <%= simple_form_for @snippet do |f| %>
 
   <style>

config/tailwind.config.js

@@ -7,6 +7,20 @@ module.exports = {
     './app/javascript/**/*.js',
     './app/views/**/*.{erb,haml,html,slim}'
   ],
+  safelist: [
+    'text-red-800',
+    'text-green-800',
+    'text-orange-800',
+    'text-slate-800',
+    'border-red-500',
+    'border-green-500',
+    'border-orange-500',
+    'border-slate-500',
+    'bg-red-500',
+    'bg-green-500',
+    'bg-orange-500',
+    'bg-slate-500'
+  ],
   theme: {
     screens: {
       sm: '480px',

db/seeds.rb

@@ -1,72 +1,18 @@
 
 user = User.create!(email: '[email protected]', password: '12345678', uuid: SecureRandom.uuid, role: 'admin')
 snippet_uuid = SecureRandom.uuid
-snippet = Snippet.create!(name: 'Ruby sample', description: 'demo of Ruby highlighting', content: "#
-# Function to evaluate a polynomial at x.  The polynomial is given
-# as a list of coefficients, from the greatest to the least.
-def polyval(x, coef)
-    sum = 0
-    coef = coef.clone           # Don't want to destroy the original
-    while true
-        sum += coef.shift       # Add and remove the next coef
-        break if coef.empty?    # If no more, done entirely.
-        sum *= x                # This happens the right number of times.
-    end
-    return sum
-end", uuid: snippet_uuid, parent_uuid: snippet_uuid, user_id: user.id, visibility: 'org', language: 'ruby')
-snippet = Snippet.create!(name: 'Ruby sample', description: 'demo of Ruby highlighting', content: "# VERSION 2
-# Function to evaluate a polynomial at x.  The polynomial is given
-# as a list of coefficients, from the greatest to the least.
-def polyval(x, coef)
-    sum = 0
-    coef = coef.clone           # Don't want to destroy the original
-    while true
-        sum += coef.shift       # Add and remove the next coef
-        break if coef.empty?    # If no more, done entirely.
-        sum *= x                # This happens the right number of times.
-    end
-    return sum
-end", uuid: SecureRandom.uuid, parent_uuid: snippet_uuid, user_id: user.id, visibility: 'org', language: 'ruby', version: 2)
+snippet = Snippet.create!(name: 'Hello World in Ruby', description: 'demo of Ruby highlighting', content: "# Hello World in Ruby
+puts \"Hello World!\"", uuid: snippet_uuid, parent_uuid: snippet_uuid, user_id: user.id, visibility: 'org', language: 'ruby')
+snippet = Snippet.create!(name: 'Hello World in Ruby 2', description: 'demo of Ruby highlighting', content: "# VERSION 2
+# Hello World in Ruby
+puts \"Hello World!\"", uuid: SecureRandom.uuid, parent_uuid: snippet_uuid, user_id: user.id, visibility: 'org', language: 'ruby', version: 2)
 snippet_uuid = SecureRandom.uuid
-snippet = Snippet.create!(name: 'Golang code', description: 'A sample of Go code', content: "// Prime Sieve in Go.
-// Taken from the Go specification.
-// Copyright © The Go Authors.
-
+snippet = Snippet.create!(name: 'Hello World in Go', description: 'A sample of Go code', content: "// Hello world in Go
 package main
 
 import \"fmt\"
 
-// Send the sequence 2, 3, 4, ... to channel 'ch'.
-func generate(ch chan<- int) {
-	for i := 2; ; i++ {
-		ch <- i  // Send 'i' to channel 'ch'
-	}
-}
-
-// Copy the values from channel 'src' to channel 'dst',
-// removing those divisible by 'prime'.
-func filter(src <-chan int, dst chan<- int, prime int) {
-	for i := range src {    // Loop over values received from 'src'.
-		if i%prime != 0 {
-			dst <- i  // Send 'i' to channel 'dst'.
-		}
-	}
-}
-
-// The prime sieve: Daisy-chain filter processes together.
-func sieve() {
-	ch := make(chan int)  // Create a new channel.
-	go generate(ch)       // Start generate() as a subprocess.
-	for {
-		prime := <-ch
-		fmt.Print(prime, \"\n\")
-		ch1 := make(chan int)
-		go filter(ch, ch1, prime)
-		ch = ch1
-	}
-}
-
 func main() {
-	sieve()
+ fmt.Printf(\"Hello World\n\")
 }
 ", uuid: snippet_uuid, parent_uuid: snippet_uuid, user_id: user.id, visibility: 'org', language: 'go')