bullet_train-themes-tester 1.0

data/app/views/themes/tester/conversations/_message.html.erb

@@ -0,0 +1,136 @@
+<% new_message ||= false %>
+<% current_author = defined?(current_user) ? current_user : send(BulletTrain::Conversations.current_participant_helper_method) %>
+<% current_user_message = message.author == current_author %>
+<% avatar = capture do %>
+  <% if message.membership %>
+    <img src="<%= membership_profile_photo_url(message.membership) %>" title="<%= message.user_name %>" alt="<%= message.user_name %>" class="w-6 h-6 rounded-full <%= current_user_message ? 'order-2' : 'order-1' %>">
+  <% elsif message.participant %>
+    <div class="<%= current_user_message ? 'order-2' : 'order-1' %>">
+      <% if BulletTrain::Conversations.respond_to?(:participant_avatar_partial) && BulletTrain::Conversations.participant_avatar_partial %>
+        <%= render BulletTrain::Conversations.participant_avatar_partial, participant: message.participant %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>
+<% next_message ||= message.next_message %>
+
+<%# A message series is a series of messages by the same user, each message within 5 minutes of the previous message.  It has nothing to do with replies and message threads %>
+<% next_message_in_series = (message.author == next_message&.author) && (message.created_at > next_message.created_at - 5.minutes) && (message.parent_message_id == next_message&.parent_message_id || message.id == next_message.parent_message_id)%>
+<% if next_message_in_series %>
+  <% avatar = nil %>
+<% end %>
+
+<%# We set this to true when rendering the messages for the reply view. All messages in the thread are shown in order without any other messages from the conversation %>
+<% show_as_thread ||= false %>
+
+<%# placeholder messages are used when displaying a reply to a message that we need to show out of order with the rest  %>
+<% placeholder_message ||= false %>
+
+<% if avatar.nil? %>
+  <% avatar = capture do %>
+    <div style="height: 24px; width: 24px;" class="<%= current_user_message ? 'order-2' : 'order-1' %>"></div>
+  <% end %>
+<% end %>
+
+<% rounding_modifier = message_corner_class(next_message_in_series, current_user_message) %>
+
+<% timestamp = next_message_in_series || show_as_thread ? '' : time_ago_in_words(message.created_at) + " ago" %>
+
+<% threaded_message = message.threaded? %>
+<% thread_started_by_current_user = message.thread_origin_user == current_author %>
+<% last_message_in_thread = !placeholder_message && threaded_message && (message.next_message.nil? || message.next_message.thread_id != message.thread_id)%>
+<% out_of_thread_message = !show_as_thread && threaded_message && message.reply? && message.previous_message != message.previous_message_in_thread %>
+<% has_replies = message.replies.any? && message.next_message == message.next_message_in_thread %>
+<% border_side = thread_started_by_current_user ? :left : :right %>
+<% show_borders = !show_as_thread && threaded_message %>
+
+<% if out_of_thread_message %>
+  <%= render 'account/shared/message', message: message.thread_origin_message, next_message: message, placeholder_message: true, show_as_thread: show_as_thread %>
+<% end %>
+
+
+<div class="chat-message"
+  <% unless show_as_thread %>
+    data-reply-target="message"
+    data-user="<%= message.author.label_string %>"
+    data-message-id="<%= message.parent_message_id || message.id %>"
+    data-action="mouseleave->reply#hideReplyButton"
+  <% end %>
+  >
+  <div class="group flex <%= 'justify-end' if current_user_message %> <%= 'opacity-20' if new_message %> items-stretch">
+    <% if show_borders %>
+      <% if (has_replies || placeholder_message) %>
+        <%= message_thread_border(side: border_side, position: :start) unless show_as_thread %>
+      <% end %>
+      <% if message.reply? && ((current_user_message && thread_started_by_current_user) || (!current_user_message && !thread_started_by_current_user) ) %>
+        <%= message_thread_border(side: border_side, position: (last_message_in_thread ? :end : :middle)) %>
+      <% end %>
+    <% end %>
+
+
+    <div class="flex flex-col <%= 'mb-0.5' if next_message_in_series %>">
+      <div class="flex items-end relative <%= 'justify-end' if current_user_message %>" data-action="<%= 'click->reply#preventDefault' if show_as_thread %>">
+        <div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 <%= current_user_message ? 'order-1 items-end' : 'order-3 items-start' %> z-10 transition-all duration-300"
+          data-action="<%= 'mouseenter->reply#showReplyButton click->reply#showReplyButton' unless placeholder_message || show_as_thread %>" data-show-class="<%= current_user_message ? 'mr-10' : 'ml-10' %>"
+          >
+          <% if placeholder_message %>
+            <div class="cursor-pointer" data-thread-url="<%= url_for([:thread, :account, message.thread_origin_message || message]) %>" data-action="click->reply#reply"><span class="px-2 py-1 text-xs text-gray-300 rounded-lg inline-block <%= rounding_modifier %> border-primary-300 border break-words sm:max-w-sm max-w-tiny"><%= Nokogiri::HTML.fragment(trix_sanitize(message.body)).text.truncate(80) %></span></div>
+          <% else %>
+            <div><span class="px-4 py-2 rounded-lg inline-block <%= rounding_modifier %> <%= current_user_message ? ' bg-primary-600 text-white' : ' bg-gray-300 text-gray-600' %> "><%= trix_sanitize(message.body) %></span></div>
+          <% end %>
+        </div>
+        <%= avatar %>
+        <% unless placeholder_message || show_as_thread %>
+          <div class="order-2 absolute text-gray-400 bottom-1 hover:text-gray-500 <%= current_user_message ? 'right-10' : 'left-10' %> z-0">
+            <button
+              data-action="click->reply#reply"
+              data-thread-url="<%= url_for([:thread, :account, message.thread_origin_message || message]) %>"
+              >
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 stroke-current" fill="none" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
+              </svg>
+            </button>
+          </div>
+        <% end %>
+      </div>
+      <% if message.replies.any? && !show_as_thread %>
+        <div class="<%= 'text-right' if current_user_message %>">
+          <button class="text-xs text-primary-400 text-right mr-12 ml-12" data-thread-url="<%= url_for([:thread, :account, message.thread_origin_message || message]) %>" data-action="reply#reply"><%= message.replies.size %> <%= t("conversations/messages.navigation.reply").pluralize(message.replies.size) %></button>
+        </div>
+      <% end %>
+
+    </div>
+  </div>
+  <% unless next_message_in_series || placeholder_message %>
+    <div class="flex">
+      <% if show_borders && !last_message_in_thread %>
+        <% if (thread_started_by_current_user && current_user_message) || (!thread_started_by_current_user && !current_user_message) %>
+          <%= message_thread_border(side: border_side, position: :middle) %>
+        <% end %>
+      <% end %>
+
+      <div class="flex flex-grow order-1 <%= current_user_message ? 'justify-end items-end pr-8' : 'justify-start items-start pl-8' %> <%= 'mb-3' unless next_message_in_series %>">
+        <div class="<%= show_as_thread ? 'text-gray-400' : 'text-gray-300' %> text-sm">
+          <strong><%= message.author.name %></strong>
+          <%= timestamp %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+  <% if message.replies.any? && false %>
+    <div class="mb-4">
+      <% message.replies.each do |reply| %>
+        <div class="flex text-xs font-extralight text-gray-300 ml-12">
+          <div class="<%= 'w-full' if current_user_message %>"></div>
+          <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 682" class="w-5 h-5 stroke-current mt-4 text-gray-50 fill-current">
+            <path d="M0 57.7c.1 145.1 4.1 224 14.5 281.1 19.4 106.3 65.2 156.4 166.3 181.7 48.7 12.1 111.4 18.8 211.7 22.5 23.8.9 196.6 2.8 268.2 3H683l.2 67.8.3 67.8 170.3-102.1L1024 477.3l-170.2-102-170.3-102-.3 67.8-.2 67.9h-75.8c-184.7 0-266.9-4.8-327.2-19-34.2-8.1-62.8-21.1-81.2-37-36.1-31.3-52.3-76.8-58.8-165.5-2-28-3-69.2-3-127.8V0H0v57.7z"/>
+          </svg>
+          <div class="flex flex-col mr-10 min-w-max">
+            <div class="pt-0 mr-2 ml-4 text-xxs"><%= reply.membership.label_string %> reply: </div>
+            <div class="bg-gray-100 rounded py-2 px-4 mt-0 text-gray-400 max-w-md"><%= reply.body.html_safe %></div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/views/themes/tester/conversations/_thread_border.html.erb

@@ -0,0 +1,3 @@
+<div class="flex-grow flex <%= side == :left ? 'justify-start' : 'justify-end order-2' %>">
+  <div class=" border-solid border-gray-300 <%= border_classes %> text-white <%= side == :left ? 'ml-12 mr-0' : 'ml-0 mr-12' %> w-6"></div>
+</div>

data/app/views/themes/tester/fields/_field.html.erb

@@ -0,0 +1,81 @@
+<% yield %>
+
+<%
+form ||= current_fields_form
+# returns a struct with `label`, `placeholder`, and `help` methods.
+labels = labels_for(form, method)
+options ||= {}
+options[:id] ||= id_for(form, method)
+# options[:disabled] ||= !field_editable?(form.object, method) if user_signed_in?
+options[:placeholder] ||= labels.placeholder if labels.placeholder
+other_options ||= {}
+other_options[:help] = [other_options[:help], labels.help].compact.join(" ")
+
+errors = [method, method.to_s.gsub(/_id$/, '').to_sym].uniq.map { |attribute| form.object.errors.full_messages_for(attribute) }.flatten
+has_errors = errors.any? || content_for(:error).present? || other_options[:error].present?
+
+options[:class] = "#{options[:class]} block w-full rounded-md shadow-sm font-light text-sm"
+
+options[:class] += if has_errors
+  " pr-10 border-red-500 text-red-900 placeholder-red-500 focus:outline-none focus:ring-red-500 focus:border-red-500 dark:bg-darkPrimary-800 dark:text-darkPrimary-300"
+else
+  " focus:ring-primary-500 focus:border-primary-500 border-gray-300 dark:bg-darkPrimary-800 dark:border-darkPrimary-900 dark:text-darkPrimary-300"
+end
+
+%>
+
+<div class="<%= 'required' if presence_validated?(form.object, method) %>">
+
+  <% # the label. %>
+  <% unless other_options[:hide_label] == true %>
+    <% if content_for? :label %>
+      <%= yield :label %>
+      <% flush_content_for :label %>
+    <% else %>
+      <% # allow the label to be defined via an inline option or else one of the locale yaml definitions. %>
+      <% label = (other_options[:label].presence || labels.label || legacy_label_for(form, method)) %>
+      <%= form.label method, label&.html_safe, class: 'block', for: options[:id] %>
+    <% end %>
+  <% end %>
+
+  <div class="mt-1.5">
+
+    <% # the actual field. %>
+    <% if content_for? :field %>
+      <%= yield :field %>
+      <% flush_content_for :field %>
+    <% else %>
+      <% # e.g. form.text_field(method, options) %>
+      <%= form.send(helper, method, options) %>
+    <% end %>
+
+  </div>
+
+  <% # any error messages. %>
+  <% if has_errors %>
+    <p class="mt-1.5 text-xs text-red">
+      <%= errors.map { |error| error + ". " }.join %>
+      <%= yield :error %>
+      <% flush_content_for :error %>
+      <% if other_options[:hide_custom_error].blank? %>
+        <%= other_options[:error]&.html_safe %>
+      <% end %>
+    </p>
+  <% end %>
+
+  <% # any help text. %>
+  <% if content_for?(:help) || other_options[:help] || content_for?(:after_help) %>
+    <p class="mt-1.5 text-xs text-gray-500">
+      <%= yield :help %>
+      <% flush_content_for :help %>
+      <%= other_options[:help]&.html_safe %>
+      <%= yield :after_help %>
+      <% flush_content_for :after_help %>
+    </p>
+  <% end %>
+
+  <% if other_options[:icon] %>
+  <div class="pre-icon os-icon <%= other_options[:icon] %>"></div>
+  <% end %>
+
+</div>

data/app/views/themes/tester/forms/_errors.html.erb

@@ -0,0 +1,14 @@
+<% attributes ||= [] %>
+<% attributes.select! { |attribute| form.object.errors[attribute].any? } %>
+<% if form.object.errors[:base].any? || form.object.errors.present? || attributes.any? %>
+  <%= render 'account/shared/alert', color: 'red' do %>
+    <% if form.object.errors[:base].any? || attributes.any? %>
+      <%= form.object.errors[:base].join(' ') %>
+      <% attributes.each do |attribute| %>
+      <%= resource.class.human_attribute_name(attribute) %> <%= resource.errors[attribute].to_sentence %>.
+      <% end %>
+    <% else %>
+      Please correct the errors below.
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/themes/tester/layouts/_account.html.erb

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html class="theme-<%= BulletTrain::Themes::Tester.color %>">
+  <head>
+    <%= render 'shared/layouts/head' %>
+  </head>
+  <body class="bg-light-gradient text-gray-700 text-sm font-normal dark:bg-dark-gradient dark:text-darkPrimary-300">
+    <div class="p-4 bg-primary-900 electron-draggable electron-title-bar hidden electron-mobile-only"></div>
+    <div class="md:p-5 main-container-padding">
+      <div class="h-screen md:h-auto overflow-hidden md:rounded-lg flex shadow main-container"
+        data-controller="mobile-menu"
+        data-mobile-menu-hidden-class="hidden"
+        data-mobile-menu-show-event-name-value="mobile-menu:show"
+        data-mobile-menu-hide-event-name-value="mobile-menu:hide"
+      >
+
+        <% menu = capture do %>
+          <div class="flex items-center flex-shrink-0 p-4 bg-primary-900 md:rounded-tl-lg electron-draggable electron-title-bar dark:bg-black dark:bg-opacity-10">
+            <%= image_tag image_path("logo/logo.png"), class: 'h-5 w-auto mx-auto' %>
+
+            <div class="lg:hidden absolute right-0">
+              <button class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:ring-transparent"
+                data-action="reveal#hide"
+              >
+                <span class="sr-only">Close Application Menu</span>
+                <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <nav class="flex-1 space-y-1 overflow-y-auto select-none">
+            <div class="flex-shrink-0 flex shadow px-5 py-4">
+              <div class="flex-shrink-0 w-full group block no-underline">
+                <div class="flex items-center">
+                  <div class="inline-block rounded-full border border-white p-1">
+                    <%= image_tag membership_profile_photo_url(current_membership), class: 'h-9 w-9 rounded-full', alt: current_user.name %>
+                  </div>
+                  <div class="ml-3">
+                    <div class="text-white">
+                      <%= current_user.name %>
+                    </div>
+                    <div class="text-2xs tracking-widest uppercase text-primary-300 group-hover:text-white dark:text-gray-500">
+                      <%= current_team.name %>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="px-5 py-4 menu">
+              <%= render 'account/shared/menu' %>
+            </div>
+          </nav>
+        <% end %>
+
+        <div class="lg:hidden hidden"
+          data-mobile-menu-target="wrapper"
+
+          data-controller="reveal"
+          data-reveal-away-value="true"
+          data-reveal-hide-keys-value="escape"
+
+          data-action="mobile-menu:show->reveal#show mobile-menu:hide->reveal#hide mobile-menu-toggle->reveal#toggle reveal:hidden->mobile-menu#hideWrapper"
+        >
+          <div class="fixed inset-0 flex z-40">
+            <button
+              data-action="reveal#hide"
+
+              hidden
+              data-reveal
+              data-transition
+              data-transition-enter="transition-opacity ease-linear duration-200"
+              data-transition-enter-start="opacity-0"
+              data-transition-enter-end="opacity-100"
+              data-transition-leave="transition-opacity ease-linear duration-200"
+              data-transition-leave-start="opacity-100"
+              data-transition-leave-end="opacity-0"
+
+              class="fixed inset-0" aria-hidden="true"
+            >
+              <div class="absolute inset-0 bg-light-gradient opacity-75"></div>
+            </button>
+            <div
+              hidden
+              data-reveal
+              data-transition
+              data-transition-enter="transition ease-in-out duration-200 transform"
+              data-transition-enter-start="-trandarkPrimary-x-full"
+              data-transition-enter-end="trandarkPrimary-x-0"
+              data-transition-leave="transition ease-in-out duration-200 transform"
+              data-transition-leave-start="trandarkPrimary-x-0"
+              data-transition-leave-end="-trandarkPrimary-x-full"
+
+              class="relative flex-1 flex flex-col max-w-xs w-full pb-4 bg-dark-gradient shadow-xl"
+            >
+              <%= menu %>
+            </div>
+            <div class="flex-shrink-0 w-14" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <div class="hidden lg:flex lg:flex-shrink-0 overflow-y-auto bg-gradient-to-b from-primary-700 to-primary-800 dark:from-darkPrimary-800 dark:to-darkPrimary-800">
+          <div class="w-64">
+            <%= menu %>
+          </div>
+        </div>
+
+        <div class="flex flex-col w-0 flex-1 overflow-y-auto bg-gray-100 dark:bg-darkPrimary-800 lg:border-l dark:border-gray-500">
+          <main class="flex-1 relative z-0 focus:outline-none" tabindex="0">
+            <div class="flex flex-row items-center shadow-sm electron-draggable">
+              <button class="mobile-menu-trigger lg:hidden h-12 w-12 ml-1 flex-none inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
+                data-action="mobile-menu#toggle"
+              >
+                <span class="sr-only">Open Application Menu</span>
+                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+              </button>
+
+              <nav class="flex px-1 lg:px-4 py-2 overflow-x-auto select-none" aria-label="Breadcrumb">
+                <ol class="breadcrumb whitespace-nowrap flex items-center space-x-3 py-0.5 pr-3">
+                  <%= render('breadcrumbs').strip.html_safe %>
+                </ol>
+              </nav>
+            </div>
+
+            <div class="py-2 px-1">
+              <div class="mx-auto px-4 sm:px-6 py-4">
+                <%= yield %>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

data/app/views/themes/tester/layouts/_devise.html.erb

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class="theme-<%= BulletTrain::Themes::Tester.color %>">
+  <head>
+    <%= render 'shared/layouts/head' %>
+  </head>
+  <body class="bg-light-gradient text-gray-700 text-sm font-normal electron-draggable dark:bg-dark-gradient dark:text-darkPrimary-300">
+    <div data-turn-enter data-turn-exit>
+      <%= yield %>
+    </div>
+  </body>
+</html>

data/app/views/themes/tester/layouts/_head.html.erb

@@ -0,0 +1,8 @@
+<%= stylesheet_link_tag 'https://rsms.me/inter/inter.css', media: 'all', 'data-turbo-track': 'reload' %>
+<link href="<%= image_path('logo/favicon.png') %>" rel="shortcut icon" />
+<link href="<%= image_path('logo/icon.png') %>" rel="apple-touch-icon" />
+<%= javascript_include_tag 'application', 'data-turbo-track': 'reload' %>
+<%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
+<%= javascript_include_tag 'application.tester', 'data-turbo-track': 'reload' %>
+<%= stylesheet_link_tag 'application.tester', media: 'all', 'data-turbo-track': 'reload' %>
+<%= render 'layouts/head' %>