Skip to content

Commit

Permalink
stickky projects: outlines and sort
Browse files Browse the repository at this point in the history
  • Loading branch information
@mhuebert
mhuebert committed Jan 25, 2024
1 parent fcf7a1c commit 74c8e22
Show file tree
Hide file tree
Showing 9 changed files with 52 additions and 27 deletions.
2 changes: 2 additions & 0 deletions src/sb/app.cljc
View file
Expand Up @@ -35,6 +35,8 @@
:project/badges {:view field.ui/badges-field}
:prose/as-map {:view field.ui/prose-field}
:entity/tags {:view field.ui/tags-field}
:board/sticky-color {:view field.ui/color-field-with-label
:props {:field/label "Sticky color"}}
:account/email {:props {:type "email"
:placeholder (t :tr/email)}
:validators [form.ui/email-validator]}
Expand Down
6 changes: 4 additions & 2 deletions src/sb/app/board/admin_ui.cljc
View file
Expand Up @@ -35,6 +35,7 @@
:multiple true}

[:div.field-label (t :tr/basic-settings)]

[:div.flex-v.gap-4

(use-persisted :entity/title)
Expand All @@ -47,9 +48,10 @@

[:div.field-label (t :tr/projects-and-members)]
[:div.flex-v.gap-4

(use-persisted :board/sticky-color)
(use-persisted :entity/member-fields)
(use-persisted :entity/project-fields)]
(use-persisted :entity/project-fields)
]


[:div.field-label (t :tr/registration)]
Expand Down
2 changes: 2 additions & 0 deletions src/sb/app/board/data.cljc
View file
Expand Up @@ -129,6 +129,7 @@

(def project-fields `[~@entity.data/listing-fields
:entity/field-entries
:project/sticky?
{:entity/video [:video/url]}
{:entity/parent [:entity/id]}
{:membership/_entity [~@entity.data/id-fields
Expand Down Expand Up @@ -197,6 +198,7 @@
{:image/background [:entity/id]}
{:entity/domain-name [:domain-name/name]}
:entity/member-tags
:board/sticky-color
{:entity/member-fields ~field.data/field-keys}
{:entity/project-fields ~field.data/field-keys}] board-id)
(merge {:membership/roles roles}))))
Expand Down
12 changes: 7 additions & 5 deletions src/sb/app/board/ui.cljc
View file
Expand Up @@ -137,11 +137,13 @@
(some->> (seq (data/drafts {:board-id board-id}))
(into [:div.grid.border-b-2.border-gray-300.border-dashed.py-3.mb-3]
(map project.ui/card)))
(into [card-grid]
(comp (ui/filtered @?filter)
(map (partial project.ui/card
{:entity/project-fields (filter :field/show-on-card? (:entity/project-fields board))})))
(data/projects {:board-id board-id}))]
;; TODO add sorting to filter-bar
(->> (data/projects {:board-id board-id})
(sort-by (complement :project/sticky?))
(into [card-grid]
(comp (ui/filtered @?filter)
(map (partial project.ui/card
{:entity/project-fields (filter :field/show-on-card? (:entity/project-fields board))})))))]

[radix/tab-content {:value (t :tr/members)}
(into [card-grid]
Expand Down
4 changes: 2 additions & 2 deletions src/sb/app/field/admin_ui.cljc
View file
Expand Up @@ -38,7 +38,7 @@
:style {:background-color @?color
:color (color/contrasting-text-color @?color)}}]
[:div.relative.w-10.focus-within-ring.rounded.overflow-hidden.self-stretch
[field.ui/color-field ?color props]]
[field.ui/color-field* ?color props]]
[radix/dropdown-menu {:id :field-option
:trigger [:button.p-1.relative.icon-gray.cursor-default.rounded.hover:bg-gray-200.self-stretch
[icons/ellipsis-horizontal "w-4 h-4"]]
Expand Down Expand Up @@ -250,7 +250,7 @@
:field/multi-line? false
:field/label false})]
[:div.relative.w-10.h-10.overflow-hidden.rounded.outline.outline-black.outline-1
[field.ui/color-field ?color field-props]]
[field.ui/color-field* ?color field-props]]
[:button.flex.items-center {:type "submit"} [icons/checkmark "w-5 h-5 icon-gray"]]]
[field.ui/checkbox-field ?restricted? (merge field-props
{:field/classes {:wrapper "pl-3"}})]])
Expand Down
22 changes: 14 additions & 8 deletions src/sb/app/field/ui.cljc
View file
Expand Up @@ -170,8 +170,8 @@
data-props {:data-touched (:touched ?field)
:data-invalid (not (io/valid? ?field))
:data-focused (:focused ?field)}
!input-ref (h/use-ref)
focused? (some-> @!input-ref (= (j/get js/window.document :activeElement)))]
!input-ref (h/use-ref)
focused? (some-> @!input-ref (= (j/get js/window.document :activeElement)))]
;; TODO ... shouldn't ?field retain :focused/:touched metadata when its persisted value changes?
;; currently we create a new ?field when the persisted value changes, which is a bit of a hack
(when (or can-edit? (u/some-str (:value props)))
Expand All @@ -183,7 +183,7 @@
[auto-size (-> (u/dissoc-qualified props)
(v/merge-props
data-props
{:ref !input-ref
{:ref !input-ref
:disabled (not can-edit?)
:class ["w-full" (:input classes)]
:placeholder (:placeholder props)
Expand Down Expand Up @@ -295,7 +295,7 @@
options
can-edit?]
:or {unwrap identity
wrap identity}}]
wrap identity}}]
[:div.field-wrapper
(form.ui/show-label ?field label)
(if can-edit?
Expand All @@ -317,7 +317,7 @@
(when (:loading? ?field)
[:div.loading-bar.absolute.bottom-0.left-0.right-0 {:class "h-[3px]"}])])

(ui/defview color-field
(ui/defview color-field*
;; color field must be contained within a relative.overflow-hidden element, which it expands to fill.
[?field {:as props :keys [field/color-list]}]
(let [list-id (str (goog/getUid ?field) "-colors")]
Expand All @@ -330,8 +330,8 @@
[:input.default-ring.default-ring-hover.rounded
(-> (form.ui/?field-props ?field
(merge props
{:field/event->value (j/get-in [:target :value])
:save-on-change? true}))
{:field/event->value (j/get-in [:target :value])
:field/save-on-change? true}))
(v/merge-props {:list (when (seq color-list) list-id)
:style {:top -10
:left -10
Expand All @@ -342,6 +342,12 @@
(update :value #(or % "#ffffff"))
(u/dissoc-qualified))]]))

(ui/defview color-field-with-label [?field {:as props :keys [field/label]}]
[:div.flex.gap-3.items-center
(form.ui/show-label ?field label)
(with-messages-popover ?field
[:div.relative.w-5.h-5.overflow-hidden.outline.outline-black.outline-1.rounded [color-field* ?field props]])])

(ui/defview plural-item-form [{:as props
:keys [?items
make-?item
Expand Down Expand Up @@ -450,7 +456,7 @@
:field/multi-line? false
:field/can-edit? true
:field/label false}]
[:div.relative.w-10.h-10.overflow-hidden.rounded.outline.outline-black.outline-1 [color-field ?color {:field/can-edit? true}]]
[:div.relative.w-10.h-10.overflow-hidden.rounded.outline.outline-black.outline-1 [color-field* ?color {:field/can-edit? true}]]
[:button.flex.items-center {:type "submit"} [icons/checkmark "w-5 h-5 icon-gray"]]])
:show-?item (fn [{:as ?badge
:syms [?label ?color]} {:keys [membership/roles]}]
Expand Down
4 changes: 2 additions & 2 deletions src/sb/app/form/ui.cljc
View file
Expand Up @@ -36,8 +36,8 @@
{:keys [field/event->value
field/wrap
field/unwrap
on-change
save-on-change?]
field/save-on-change?
on-change]
:or {wrap identity
unwrap identity}}]
{:id (field-id ?field)
Expand Down
2 changes: 2 additions & 0 deletions src/sb/app/project/data.cljc
View file
Expand Up @@ -96,6 +96,7 @@
:badge/color]}
:entity/field-entries
:entity/draft?
:project/sticky?
{:membership/_entity [:entity/id
:entity/kind
:entity/created-at
Expand All @@ -106,6 +107,7 @@
{:image/avatar [:entity/id]}]}]}
{:entity/parent
[~@entity.data/listing-fields
:board/sticky-color
{:entity/project-fields ~field.data/field-keys}]}]
project-id)
{:membership/roles roles})))
Expand Down
25 changes: 17 additions & 8 deletions src/sb/app/project/ui.cljc
View file
Expand Up @@ -137,7 +137,11 @@
"Visitor" #{}} "Current User")
field-params {:membership/roles roles
:field/can-edit? can-edit?}]
[:div.flex-v.gap-6.pb-6
[:div.flex-v.gap-6.pb-6.rounded-lg.relative
(when (:project/sticky? project)
{:class "outline outline-4"
:style {:outline-color (-> project :entity/parent :board/sticky-color)
:margin 4}})
;; title row
[:div.flex-v
(when (:entity/draft? project)
Expand All @@ -158,12 +162,12 @@

[:div.flex.px-1.rounded-bl-lg.border-b.border-l.absolute.top-0.right-0
dev-panel
(comment
(when (:role/board-admin roles)
;; - archive
[radix/dropdown-menu
{:trigger [:div.flex.items-center [icons/ellipsis-horizontal "rotate-90 icon-gray"]]
:items []}]))

(when (:role/board-admin roles)
;; - archive
[radix/dropdown-menu
{:trigger [:div.flex.items-center [icons/ellipsis-horizontal "rotate-90 icon-gray"]]
:items [[{} [entity.ui/persisted-attr project :project/sticky? (assoc field-params :field/label "Sticky?")]]]}])

[radix/tooltip "Back to board"
[:a.modal-title-icon {:href (routing/entity-path (:entity/parent project) 'ui/show)}
Expand All @@ -176,6 +180,7 @@
[:div.modal-title-icon [icons/close]]]]]]

[:div.px-body.flex-v.gap-6

[entity.ui/persisted-attr project :project/badges field-params]
[entity.ui/persisted-attr project :entity/description (merge field-params
{:field/label false
Expand Down Expand Up @@ -206,10 +211,14 @@
entity/title
entity/description
entity/field-entries
project/sticky?
membership/roles]}]
(let [board-members (->> (:membership/_entity entity) (mapv :membership/member))]
[:a.flex-v.hover:bg-gray-100.rounded-lg.bg-slate-100.py-3.gap-3.
{:href (routing/entity-path entity 'ui/show)}
(v/merge-props {:href (routing/entity-path entity 'ui/show)}
(when sticky?
{:class "outline outline-4"
:style {:outline-color (-> entity :entity/parent :board/sticky-color)}}))

[:div.flex.relative.gap-3.items-start.px-3.cursor-default.flex-auto
[:div.flex-grow.flex-v.gap-1
Expand Down

0 comments on commit 74c8e22

Please sign in to comment.