status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: messages gap component style (#13950)

This commit is contained in:
yqrashawn 2022-09-12 17:55:11 +08:00 committed by GitHub
parent 3fc5c89865
commit d77c5f1be7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/quo2/components/messages/gap.cljs
View File

@ -70,8 +70,8 @@
;;;; others ;;;; others
(defn circle [] (defn circle []
[rn/view [rn/view
{:width 8 {:width 9
:height 8 :height 9
:border-width 1 :border-width 1
:margin 4 :margin 4
:flex 0 :flex 0
@ -88,24 +88,24 @@
{:on-press on-press} {:on-press on-press}
[icon/icon "message-gap-info" {:size 12 :no-color true :container-style {:padding 4}}]]) [icon/icon "message-gap-info" {:size 12 :no-color true :container-style {:padding 4}}]])
;;;; left/right ;;;; timeline/body
(defn left [] (defn timeline []
[rn/view {:flex 0 [rn/view {:flex 0
:padding-left 11.5 :margin-right 20
:margin-right 20.5
:align-items :center :align-items :center
:width 9
:justify-content :space-between} :justify-content :space-between}
[circle] [circle]
[rn/image {:style {:flex 1} :source (get-image :circles) :resize-mode :repeat}] [rn/image {:style {:flex 1} :source (get-image :circles) :resize-mode :repeat}]
[circle]]) [circle]])
(defn right [timestamp-far timestamp-near chat-id gap-ids on-info-button-pressed] (defn body [timestamp-far timestamp-near chat-id gap-ids on-info-button-pressed]
[rn/view {:flex 1} [rn/view {:flex 1}
[rn/view [rn/view
{:flex-direction :row {:flex-direction :row
:align-items :center :align-items :center
:justify-content :space-between :justify-content :space-between
:margin-right 2} :margin-right 2}
[timestamp timestamp-far] [timestamp timestamp-far]
(when on-info-button-pressed [info-button on-info-button-pressed])] (when on-info-button-pressed [info-button on-info-button-pressed])]
@ -119,7 +119,7 @@
[timestamp timestamp-near]]) [timestamp timestamp-near]])
;;; main ;;; main
(defn messages-gap (defn gap
"if `gap-ids` and `chat-id` are provided, press the main text area to fetch messages "if `gap-ids` and `chat-id` are provided, press the main text area to fetch messages
if `on-info-button-pressed` fn is provided, the info button will show up and is pressable" if `on-info-button-pressed` fn is provided, the info button will show up and is pressable"
[{:keys [timestamp-far [{:keys [timestamp-far
@ -132,17 +132,19 @@
(fn [] (fn []
[rn/view [rn/view
{:on-layout #(reset! body-height (oget % "nativeEvent.layout.height")) {:on-layout #(reset! body-height (oget % "nativeEvent.layout.height"))
:overflow :hidden} :overflow :hidden
:flex 1}
[hborder {:type :top}] [hborder {:type :top}]
[hborder {:type :bottom}] [hborder {:type :bottom}]
[rn/view (merge {:width "100%" [rn/view (merge {:width "100%"
:background-color (get-color :background) :background-color (get-color :background)
:flex-direction :row :flex-direction :row
:padding 20 :padding 20
:padding-left 31
:margin-vertical 4} :margin-vertical 4}
style) style)
[left] [timeline]
[right timestamp-far timestamp-near chat-id gap-ids on-info-button-pressed]] [body timestamp-far timestamp-near chat-id gap-ids on-info-button-pressed]]
[vborder :left body-height] [vborder :left body-height]
[vborder :right body-height]]))) [vborder :right body-height]])))

4
src/quo2/screens/messages/gap.cljs
View File

@ -2,7 +2,7 @@
(:require (:require
[quo.previews.preview :as preview] [quo.previews.preview :as preview]
[quo.react-native :as rn] [quo.react-native :as rn]
[quo2.components.messages.gap :as quo2] [quo2.components.messages.gap :as gap]
[reagent.core :as reagent])) [reagent.core :as reagent]))
(def descriptor [{:label "Timestamp Far" (def descriptor [{:label "Timestamp Far"
@ -20,7 +20,7 @@
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:align-items :center} :align-items :center}
[quo2/messages-gap @state]]]))) [gap/gap @state]]])))
(defn preview-messages-gap [] (defn preview-messages-gap []
[rn/view {:flex 1} [rn/view {:flex 1}