Finish the ufinished things of the contact page

repl-sessions/revoke.clj

@@ -35,6 +35,7 @@
       (fn [x]
         {:db/id (str "temp-" x)
          :user/contacts eid
+         :discord/email (str "temp-email-" x "@gaiwan.co")
          :public-profile/name (str "temp-user-" x)
          :public-profile/avatar-url (assets/download-image (str avatar-url-part x ".png"))})
       (range 1 11))

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);
@@ -107,6 +106,7 @@ body {
 }
 
 h5, h4, h2, h1, h3 {
+  color: var(--text-1);
   max-inline-size: inherit;
 }
 
@@ -150,24 +150,24 @@ body {
   margin-top: var(--size-1);
 }
 
-ul {
+.site-copy ul {
   padding-top: var(--size-2);
   padding-bottom: var(--size-2);
 }
 
-ul li {
+.site-copy ul li {
   padding-top: var(--size-1);
   padding-bottom: var(--size-1);
   list-style-type: disc;
   list-style-position: inside;
 }
 
-ol {
+.site-copy ol {
   padding-top: var(--size-2);
   padding-bottom: var(--size-2);
 }
 
-ol li {
+.site-copy ol li {
   padding-top: var(--size-1);
   padding-bottom: var(--size-1);
   list-style-type: decimal;
@@ -305,6 +305,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 +444,88 @@ 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);
+.contacts-attendee_card .co_gaiwan_compass_html_components__image_frame {
+  width: 100px;
 }
 
-.filters-filter_section button, .filters-filter_section .co_gaiwan_compass_html_components__toggle_button, .filters-filter_section .btn {
-  font-weight: 400;
-  flex-grow: 1;
+.contacts-contact_detail .heading {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--size-3);
 }
 
-.profiles-image_frame .img {
+.contacts-contact_detail .contact-list {
   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%;
+.contacts-contact_detail .remove-btn, .contacts-contact_detail cursor-pointer {
+  border-style: none;
+  background-color: var(--surface-3);
 }
 
-.profiles-attendee_card .profiles-image_frame {
-  width: 100px;
+.contacts-contact_detail .remove-btn {
+  font-weight: 600;
+  color: var(--text-1);
 }
 
-.profiles-profile_detail .profiles-image_frame {
-  width: 100px;
-  --profiles-arc-thickness: 7%;
+.contacts-contact_detail .remove-btn:active, .contacts-contact_detail .remove-btn:hover {
+  background-color: var(--surface-4);
 }
 
-.profiles-profile_detail .contact-list {
+.contacts-contact_detail .contact {
   display: flex;
-  flex-wrap: wrap;
-  gap: var(--size-4);
+  align-items: center;
+  margin-top: var(--size-2);
+  margin-bottom: var(--size-2);
+  padding-top: var(--size-2);
+  padding-bottom: var(--size-2);
+  box-shadow: var(--shadow-2);
+  font-size: var(--size-3);
+  background-color: var(--surface-2);
 }
 
-.profiles-profile_detail .remove-btn, .profiles-profile_detail cursor-pointer {
-  border-style: none;
-  background-color: var(--surface-3);
+.contacts-contact_detail .contact .details {
+  flex-grow: 1;
+  margin-right: var(--size-2);
 }
 
-.profiles-profile_detail .remove-btn:hover {
-  background-color: var(--surface-4);
+.contacts-contact_detail .contact .co_gaiwan_compass_html_components__image_frame {
+  width: 50px;
+  --arc-thickness: 7%;
+  margin-left: var(--size-2);
+  margin-right: var(--size-2);
+}
+
+.contacts-contact_detail .profile-name {
+  font-weight: 600;
 }
 
-.profiles-profile_detail .contact {
+.contacts-contact_detail .email {
+  font-size: var(--size-3);
+  color: var(--text-2);
+}
+
+.filters-filter_section {
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--size-1);
+  margin-top: var(--size-3);
+  margin-bottom: var(--size-3);
 }
 
-.profiles-profile_detail .contact .profiles-image_frame {
-  width: 50px;
-  --profiles-arc-thickness: 7%;
-  margin-right: var(--size-2);
+.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 .profiles-image_frame {
+.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 +560,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 +569,7 @@ ol li {
 .sessions-capacity_gauge {
   aspect-ratio: 1 / 1;
   position: relative;
-  --sessions-arc-thickness: 7%;
+  --arc-thickness: 7%;
 }
 
 .sessions-capacity_gauge >* {
@@ -570,7 +601,7 @@ ol li {
 
 .sessions-capacity_gauge .img {
   width: 100%;
-  padding: var(--sessions-arc-thickness);
+  padding: var(--arc-thickness);
 }
 
 .sessions-capacity_gauge .img >* {

src/co/gaiwan/compass/css/styles.clj

@@ -9,7 +9,9 @@
    [:p {:max-inline-size "inherit"}]
    [#{:ul :ol} :list-none :m-0 :p-0]
    [:body :overflow-x-hidden :w-screen]
-   [#{:h1 :h2 :h3 :h4 :h5} {:max-inline-size "inherit"}]
+   [#{:h1 :h2 :h3 :h4 :h5}
+    {:color t/--text-1
+     :max-inline-size "inherit"}]
 
    ;; override open-props normalize, we like the buttons a bit more rounded
    [#{:button :.btn} {:border-radius t/--radius-2}]
@@ -29,8 +31,8 @@
           :margin-bottom t/--size-2}]
     [:h4 {:margin-top t/--size-2
           :margin-bottom t/--size-1}]
-    [:h5 {:margin-top t/--size-1}]]
+    [:h5 {:margin-top t/--size-1}]
 
-   [:ul :py-2 [:li :py-1 :list-disc :list-inside]]
-   [:ol :py-2 [:li :py-1 :list-decimal :list-inside]]
+    [:ul :py-2 [:li :py-1 :list-disc :list-inside]]
+    [:ol :py-2 [:li :py-1 :list-decimal :list-inside]]]
    ])

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

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}}]]]))

src/co/gaiwan/compass/html/contacts.clj

@@ -0,0 +1,72 @@
+(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
+  [:.heading :flex :justify-between
+   :mb-3]
+  [:.contact-list :w-full :ga-4]
+  [:.remove-btn :cursor-pointer :border-none {:background-color t/--surface-3}]
+  [:.remove-btn
+   :font-semibold
+   {:color t/--text-1}
+   [#{:&:hover :&:active}
+    {:background-color t/--surface-4}]]
+  [:.contact :flex :items-center :my-2 :py-2
+   :shadow-2 :font-size-3
+   {:background-color t/--surface-2}
+   [:.details :flex-grow :mr-2]
+   [c/image-frame :w-50px {--arc-thickness "7%"} :mx-2]]
+  [:.profile-name :font-semibold]
+  [:.email :font-size-3 {:color t/--text-2}]
+
+  ([{:public-profile/keys [name]
+     :user/keys [uuid] :as user}]
+   [:<>
+    [:div.heading
+     [:h2 "Your Contacts"]
+     [:button {:hx-target "#modal"
+               :hx-get (url-for :contact/qr)}
+      [graphics/scan-icon] "Add Contact"]]
+    [:div
+     [:a
+      {:href (url-for :contacts/index)
+       :style {:display "none"}
+       :hx-trigger "contact-deleted from:body"}]
+     [:div.contact-list
+      (for [c (:user/contacts user)]
+        [:div.contact
+         [c/image-frame {:profile/image (user/avatar-css-value c)}]
+         [:div.details
+          [:div.profile-name (:public-profile/name c)]
+          [:div.email (:discord/email c)]]
+         [:button.remove-btn {:hx-delete (url-for :contact/link {:id (:db/id c)})}
+          [graphics/person-remove] "Remove"]])]]]))

src/co/gaiwan/compass/html/graphics.clj

@@ -66,3 +66,17 @@
   (garden.stylesheet/at-keyframes
    :dash
    [:to {:stroke-dashoffset 0}]))
+
+(o/defstyled scan-icon :svg
+  ([]
+   [:<> {:viewbox "0 0 1040 1024"}
+    [:path
+     {:d "M331.312778 27.631314l0-0.002047L200.124923 27.629267c-93.889367 0-170.006975 76.115562-170.006975 170.006975l0 131.107013c0 0.024559 0 0.053212 0 0.080841 0 33.271778 26.970258 60.239989 60.238966 60.239989 33.269731 0 60.239989-26.968212 60.239989-60.239989l0-0.002047 0 0L150.596903 211.858152c0-35.208896 28.54308-63.751976 63.752999-63.751976l116.879987 0c0.024559 0 0.053212 0.002047 0.080841 0.002047 33.268708 0 60.239989-26.968212 60.239989-60.238966C391.549697 54.601572 364.579439 27.631314 331.312778 27.631314z"}]
+    [:path
+     {:d "M993.938334 690.254823c0-33.267685-26.969235-60.236919-60.238966-60.236919s-60.238966 26.969235-60.238966 60.236919l0 0.002047 0 0 0 116.962875c0 35.20992-28.544103 63.752999-63.754023 63.752999L692.743504 870.972744c-33.268708 0-60.241013 26.970258-60.241013 60.237943 0 33.270754 26.972305 60.238966 60.241013 60.238966 0.026606 0 0.054235-0.002047 0.082888-0.002047l131.104967 0c93.892437 0 170.006975-76.116585 170.006975-170.007999L993.938334 690.25687l0 0L993.938334 690.254823z"}]
+    [:path
+     {:d "M331.312778 870.972744 214.349903 870.972744c-35.20992 0-63.752999-28.54308-63.752999-63.752999L150.596903 690.25687l0 0 0-0.002047c0-33.267685-26.970258-60.236919-60.239989-60.236919-33.268708 0-60.238966 26.969235-60.238966 60.236919 0 0.026606 0 0.056282 0 0.080841l0 131.103944c0 93.891414 76.117608 170.007999 170.006975 170.007999l131.104967 0c0.028653 0 0.056282 0.002047 0.082888 0.002047 33.269731 0 60.239989-26.968212 60.239989-60.238966C391.551744 897.943003 364.581486 870.972744 331.312778 870.972744z"}]
+    [:path
+     {:d "M823.931359 27.629267l-131.187855 0 0 0.002047c-33.268708 0-60.241013 26.970258-60.241013 60.237943 0 33.270754 26.972305 60.238966 60.241013 60.238966 0.026606 0 0.054235-0.002047 0.082888-0.002047l116.879987 0c35.20992 0 63.754023 28.54308 63.754023 63.751976l0 116.966968 0 0c0 33.271778 26.969235 60.237943 60.238966 60.237943s60.238966-26.966165 60.238966-60.237943l0 0L993.938334 197.636243C993.938334 103.744829 917.823795 27.629267 823.931359 27.629267z"}]
+    [:path
+     {:d "M963.820386 449.299983c-0.026606 0-0.056282 0.002047-0.080841 0.002047L60.321854 449.302029c-0.028653 0-0.056282-0.002047-0.082888-0.002047-33.270754 0-60.238966 26.970258-60.238966 60.241013 0 33.266661 26.968212 60.237943 60.238966 60.237943l903.579373 0 0 0 0.002047 0c33.267685 0 60.234873-26.970258 60.234873-60.237943C1024.055259 476.270241 997.087047 449.299983 963.820386 449.299983z"}]]))

src/co/gaiwan/compass/html/navigation.clj

@@ -98,7 +98,8 @@
      (for [[href caption] {(url-for :sessions/index)        "Sessions & Activities"
                            ;; (url-for :attendees/index)    "Attendees"
                            ;; (url-for :profile/index)      "Profile & Settings"
-                           (url-for :session/new) "Create Activity"}]
+                           (url-for :session/new) "Create Activity"
+                           (url-for :contacts/index)  "Contacts"}]
        [:li [:a {:href href
                  :on-click "document.body.classList.toggle('menu-open')"}
              caption]])