Extract contacts to its own routes/views namespaces

GaiwanTeam · Sep 9, 2024 · 6c0cdb3 · 6c0cdb3
1 parent e800f0c
commit 6c0cdb3
Show file tree

Hide file tree

Showing 10 changed files with 274 additions and 237 deletions.
diff --git a/repl-sessions/revoke.clj b/repl-sessions/revoke.clj
@@ -46,6 +46,6 @@
       (range 1 11)))))
 
 (def tx (temp-user-tx
-         (test-user-eid "Laurence")))
+         (test-user-eid "Arne")))
 
 (db/transact tx)
diff --git a/resources/public/css/styles.css b/resources/public/css/styles.css
@@ -6,9 +6,8 @@
   --hoc-pink-3: var(--hoc-pink);
   --hoc-green: #99db70;
   --sessions-arc-degrees: 240deg;
-  --profiles-arc-thickness: 30px;
-  --sessions-arc-thickness: 30px;
   --hoc-pink-1: #e7879d;
+  --arc-thickness: 30px;
   --hoc-pink-2: #cd4e6a;
   --hoc-pink-4: #c0415b;
   --co-gaiwan-compass-html-components--toggle-radius-right: var(--radius-2);
@@ -305,6 +304,19 @@ ol li {
   background-size: cover;
 }
 
+.co_gaiwan_compass_html_components__image_frame .img {
+  width: 100%;
+  padding: var(--arc-thickness);
+}
+
+.co_gaiwan_compass_html_components__image_frame .img >* {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 9999px;
+  background-size: cover;
+  background-position: 50% 50%;
+}
+
 .co_gaiwan_compass_html_navigation__nav_bar {
   display: flex;
   align-items: center;
@@ -431,70 +443,65 @@ ol li {
   opacity: 0.5;
 }
 
-.filters-filter_section {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--size-1);
-  margin-top: var(--size-3);
-  margin-bottom: var(--size-3);
-}
-
-.filters-filter_section button, .filters-filter_section .co_gaiwan_compass_html_components__toggle_button, .filters-filter_section .btn {
-  font-weight: 400;
-  flex-grow: 1;
-}
-
-.profiles-image_frame .img {
-  width: 100%;
-  padding: var(--profiles-arc-thickness);
-}
-
-.profiles-image_frame .img >* {
-  width: 100%;
-  aspect-ratio: 1 / 1;
-  border-radius: 9999px;
-  background-size: cover;
-  background-position: 50% 50%;
-}
-
-.profiles-attendee_card .profiles-image_frame {
+.contacts-attendee_card .co_gaiwan_compass_html_components__image_frame {
   width: 100px;
 }
 
-.profiles-profile_detail .profiles-image_frame {
+.contacts-contact_detail .co_gaiwan_compass_html_components__image_frame {
   width: 100px;
-  --profiles-arc-thickness: 7%;
+  --arc-thickness: 7%;
 }
 
-.profiles-profile_detail .contact-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--size-4);
+.contacts-contact_detail .contact-list {
+  width: 100%;
 }
 
-.profiles-profile_detail .remove-btn, .profiles-profile_detail cursor-pointer {
+.contacts-contact_detail .remove-btn, .contacts-contact_detail cursor-pointer {
   border-style: none;
   background-color: var(--surface-3);
 }
 
-.profiles-profile_detail .remove-btn:hover {
+.contacts-contact_detail .remove-btn:hover {
   background-color: var(--surface-4);
 }
 
-.profiles-profile_detail .contact {
+.contacts-contact_detail .contact {
   display: flex;
   align-items: center;
+  justify-content: space-between;
 }
 
-.profiles-profile_detail .contact .profiles-image_frame {
+.contacts-contact_detail .contact div {
+  margin-right: var(--size-2);
+}
+
+.contacts-contact_detail .contact .co_gaiwan_compass_html_components__image_frame {
   width: 50px;
-  --profiles-arc-thickness: 7%;
+  --arc-thickness: 7%;
   margin-right: var(--size-2);
 }
 
-.profiles-profile_form .profiles-image_frame {
+.filters-filter_section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--size-1);
+  margin-top: var(--size-3);
+  margin-bottom: var(--size-3);
+}
+
+.filters-filter_section button, .filters-filter_section .co_gaiwan_compass_html_components__toggle_button, .filters-filter_section .btn {
+  font-weight: 400;
+  flex-grow: 1;
+}
+
+.profiles-profile_detail .co_gaiwan_compass_html_components__image_frame {
+  width: 100px;
+  --arc-thickness: 7%;
+}
+
+.profiles-profile_form .co_gaiwan_compass_html_components__image_frame {
   width: 100px;
-  --profiles-arc-thickness: 7%;
+  --arc-thickness: 7%;
 }
 
 .profiles-profile_form label, .profiles-profile_form input {
@@ -529,7 +536,7 @@ ol li {
 
 .sessions-arc {
   aspect-ratio: var(--ratio-square);
-  padding: var(--sessions-arc-thickness);
+  padding: var(--arc-thickness);
   border-radius: var(--radius-round);
   background: var(--sessions-arc-color);
   mask: linear-gradient(#0000 0 0) content-box intersect, conic-gradient(#000 var(--sessions-arc-degrees), #0000 0);
@@ -538,7 +545,7 @@ ol li {
 .sessions-capacity_gauge {
   aspect-ratio: 1 / 1;
   position: relative;
-  --sessions-arc-thickness: 7%;
+  --arc-thickness: 7%;
 }
 
 .sessions-capacity_gauge >* {
@@ -570,7 +577,7 @@ ol li {
 
 .sessions-capacity_gauge .img {
   width: 100%;
-  padding: var(--sessions-arc-thickness);
+  padding: var(--arc-thickness);
 }
 
 .sessions-capacity_gauge .img >* {

diff --git a/src/co/gaiwan/compass/css/tokens.clj b/src/co/gaiwan/compass/css/tokens.clj
@@ -36,6 +36,8 @@
 (o/defprop --highlight)
 (o/defprop --highlight-yellow)
 
+(o/defprop --arc-thickness "30px")
+
 (o/defrules session-colors
   [":where(html)"
    {--talk-color         --blue-2

diff --git a/src/co/gaiwan/compass/html/components.clj b/src/co/gaiwan/compass/html/components.clj
@@ -66,3 +66,16 @@
    :background-size "cover"}
   ([image]
    [:<> {:style {:background-image image}}]))
+
+(o/defstyled image-frame :div
+  [:.img :w-full
+   {:padding t/--arc-thickness
+    #_#_:margin-left "-100%"}
+   [:>* :w-full :aspect-square :rounded-full
+    {:background-size "cover"
+     :background-position "50% 50%"}]]
+  ([{:profile/keys [image]}]
+   [:<>
+    [:div.img
+     [:div
+      {:style {:background-image image}}]]]))
diff --git a/src/co/gaiwan/compass/html/contacts.clj b/src/co/gaiwan/compass/html/contacts.clj
@@ -0,0 +1,64 @@
+(ns co.gaiwan.compass.html.contacts
+  "Views and components (hiccup/ornament) related to contacts"
+  {:ornament/prefix "contacts-"}
+  (:require
+   [co.gaiwan.compass.css.tokens :as t :refer :all]
+   [co.gaiwan.compass.html.components :as c]
+   [co.gaiwan.compass.html.graphics :as graphics]
+   [co.gaiwan.compass.http.routing :refer [url-for]]
+   [co.gaiwan.compass.model.user :as user]
+   [lambdaisland.ornament :as o]
+   [markdown-to-hiccup.core :as m]))
+
+;; UI of attendee list
+
+(o/defstyled attendee-card :div
+  [c/image-frame :w-100px]
+  ([{:public-profile/keys [name hidden? bio]
+     :user/keys [uuid] :as user}]
+   [:<>
+    [c/image-frame {:profile/image (user/avatar-css-value user)}]
+    [:div.details
+     [:h3 name]
+     (if hidden?
+       [:label "Hide profile from public listing"]
+       [:label "Show profile from public listing"])
+     (when (:private-profile/name user)
+       [:div
+        [:label "Another Name:"]
+        [:label (:private-profile/name user)]])
+     (when bio
+       [:textarea (m/md->hiccup bio)])]]))
+
+(o/defstyled contact-detail :div
+  [c/image-frame :w-100px {--arc-thickness "7%"}]
+  [:.contact-list :w-full :ga-4]
+  [:.remove-btn :cursor-pointer :border-none {:background-color t/--surface-3}]
+  [:.remove-btn [:&:hover {:background-color t/--surface-4}]]
+  [:.contact :flex :items-center :justify-between
+   [:div :mr-2]
+   [c/image-frame :w-50px {--arc-thickness "7%"} :mr-2]]
+  ([{:public-profile/keys [name]
+     :user/keys [uuid] :as user}]
+   [:<>
+    [:div [c/image-frame {:profile/image (user/avatar-css-value user)}]]
+    [:div.details
+     [:h3.title name]]
+    [:button {:hx-target "#modal"
+              :hx-get (url-for :contact/qr)}
+     "Add Contact"]
+    [:div
+     [:a
+      {:href (url-for :contacts/index)
+       :style {:display "none"}
+       :hx-trigger "contact-deleted from:body"}]
+     [:h3 "Contacts"]
+     [:div.contact-list
+      (for [c (:user/contacts user)]
+        [:div.contact
+         [c/image-frame {:profile/image (user/avatar-css-value c)}]
+         [:div
+          [:div (:public-profile/name c)]
+          [:div (:discord/email c)]]
+         [:button.remove-btn {:hx-delete (url-for :contact/link {:id (:db/id c)})}
+          [graphics/person-remove] "Remove Contact"]])]]]))
diff --git a/src/co/gaiwan/compass/html/profiles.clj b/src/co/gaiwan/compass/html/profiles.clj
@@ -2,48 +2,12 @@
   "Views and components (hiccup/ornament) related to profiles"
   {:ornament/prefix "profiles-"}
   (:require
-   [co.gaiwan.compass.html.graphics :as graphics]
    [co.gaiwan.compass.css.tokens :as t :refer :all]
    [co.gaiwan.compass.db.queries :as queries]
+   [co.gaiwan.compass.html.components :as c]
    [co.gaiwan.compass.http.routing :refer [url-for]]
    [co.gaiwan.compass.model.user :as user]
-   [lambdaisland.ornament :as o]
-   [markdown-to-hiccup.core :as m]))
-
-(o/defprop --arc-thickness "30px")
-
-(o/defstyled image-frame :div
-  [:.img :w-full
-   {:padding --arc-thickness
-    #_#_:margin-left "-100%"}
-   [:>* :w-full :aspect-square :rounded-full
-    {:background-size "cover"
-     :background-position "50% 50%"}]]
-  ([{:profile/keys [image]}]
-   [:<>
-    [:div.img
-     [:div
-      {:style {:background-image image}}]]]))
-
-;; UI of attendee list
-
-(o/defstyled attendee-card :div
-  [image-frame :w-100px]
-  ([{:public-profile/keys [name hidden? bio]
-     :user/keys [uuid] :as user}]
-   [:<>
-    [image-frame {:profile/image (user/avatar-css-value user)}]
-    [:div.details
-     [:h3 name]
-     (if hidden?
-       [:label "Hide profile from public listing"]
-       [:label "Show profile from public listing"])
-     (when (:private-profile/name user)
-       [:div
-        [:label "Another Name:"]
-        [:label (:private-profile/name user)]])
-     (when bio
-       [:textarea (m/md->hiccup bio)])]]))
+   [lambdaisland.ornament :as o]))
 
 ;; UI of profile detail
 
@@ -57,11 +21,11 @@
     "Edit Profile"]))
 
 (o/defstyled profile-detail :div#detail
-  [image-frame :w-100px {--arc-thickness "7%"}]
+  [c/image-frame :w-100px {t/--arc-thickness "7%"}]
   ([{:public-profile/keys [name hidden?]
      :user/keys [uuid] :as user}]
    [:<>
-    [:div [image-frame {:profile/image (user/avatar-css-value user)}]]
+    [:div [c/image-frame {:profile/image (user/avatar-css-value user)}]]
     [:div.details
      [:h3.title name]]
     (if hidden?
@@ -77,39 +41,6 @@
     [:div.actions
      [edit-profile-btn user]]]))
 
-(o/defstyled contact-detail :div
-  [image-frame :w-100px {--arc-thickness "7%"}]
-  [:.contact-list :w-full :ga-4]
-  [:.remove-btn :cursor-pointer :border-none {:background-color t/--surface-3}]
-  [:.remove-btn [:&:hover {:background-color t/--surface-4}]]
-  [:.contact :flex :items-center :justify-between
-   [:div :mr-2]
-   [image-frame :w-50px {--arc-thickness "7%"} :mr-2]]
-  ([{:public-profile/keys [name]
-     :user/keys [uuid] :as user}]
-   [:<>
-    [:div [image-frame {:profile/image (user/avatar-css-value user)}]]
-    [:div.details
-     [:h3.title name]]
-    [:button {:hx-target "#modal"
-              :hx-get (url-for :contact/qr)}
-     "Add Contact"]
-    [:div
-     [:a
-      {:href (url-for :contacts/index)
-       :style {:display "none"}
-       :hx-trigger "contact-deleted from:body"}]
-     [:h3 "Contacts"]
-     [:div.contact-list
-      (for [c (:user/contacts user)]
-        [:div.contact
-         [image-frame {:profile/image (user/avatar-css-value c)}]
-         [:div
-          [:div (:public-profile/name c)]
-          [:div (:discord/email c)]]
-         [:button.remove-btn {:hx-delete (url-for :contact/link {:id (:db/id c)})}
-          [graphics/person-remove] "Remove Contact"]])]]]))
-
 (o/defstyled private-name :div
   ([user {:keys [private-name-switch] :as params}]
    (if (= "on" private-name-switch)
@@ -153,7 +84,7 @@
     [row link params]]))
 
 (o/defstyled profile-form :div#form
-  [image-frame :w-100px {--arc-thickness "7%"}]
+  [c/image-frame :w-100px {t/--arc-thickness "7%"}]
   [#{:label :input} :block]
   [:label
    :mb-1 :mt-2
@@ -191,7 +122,7 @@
      [:div.input-block {:id "private-name-block"}]
      [:div
       (when user
-        [image-frame {:profile/image (user/avatar-css-value user)}])
+        [c/image-frame {:profile/image (user/avatar-css-value user)}])
       [:label {:for "image"} "Avatar"]
       [:input {:id "image" :name "image" :type "file" :accept "image/png, image/jpeg"}]]
      [:div