Merge pull request #491 from eyra/assignment-branding

Added title, subtitle, logo, cover to assignment settings CMS

core/assets/js/app.js

@@ -104,7 +104,7 @@ let Hooks = {
   TabbarFooterItem,
   NativeWrapper,
   FeldsparApp,
-  Wysiwyg
+  Wysiwyg,
 };
 
 let liveSocket = new LiveSocket("/live", Socket, {

core/assets/js/elements.js

@@ -0,0 +1,27 @@
+export function activateElement(element, activate) {
+  console.log("Activate element");
+  if (!element) {
+    return console.warn("Unknown element");
+  }
+
+  var idle_classes = customClasses(element, "idle");
+  var active_classes = customClasses(element, "active");
+
+  if (activate) {
+    updateClassList(element, idle_classes, "remove");
+    updateClassList(element, active_classes, "add");
+  } else {
+    updateClassList(element, active_classes, "remove");
+    updateClassList(element, idle_classes, "add");
+  }
+}
+
+export function customClasses(element, name) {
+  return element.getAttribute(name + "-class").split(" ");
+}
+
+export function updateClassList(element, classes, type) {
+  classes.forEach((clazz) => {
+    element.classList[type](clazz);
+  });
+}

core/frameworks/pixel/components/form.ex

@@ -461,6 +461,7 @@ defmodule Frameworks.Pixel.Form do
   attr(:uploads, :any, required: true)
   attr(:primary_button_text, :string, required: true)
   attr(:secondary_button_text, :string, required: true)
+  attr(:placeholder, :string, default: "profile_photo_default")
 
   def photo_input(assigns) do
     ~H"""
@@ -470,7 +471,7 @@ defmodule Frameworks.Pixel.Form do
     <div class="flex flex-row items-center">
       <.image_preview
         image_url={@photo_url}
-        placeholder={@static_path.("/images/profile_photo_default.svg")}
+        placeholder={"/images/#{@placeholder}.svg"}
         shape="w-image-preview-circle sm:w-image-preview-circle-sm h-image-preview-circle sm:h-image-preview-circle-sm rounded-full"
       />
       <.spacing value="S" direction="l" />

core/frameworks/pixel/components/grid.ex

@@ -27,7 +27,7 @@ defmodule Frameworks.Pixel.Grid do
 
   def image(assigns) do
     ~H"""
-    <div class={"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 #{@gap}"}>
+    <div class={"image-container grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 #{@gap}"}>
       <%= render_slot(@inner_block) %>
     </div>
     """

core/frameworks/pixel/components/hero.ex

@@ -7,6 +7,8 @@ defmodule Frameworks.Pixel.Hero do
   alias Frameworks.Pixel.Icon
   alias Frameworks.Pixel.Image
 
+  import Frameworks.Pixel.ImagePreview
+
   attr(:title, :string, required: true)
   attr(:illustration, :string, default: "/images/illustration.svg")
   attr(:text_color, :string, default: "text-white")
@@ -65,24 +67,42 @@ defmodule Frameworks.Pixel.Hero do
   attr(:title, :string, required: true)
   attr(:subtitle, :string, required: true)
   attr(:image_info, :any, required: true)
+  attr(:logo_url, :string, default: nil)
   attr(:text_color, :string, default: "text-white")
   slot(:call_to_action)
 
   def image(assigns) do
     ~H"""
-    <div class="w-full" data-native-title={@title}>
-      <div class="relative overflow-hidden w-full h-image-header sm:h-image-header-sm bg-grey4">
+    <div class="w-full h-full" data-native-title={@title}>
+      <div class="relative overflow-hidden w-full h-full bg-grey4">
         <%= if @image_info do %>
-          <Image.blurhash id="hero" {@image_info} transition="duration-1000" />
+          <Image.blurhash id="hero" image={@image_info} transition="duration-1000" />
         <% end %>
-        <div class="absolute z-20 top-0 left-0 w-full h-full flex items-center  bg-opacity-20 bg-black">
-          <div class="ml-6 mr-6 sm:ml-20 sm:mr-20 text-shadow-md flex-wrap">
-            <Text.title0 color="text-white"><%= @title %></Text.title0>
-            <.spacing value="S" />
-            <Text.title4 color="text-white"><%= @subtitle %></Text.title4>
-            <.spacing value="S" />
-            <div>
-              <%= render_slot(@call_to_action) %>
+        <div class="absolute z-20 top-0 left-0 w-full h-full bg-opacity-20 bg-black">
+          <div class="ml-6 mr-6 sm:ml-20 sm:mr-20 text-shadow-md h-full">
+            <div class="flex flex-col gap-2 h-full">
+              <div class="flex-grow" />
+              <div class="flex flex-row gap-12">
+                <%= if @logo_url do %>
+                <div>
+                  <.image_preview
+                    image_url={@logo_url}
+                    placeholder={"/images/logo_placeholder.svg"}
+                    shape="w-[96px] h-[96px] rounded-full"
+                  />
+                </div>
+                <% end %>
+                <div class="flex flex-col gap-2">
+                  <div class="flex-grow" />
+                  <Text.title2 margin="" color="text-white"><%= @title %></Text.title2>
+                  <Text.title6 margin="" color="text-white"><%= @subtitle %></Text.title6>
+                  <div class="flex-grow" />
+                </div>
+              </div>
+              <div>
+                <%= render_slot(@call_to_action) %>
+              </div>
+              <div class="flex-grow" />
             </div>
           </div>
         </div>

core/frameworks/pixel/components/image.ex

@@ -62,6 +62,7 @@ defmodule Frameworks.Pixel.Image do
   attr(:srcset, :string, required: true)
   attr(:index, :string, required: true)
   attr(:target, :string, default: "")
+  attr(:selected, :boolean, default: false)
 
   @doc """
   An image that can be used in an image grid.
@@ -70,25 +71,21 @@ defmodule Frameworks.Pixel.Image do
     ~H"""
     <div
       id={"clickable-area-#{@index}"}
-      class="relative bg-grey4 ring-4 hover:ring-primary cursor-pointer rounded overflow-hidden"
-      x-bind:class={"{ 'ring-primary': selected === #{@index}, 'ring-white': selected != #{@index} }"}
-      x-on:click={"selected = #{@index}"}
+      class={"relative bg-grey5 h-full outline outline-4 hover:outline-primary cursor-pointer rounded overflow-hidden #{if @selected do "outline-primary" else "outline-grey5" end}"}
       phx-click="select_image"
       phx-value-image={@id}
       phx-target={@target}
     >
       <div
-        class="absolute z-10 w-full h-full bg-primary bg-opacity-50"
-        x-bind:class={"{ 'visible': selected === #{@index}, 'invisible': selected != #{@index} }"}
+        class={"absolute z-10 w-full h-full bg-primary bg-opacity-50 #{if @selected do "visible" else "invisible" end}"}
       />
       <div
-        class="absolute z-20 w-full h-full"
-        x-bind:class={"{ 'visible': selected === #{@index}, 'invisible': selected != #{@index} }"}
+        class={"absolute z-20 w-full h-full #{if @selected do "visible" else "invisible" end}"}
       >
         <img class="w-full h-full object-none" src="/images/checkmark.svg" alt="">
       </div>
       <div class="w-full h-full">
-        <img class="object-cover w-full h-full image" src={@url} srcset={@srcset}>
+        <img id={@id} class="object-cover w-full h-full image" src={@url} srcset={@srcset}>
       </div>
     </div>
     """

core/lib/core_web/controllers/layouts/stripped/component.ex

@@ -49,6 +49,7 @@ defmodule CoreWeb.Layouts.Stripped.Component do
   attr(:menus, :map, required: true)
   attr(:footer?, :boolean, default: true)
 
+  slot(:header)
   slot(:inner_block, required: true)
 
   def stripped(assigns) do
@@ -66,6 +67,7 @@ defmodule CoreWeb.Layouts.Stripped.Component do
             </div>
           <div class="flex-1">
             <div class="flex flex-col h-full border-t border-l border-b border-grey4">
+              <%= render_slot(@header) %>
               <%= if @title do %>
                 <div class="flex-none">
                   <Hero.small title={@title} />

core/lib/core_web/ui/dialog/dialog.ex

@@ -32,4 +32,17 @@ defmodule CoreWeb.UI.Dialog do
     </div>
     """
   end
+
+  def form_dialog_buttons(target) do
+    [
+      %{
+        action: %{type: :send, target: target, event: "submit"},
+        face: %{type: :primary, label: dgettext("eyra-ui", "submit.button")}
+      },
+      %{
+        action: %{type: :send, target: target, event: "cancel"},
+        face: %{type: :label, label: dgettext("eyra-ui", "cancel.button")}
+      }
+    ]
+  end
 end