diff --git a/resources/images/icons/channel-notification20@2x.png b/resources/images/icons/channel-notification20@2x.png new file mode 100644 index 0000000000..916a760774 Binary files /dev/null and b/resources/images/icons/channel-notification20@2x.png differ diff --git a/resources/images/icons/channel-notification20@3x.png b/resources/images/icons/channel-notification20@3x.png new file mode 100644 index 0000000000..563a711a23 Binary files /dev/null and b/resources/images/icons/channel-notification20@3x.png differ diff --git a/resources/images/icons/channel-notification_dark20@2x.png b/resources/images/icons/channel-notification_dark20@2x.png new file mode 100644 index 0000000000..cc48273481 Binary files /dev/null and b/resources/images/icons/channel-notification_dark20@2x.png differ diff --git a/resources/images/icons/channel-notification_dark20@3x.png b/resources/images/icons/channel-notification_dark20@3x.png new file mode 100644 index 0000000000..e93e4c0b98 Binary files /dev/null and b/resources/images/icons/channel-notification_dark20@3x.png differ diff --git a/resources/images/icons/muted20@2x.png b/resources/images/icons/muted20@2x.png new file mode 100644 index 0000000000..b694b7967a Binary files /dev/null and b/resources/images/icons/muted20@2x.png differ diff --git a/resources/images/icons/muted20@3x.png b/resources/images/icons/muted20@3x.png new file mode 100644 index 0000000000..f4941dbe34 Binary files /dev/null and b/resources/images/icons/muted20@3x.png differ diff --git a/src/quo2/components/avatars/channel_avatar.cljs b/src/quo2/components/avatars/channel_avatar.cljs index 019e7862a6..26b9bf6019 100644 --- a/src/quo2/components/avatars/channel_avatar.cljs +++ b/src/quo2/components/avatars/channel_avatar.cljs @@ -5,9 +5,8 @@ [quo2.components.markdown.text :as text] [quo.theme :as theme])) -(defn channel-avatar [{:keys [big? lock-status emoji-background-color emoji]}] - (let [locked? (= :locked lock-status) - lock-exists? (and lock-status (not= :none lock-status)) +(defn channel-avatar [{:keys [big? locked? emoji-background-color emoji]}] + (let [lock-exists? (some? locked?) dark? (theme/dark?)] [rn/view {:style {:width (if big? 32 24) :height (if big? 32 24) @@ -24,11 +23,11 @@ (when lock-exists? [rn/view {:style {:position :absolute :left (if big? - 13 - 5) - :top (if big? 14 - 5) + 8) + :top (if big? + 15 + 8) :background-color (if dark? colors/neutral-90 colors/white) @@ -40,6 +39,6 @@ {:color (if dark? colors/neutral-40 colors/neutral-50) - :container-style {:width 16 - :height 16} + :container-style {:width 12 + :height 12} :size 12}]])]])) diff --git a/src/quo2/components/list_items/channel.cljs b/src/quo2/components/list_items/channel.cljs new file mode 100644 index 0000000000..036c2735a6 --- /dev/null +++ b/src/quo2/components/list_items/channel.cljs @@ -0,0 +1,58 @@ +(ns quo2.components.list-items.channel + (:require [quo.react-native :as rn] + [quo2.foundations.colors :as colors] + [quo2.components.counter.counter :as quo2.counter] + [quo2.components.icon :as quo2.icons] + [quo2.components.avatars.channel-avatar :as channel-avatar] + [quo2.components.markdown.text :as quo2.text] + [quo.theme :as theme])) + +(defn list-item [{:keys [name locked? mentions-count unread-messages? + muted? is-active-channel? emoji channel-color] + :or {channel-color colors/primary-50}}] + [rn/view {:style (merge {:height 48 + :display :flex + :border-radius 12 + :flex-direction :row + :justify-content :space-between + :align-items :center + :width "100%" + :padding-left 12 + :padding-right 12} + (when is-active-channel? + {:background-color (colors/theme-alpha channel-color 0.05 0.05)}))} + [rn/view {:display :flex + :flex-direction :row + :justify-content :flex-start + :align-items :center} + [channel-avatar/channel-avatar + {:big? true + :locked? locked? + :emoji-background-color (colors/theme-alpha channel-color 0.1 0.1) + :emoji emoji}] + [quo2.text/text + {:style (merge {:margin-left 12} + (when + (and (not locked?) + muted?) + {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)})) + :weight :medium :size :paragraph-1} (str "# " name)]] + [rn/view {:style {:height 20}} + (when (and (not locked?) + muted?) + [quo2.icons/icon :main-icons2/muted? + {:size 20 + :no-color true}]) + (when (and (not locked?) + (not muted?) + (pos? (int mentions-count))) + [rn/view {:style {:margin-right 2 + :margin-top 2}} + [quo2.counter/counter {:override-bg-color channel-color} mentions-count]]) + (when (and (not locked?) + (not muted?) + (not (pos? (int mentions-count))) + unread-messages?) + [quo2.icons/theme-icon :main-icons2/channel-notification + {:size 20 + :no-color true}])]]) \ No newline at end of file diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index 2446db2342..19ad4a9661 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -13,9 +13,22 @@ (let [rgb (string/split value #",")] (str (string/join "," (butlast rgb)) "," opacity ")"))))) +(def theme-alpha + (memoize + (fn + ([color light-opacity dark-opacity] + (theme-alpha color light-opacity color dark-opacity)) + ([light-color light-opacity dark-color dark-opacity] + (if (theme/dark?) + (alpha light-color light-opacity) + (alpha dark-color dark-opacity)))))) + + ;;;;Neutral ;;Solid + + (def neutral-5 "#F5F6F8") (def neutral-10 "#F0F2F5") (def neutral-20 "#E7EAEE") diff --git a/src/quo2/screens/avatars/channel_avatar.cljs b/src/quo2/screens/avatars/channel_avatar.cljs index d40b70eb10..e9b0e5ebfe 100644 --- a/src/quo2/screens/avatars/channel_avatar.cljs +++ b/src/quo2/screens/avatars/channel_avatar.cljs @@ -14,17 +14,19 @@ {:label "Avatar color" :key :emoji :type :text} - {:label "Lock status" - :key :lock-status + {:label "is Locked?" + :key :locked? :type :select - :options [{:key :unlocked + :options [{:key nil + :value "None"} + {:key false :value "Unlocked"} - {:key :locked + {:key true :value "Locked"}]}]) (defn cool-preview [] (let [state (reagent/atom {:big? true - :lock-status :none + :locked? nil :emoji "🍑" :emoji-background-color :gray})] (fn [] diff --git a/src/quo2/screens/list_items/channel.cljs b/src/quo2/screens/list_items/channel.cljs new file mode 100644 index 0000000000..0d81bff4b4 --- /dev/null +++ b/src/quo2/screens/list_items/channel.cljs @@ -0,0 +1,72 @@ +(ns quo2.screens.list-items.channel + (:require [quo.react-native :as rn] + [reagent.core :as reagent] + [quo.previews.preview :as preview] + [quo2.foundations.colors :as colors] + [quo2.components.list-items.channel :as quo2-channel])) + +(def descriptor [{:label "Muted?:" + :key :muted? + :type :boolean} + {:label "Name" + :key :name + :type :text} + {:label "Number of mentions" + :key :mentions-count + :type :text} + {:label "Unread Messages:" + :key :unread-messages? + :type :boolean} + {:label "Avatar emoji" + :key :emoji + :type :text} + {:label "is Locked?" + :key :locked? + :type :select + :options [{:key nil + :value "None"} + {:key false + :value "Unlocked"} + {:key true + :value "Locked"}]} + {:label "Is Pressed Channel:" + :key :is-active-channel? + :type :boolean} + {:label "Channel color" + :key :channel-color + :type :select + :options [{:key "#00FFFF" + :value "Blue"} + {:key "#FF00FF" + :value "Pink"} + {:key "#FFFF00" + :value "Yellow"}]}]) + +(defn cool-preview [] + (let [state (reagent/atom {:is-active-channel? false + :muted? false + :unread-messages? false + :emoji "🍑" + :channel-color "#4360DF" + :mentions-count "5" + :name "channel" + :locked? true})] + (fn [] + [rn/view {:margin-bottom 50 + :padding-bottom 16 + :padding-right 8 + :padding-left 8 + + :padding-top 16} + [preview/customizer state descriptor] + [rn/view {:padding-vertical 60 + :align-items :center} + [quo2-channel/list-item @state]]]))) + +(defn preview-channel [] + [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) + :flex 1} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index ac464dcfcd..d53cc2e9cd 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -7,6 +7,7 @@ [quo.theme :as theme] [quo2.components.markdown.text :as quo2-text] [quo2.components.buttons.button :as quo2-button] + [quo2.screens.avatars.channel-avatar :as channel-avatar] [quo2.screens.avatars.icon-avatar :as icon-avatar] [quo2.screens.avatars.group-avatar :as group-avatar] [quo2.screens.avatars.user-avatar :as user-avatar] @@ -16,12 +17,18 @@ [quo2.screens.community.community-card-view :as community-card] [quo2.screens.dividers.divider-label :as divider-label] [quo2.screens.dividers.new-messages :as new-messages] + [quo2.screens.list-items.dropdown :as dropdown] [quo2.screens.info.info-message :as info-message] [quo2.screens.info.information-box :as information-box] + [quo2.screens.info.lowest-price :as lowest-price] + [quo2.screens.list-items.preview-lists :as preview-lists] + [quo2.screens.list-items.channel :as channel] [quo2.screens.markdown.text :as text] [quo2.screens.messages.gap :as messages-gap] [quo2.screens.notifications.activity-logs :as activity-logs] [quo2.screens.reactions.react :as react] + [quo2.screens.switcher.switcher-cards :as switcher-cards] + [quo2.screens.tabs.account-selector :as account-selector] [quo2.screens.tabs.segmented-tab :as segmented] [quo2.screens.tabs.tabs :as tabs] [quo2.screens.tags.context-tags :as context-tags] @@ -30,12 +37,6 @@ [quo2.screens.tags.status-tags :as status-tags] [quo2.screens.tags.token-tag :as token-tag] [quo2.screens.wallet.token-overview :as token-overview] - [quo2.screens.list-items.preview-lists :as preview-lists] - [quo2.screens.info.lowest-price :as lowest-price] - [quo2.screens.avatars.channel-avatar :as channel-avatar] - [quo2.screens.switcher.switcher-cards :as switcher-cards] - [quo2.screens.tabs.account-selector :as account-selector] - [quo2.screens.list-items.dropdown :as dropdown] [re-frame.core :as re-frame])) (def screens-categories @@ -69,6 +70,9 @@ {:name :new-messages :insets {:top false} :component new-messages/preview-new-messages}] + :dropdowns [{:name :dropdown + :insets {:top false} + :component dropdown/preview-dropdown}] :info [{:name :info-message :insets {:top false} :component info-message/preview-info-message} @@ -78,6 +82,12 @@ {:name :lowest-price :insets {:top false} :component lowest-price/preview-lowest-price}] + :list-items [{:name :channel + :insets {:top false} + :component channel/preview-channel} + {:name :preview-lists + :insets {:top false} + :component preview-lists/preview-preview-lists}] :markdown [{:name :texts :insets {:top false} :component text/preview-text}] @@ -90,6 +100,9 @@ :reactions [{:name :react :insets {:top false} :component react/preview-react}] + :switcher [{:name :switcher-cards + :insets {:top false} + :component switcher-cards/preview-switcher-cards}] :tabs [{:name :segmented :insets {:top false} :component segmented/preview-segmented} @@ -116,16 +129,7 @@ :component token-tag/preview-token-tag}] :wallet [{:name :token-overview :insets {:top false} - :component token-overview/preview-token-overview}] - :dropdowns [{:name :dropdown - :insets {:top false} - :component dropdown/preview-dropdown}] - :list-items [{:name :preview-lists - :insets {:top false} - :component preview-lists/preview-preview-lists}] - :switcher [{:name :switcher-cards - :insets {:top false} - :component switcher-cards/preview-switcher-cards}]}) + :component token-overview/preview-token-overview}]}) (def screens (flatten (map val screens-categories)))