https://github.com/bonfire-networks/bonfire-app/issues/831

bonfire-networks · Sep 2, 2024 · e2a8218 · e2a8218
1 parent 625987f
commit e2a8218
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 14 deletions.
diff --git a/lib/web/components/label_widget/labelled_live.ex b/lib/web/components/label_widget/labelled_live.ex
@@ -5,5 +5,6 @@ defmodule Bonfire.Label.Web.LabelledLive do
  prop label_id, :any, default: nil
  prop activity, :any, default: nil
  prop showing_within, :atom, default: nil
+ prop viewing_main_object, :boolean, default: false
  prop class, :css_class, default: ["flex items-center -ml-6 justify-start pb-2 mb-2"]
 end
diff --git a/lib/web/components/label_widget/labelled_live.sface b/lib/web/components/label_widget/labelled_live.sface
@@ -1,19 +1,26 @@
 <div
+ x-data="{open: false}"
+ data-main-object={@viewing_main_object}
+ data-id={"labelled_widget"}
  data-type={@label_id}
  class={
  "border mt-3 rounded-lg border-base-content/30 ",
- "border-info": @label_id == "1ABE10VTDATEDGET1ATESTNEWS",
- "border-warning": @label_id == "1ABE1M1S1NF0RMEDGETZEFACTS",
- "border-error": @label_id == "1ABE1M1S1EAD1NGBACK2S0VRCE"
+ "border-info/30": @label_id == "1ABE10VTDATEDGET1ATESTNEWS",
+ "border-warning/30": @label_id == "1ABE1M1S1NF0RMEDGETZEFACTS",
+ "border-error/30": @label_id == "1ABE1M1S1EAD1NGBACK2S0VRCE"
  }
 >
  <!-- :if={@showing_within not in [:group, :topic, :thread]} -->
- <div class={
- "bg-base-content/10 rounded-t-lg flex items-center gap-3 py-2 p-3 ",
+ <div 
+ x-on:click="open = !open"
+ :class="{'!rounded-b-none': open}"
+ class={
+ "bg-base-content/10 rounded-lg justify-between flex items-center gap-3 py-2 p-3 ",
  "bg-info text-info-content": @label_id == "1ABE10VTDATEDGET1ATESTNEWS",
  "bg-warning text-warning-content": @label_id == "1ABE1M1S1NF0RMEDGETZEFACTS",
  "bg-error text-error-content": @label_id == "1ABE1M1S1EAD1NGBACK2S0VRCE"
  }>
+ <div class="flex items-center gap-3">
  {#case @label_id || id(@label)}
  {#match "1ABE10VTDATEDGET1ATESTNEWS"}
  <#Icon iconify="ri:broadcast-fill" class="w-5 h-5" />
@@ -29,6 +36,17 @@
  {e(@label, :profile, :name, nil) || e(@label, :character, :username, nil)}
  </div>
  </div>
+ <button type="button" x-cloak class="btn btn-square btn-sm btn-ghost" x-show="open">
+ <#Icon iconify="fluent:triangle-12-filled" class="w-3 h-3" />
+ </button>
+ <button type="button" class="btn btn-square btn-sm btn-ghost" x-show="!open">
+ <#Icon iconify="fluent:triangle-down-12-filled" class="w-3 h-3" />
+ </button>
+ </div>
+
+
+<div x-show="open" x-cloak x-collapse>
+
  {#case e(@activity, :labelled, :post_content, :html_body, nil)}
  {#match nil}
  {#match body}
@@ -40,22 +58,20 @@
  </div>
  {/case}
 
- <div data-id="labelled_media" class="">
+ <div data-id="labelled_media" class="m-2">
  <StatelessComponent
  module={maybe_component(Bonfire.UI.Social.Activity.MediaLive)}
  showing_within={@showing_within}
  media={e(@activity, :labelled, :media, [])}
  small_icon
  css_borders={
- "border-t py-2",
- "border-info": @label_id == "1ABE10VTDATEDGET1ATESTNEWS",
- "border-warning": @label_id == "1ABE1M1S1NF0RMEDGETZEFACTS",
- "border-error": @label_id == "1ABE1M1S1EAD1NGBACK2S0VRCE"
+ "border rounded-md border-base-content/20"
  }
  />
  </div>
  <!-- parent_id={@parent_id}
  activity_inception={@activity_inception} -->
 
  {!-- </div> --}
+ </div>
 </div>
diff --git a/lib/web/components/modal/content_label_live.sface b/lib/web/components/modal/content_label_live.sface
@@ -57,7 +57,7 @@
  <button
  x-show="links.length < 3"
  type="button"
- class="btn btn-sm btn-outline border-base-content/30 btn-circle"
+ class="btn btn-sm btn-square btn-neutral"
  >
  +
  </button>
@@ -67,12 +67,13 @@
  <div class="label flex px-0 gap-2 py-1 items-center">
  <input
  name="links[]"
- class="input h-[2.5rem] text-sm input-bordered flex-1 w-full"
+ autocomplete="off"
+ class="input input-sm input-bordered flex-1 w-full"
  placeholder="https://..."
  x-model="links[index]"
  />
- <button type="button" @click="links.splice(index, 1)" class="btn btn-ghost btn-circle">
- <#Icon iconify="ph:trash-fill" class="w-5 h-5" />
+ <button type="button" @click="links.splice(index, 1)" class="btn btn-sm btn-square btn-neutral">
+ <#Icon iconify="ph:trash-fill" class="w-4 h-4" />
  </button>
  </div>
  </label>