mirror of
https://github.com/status-im/status-react.git
synced 2025-01-11 03:26:31 +00:00
bigger draggable-box top margin, chat screen overlay
This commit is contained in:
parent
0c7aab902a
commit
84c81002c1
@ -15,6 +15,10 @@
|
||||
:bar-style "light-content"
|
||||
:translucent? true
|
||||
:color styles/color-transparent}
|
||||
:overlay {:height 25
|
||||
:bar-style "dark-content"
|
||||
:translucent? true
|
||||
:color styles/color-transparent}
|
||||
:modal {:height 0
|
||||
:bar-style "light-content"
|
||||
:color styles/color-black}}
|
||||
|
@ -110,10 +110,11 @@
|
||||
|
||||
(defview chat-toolbar []
|
||||
[show-actions? [:chat-ui-props :show-actions?]
|
||||
show-chat-overlay? [:show-chat-overlay?]
|
||||
accounts [:get :accounts]
|
||||
creating? [:get :creating-account?]]
|
||||
[view
|
||||
[status-bar]
|
||||
[view (when show-chat-overlay? {:style {:zIndex 0}})
|
||||
[status-bar {:type (if show-chat-overlay? :overlay :default)}]
|
||||
[toolbar {:hide-nav? (or (empty? accounts) show-actions? creating?)
|
||||
:custom-content [toolbar-content-view]
|
||||
:custom-action [toolbar-action]}]
|
||||
@ -175,6 +176,7 @@
|
||||
show-actions? [:chat-ui-props :show-actions?]
|
||||
show-bottom-info? [:chat-ui-props :show-bottom-info?]
|
||||
show-emoji? [:chat-ui-props :show-emoji?]
|
||||
show-chat-overlay? [:show-chat-overlay?]
|
||||
layout-height [:get :layout-height]
|
||||
input-text [:chat :input-text]]
|
||||
{:component-did-mount #(dispatch [:check-autorun])
|
||||
@ -186,6 +188,8 @@
|
||||
(dispatch [:set-layout-height height]))))}
|
||||
[chat-toolbar]
|
||||
[messages-view group-chat]
|
||||
(when show-chat-overlay?
|
||||
[view {:style st/result-box-overlay}])
|
||||
[input/container {:text-empty? (str/blank? input-text)}]
|
||||
(when show-actions?
|
||||
[actions-view])
|
||||
|
@ -4,8 +4,7 @@
|
||||
[status-im.utils.platform :as platform]
|
||||
[taoensso.timbre :as log]))
|
||||
|
||||
(def color-root-border "rgba(192, 198, 202, 0.28)")
|
||||
(def color-root-border-android "#e8eaeb")
|
||||
(def color-root-border "#e8eaeb")
|
||||
(def color-input "#edf1f3")
|
||||
(def color-input-helper-text "rgb(182, 189, 194)")
|
||||
(def color-input-helper-placeholder "rgb(182, 189, 194)")
|
||||
@ -22,8 +21,7 @@
|
||||
:elevation 2
|
||||
:margin-bottom margin-bottom
|
||||
:border-top-width 1
|
||||
:ios {:border-top-color color-root-border}
|
||||
:android {:border-top-color color-root-border-android}})
|
||||
:border-top-color color-root-border})
|
||||
|
||||
(defn container [container-anim-margin bottom-anim-margin]
|
||||
{:background-color common/color-white
|
||||
|
@ -6,6 +6,7 @@
|
||||
text1-color
|
||||
text2-color
|
||||
text4-color
|
||||
color-black
|
||||
color-gray6]]
|
||||
[status-im.components.toolbar.styles :refer [toolbar-background1]]))
|
||||
|
||||
@ -215,3 +216,12 @@
|
||||
{:text-align :center
|
||||
:text-align-vertical :center
|
||||
:color :#7099e6})
|
||||
|
||||
(def result-box-overlay
|
||||
{:background-color color-black
|
||||
:opacity 0.6
|
||||
:position :absolute
|
||||
:top 0
|
||||
:bottom 0
|
||||
:left 0
|
||||
:right 0})
|
||||
|
@ -111,6 +111,26 @@
|
||||
:default
|
||||
nil)))))
|
||||
|
||||
(register-sub
|
||||
:show-parameter-box?
|
||||
(fn [db _]
|
||||
(let [chat-parameter-box (subscribe [:chat-parameter-box])
|
||||
show-suggestions? (subscribe [:show-suggestions?])
|
||||
input-text (subscribe [:chat :input-text])
|
||||
validation-messages (subscribe [:chat-ui-props :validation-messages])]
|
||||
(reaction (and @chat-parameter-box
|
||||
(not (str/blank? @input-text))
|
||||
(not @validation-messages)
|
||||
(not @show-suggestions?))))))
|
||||
|
||||
(register-sub
|
||||
:show-chat-overlay?
|
||||
(fn [db _]
|
||||
(let [show-parameter-box? (subscribe [:show-parameter-box?])
|
||||
result-box (subscribe [:chat-ui-props :result-box])]
|
||||
(reaction (or @show-parameter-box?
|
||||
@result-box)))))
|
||||
|
||||
(register-sub
|
||||
:command-completion
|
||||
(fn [db [_ chat-id]]
|
||||
|
@ -18,14 +18,8 @@
|
||||
(:hiccup parameter-box)))
|
||||
|
||||
(defview parameter-box-view []
|
||||
[chat-parameter-box [:chat-parameter-box]
|
||||
show-suggestions? [:show-suggestions?]
|
||||
input-text [:chat :input-text]
|
||||
validation-messages [:chat-ui-props :validation-messages]]
|
||||
(when (and chat-parameter-box
|
||||
(not (str/blank? input-text))
|
||||
(not validation-messages)
|
||||
(not show-suggestions?))
|
||||
[show-parameter-box? [:show-parameter-box?]]
|
||||
(when show-parameter-box?
|
||||
[expandable-view {:key :parameter-box
|
||||
:draggable? true}
|
||||
[parameter-box-container]]))
|
||||
[parameter-box-container]]))
|
||||
|
@ -1,16 +1,19 @@
|
||||
(ns status-im.chat.views.input.utils
|
||||
(:require [taoensso.timbre :as log]
|
||||
[status-im.utils.platform :refer [platform-specific]]))
|
||||
[status-im.components.toolbar-new.styles :as toolbar-st]
|
||||
[status-im.utils.platform :as p]))
|
||||
|
||||
(def min-height 17)
|
||||
(def default-height 300)
|
||||
|
||||
(defn default-container-area-height [bottom screen-height]
|
||||
(let [status-bar-height (get-in platform-specific [:component-styles :status-bar :default :height])]
|
||||
(let [status-bar-height (get-in p/platform-specific [:component-styles :status-bar :overlay :height])]
|
||||
(if (> (+ bottom default-height status-bar-height) screen-height)
|
||||
(- screen-height bottom status-bar-height)
|
||||
default-height)))
|
||||
|
||||
(defn max-container-area-height [bottom screen-height]
|
||||
(let [status-bar-height (get-in platform-specific [:component-styles :status-bar :default :height])]
|
||||
(- screen-height bottom status-bar-height)))
|
||||
(let [status-bar-height (get-in p/platform-specific [:component-styles :status-bar :overlay :height])
|
||||
toolbar-height (:height toolbar-st/toolbar)
|
||||
margin-top (+ status-bar-height (/ toolbar-height 2))]
|
||||
(- screen-height bottom margin-top)))
|
||||
|
@ -13,6 +13,9 @@
|
||||
:transparent {:height 20
|
||||
:bar-style "light-content"
|
||||
:color styles/color-transparent}
|
||||
:overlay {:height 20
|
||||
:bar-style "dark-content"
|
||||
:color styles/color-white}
|
||||
:modal {:height 20
|
||||
:bar-style "light-content"
|
||||
:color "#2f3031"}}
|
||||
|
Loading…
x
Reference in New Issue
Block a user