1-1 chats bug fixes

* removed horizontal padding for separator line

* fixed: page-nav button backgrounds visibility

* updated top margin

* updated selected item top margin

* fixed: author and  message margins
This commit is contained in:
John Ngei 2023-10-06 00:45:26 +03:00 committed by GitHub
parent 6e897f0ea6
commit 933a5a1a9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 48 additions and 49 deletions

View File

@ -14,7 +14,8 @@
(defn chat-key-text (defn chat-key-text
[] []
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50) {:color (colors/theme-colors colors/neutral-40 colors/neutral-50)
:margin-left 8}) :margin-left 8
:padding-top 1})
(defn middle-dot-chat-key (defn middle-dot-chat-key
[] []

View File

@ -8,7 +8,7 @@
(let [display-name (first (rf/sub [:contacts/contact-two-names-by-identity public-key])) (let [display-name (first (rf/sub [:contacts/contact-two-names-by-identity public-key]))
photo-path (rf/sub [:chats/photo-path public-key]) photo-path (rf/sub [:chats/photo-path public-key])
online? (rf/sub [:visibility-status-updates/online? public-key])] online? (rf/sub [:visibility-status-updates/online? public-key])]
[rn/view {:style {:padding-top 2}} [rn/view {:style {:padding-top 4}}
[rn/touchable-opacity [rn/touchable-opacity
{:active-opacity 1 {:active-opacity 1
:on-press #(rf/dispatch [:chat.ui/show-profile public-key])} :on-press #(rf/dispatch [:chat.ui/show-profile public-key])}

View File

@ -104,9 +104,9 @@
(fn [acc e] (fn [acc e]
(render-inline acc e chat-id style-override mention-first)) (render-inline acc e chat-id style-override mention-first))
[quo/text [quo/text
{:size :paragraph-1 {:style {:size :paragraph-1
:style {:margin-bottom (if mention-first (if platform/ios? 4 0) 2) :margin-bottom (if mention-first (if platform/ios? 4 0) 2)
:margin-top (if mention-first (if platform/ios? -4 0) 2) :margin-top (if mention-first (if platform/ios? -4 0) -1)
:color (when (seq style-override) colors/white)}}] :color (when (seq style-override) colors/white)}}]
children)]) children)])

View File

@ -39,7 +39,7 @@
(not show-reactions?) (not show-reactions?)
show-user-info?) show-user-info?)
[avatar/avatar from :small] [avatar/avatar from :small]
[rn/view {:padding-top 2 :width 32}])) [rn/view {:padding-top 4 :width 32}]))
(defn author (defn author
[{:keys [response-to [{:keys [response-to

View File

@ -229,11 +229,13 @@
:icon (:icon action) :icon (:icon action)
:on-press (fn [] :on-press (fn []
(rf/dispatch [:hide-bottom-sheet]) (rf/dispatch [:hide-bottom-sheet])
(when on-press (on-press)))}])) (when on-press (on-press)))}]))]
(when-not (empty? danger-actions)
[quo/separator])
;; DANGER ACTIONS (when-not (empty? danger-actions)
[quo/separator {:style {:margin-vertical 8}}])
;; DANGER ACTIONS
[rn/view {:style {:padding-horizontal 8}}
(for [action danger-actions] (for [action danger-actions]
(let [on-press (:on-press action)] (let [on-press (:on-press action)]
^{:key (:id action)} ^{:key (:id action)}
@ -244,11 +246,13 @@
:icon (:icon action) :icon (:icon action)
:on-press (fn [] :on-press (fn []
(rf/dispatch [:hide-bottom-sheet]) (rf/dispatch [:hide-bottom-sheet])
(when on-press (on-press)))}])) (when on-press (on-press)))}]))]
(when-not (empty? admin-actions)
[quo/separator])
;; ADMIN ACTIONS (when-not (empty? admin-actions)
[quo/separator {:style {:margin-vertical 8}}])
;; ADMIN ACTIONS
[rn/view {:style {:padding-horizontal 8}}
(for [action admin-actions] (for [action admin-actions]
(let [on-press (:on-press action)] (let [on-press (:on-press action)]
^{:key (:id action)} ^{:key (:id action)}

View File

@ -5,17 +5,6 @@
(defonce ^:const navigation-bar-height 100) (defonce ^:const navigation-bar-height 100)
(defonce ^:const header-offset 56) (defonce ^:const header-offset 56)
(defn button-container
[position]
(merge
{:width 32
:height 32
:border-radius 10
:justify-content :center
:align-items :center
:background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)}
position))
(defn background-view (defn background-view
[theme] [theme]
{:position :absolute {:position :absolute
@ -62,14 +51,15 @@
:opacity (if loaded? 1 0)}) :opacity (if loaded? 1 0)})
(def header-container (def header-container
{:position :absolute {:position :absolute
:top header-offset :top header-offset
:left 0 :left 0
:right 0 :right 0
:padding-bottom 8 :padding-bottom 8
:display :flex :padding-horizontal 20
:flex-direction :row :display :flex
:overflow :hidden}) :flex-direction :row
:overflow :hidden})
(def header (def header
{:flex 1}) {:flex 1})

View File

@ -15,7 +15,7 @@
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(defn f-view (defn f-view
[{:keys [scroll-y chat chat-screen-loaded? all-loaded? display-name online? photo-path]}] [{:keys [theme scroll-y chat chat-screen-loaded? all-loaded? display-name online? photo-path]}]
(let [{:keys [group-chat chat-id]} chat (let [{:keys [group-chat chat-id]} chat
opacity-animation (reanimated/interpolate scroll-y opacity-animation (reanimated/interpolate scroll-y
[style/navigation-bar-height [style/navigation-bar-height
@ -46,22 +46,24 @@
[reanimated/view {:style (style/animated-blur-view all-loaded? opacity-animation)} [reanimated/view {:style (style/animated-blur-view all-loaded? opacity-animation)}
[blur/view [blur/view
{:blur-amount 20 {:blur-amount 20
:blur-type (colors/theme-colors :light :dark) :blur-type :transparent
:blur-radius (if platform/ios? 20 10) :overlay-color (colors/theme-colors colors/white-70-blur colors/neutral-95-opa-70-blur theme)
:style {:flex 1}}]] :blur-radius (if platform/ios? 20 10)
:style {:flex 1}}]]
[rn/view {:style style/header-container} [rn/view {:style style/header-container}
[rn/touchable-opacity [quo/button
{:active-opacity 1 {:icon-only? true
:type :grey
:background :blur
:size 32
:accessibility-label :back-button
:on-press #(do :on-press #(do
(when config/shell-navigation-disabled? (when config/shell-navigation-disabled?
(rf/dispatch [:chat/close])) (rf/dispatch [:chat/close]))
(rf/dispatch [:navigate-back])) (rf/dispatch [:navigate-back]))}
:accessibility-label :back-button :i/arrow-left]
:style (style/button-container {:margin-left 20})}
[quo/icon :i/arrow-left
{:size 20 :color (colors/theme-colors colors/black colors/white)}]]
[reanimated/view [reanimated/view
{:style (style/animated-header all-loaded? translate-animation title-opacity-animation)} {:style (style/animated-header all-loaded? translate-animation title-opacity-animation)}
[rn/view {:style style/header-content-container} [rn/view {:style style/header-content-container}
@ -88,15 +90,17 @@
:style (style/header-status)} :style (style/header-status)}
(i18n/label (i18n/label
(if online? :t/online :t/offline))])]]] (if online? :t/online :t/offline))])]]]
[rn/touchable-opacity [quo/button
{:active-opacity 1 {:icon-only? true
:style (style/button-container {:margin-right 20}) :type :grey
:background :blur
:size 32
:accessibility-label :options-button :accessibility-label :options-button
:on-press (fn [] :on-press (fn []
(rf/dispatch [:dismiss-keyboard]) (rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:show-bottom-sheet (rf/dispatch [:show-bottom-sheet
{:content (fn [] [actions/chat-actions chat true])}]))} {:content (fn [] [actions/chat-actions chat true])}]))}
[quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]] :i/options]]
[:f> [:f>
pin.banner/f-banner pin.banner/f-banner
{:chat-id chat-id {:chat-id chat-id