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

Merge pull request #271 from status-im/feature/#255 

Multiline text input (#255)

Former-commit-id: 54633394ed
This commit is contained in:
Roman Volosovskyi 2016-09-27 17:22:17 +03:00 committed by GitHub
parent 4543a80707 311a61bc7f
commit 0f91e23798
14 changed files with 172 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
android/app/src/main/res/values/colors.xml Normal file
View File

@ -0,0 +1,5 @@
<resources>
<color name="primary">#7099e6</color>
<color name="primary_dark">#5c6bc0</color>
<color name="accent">#5c6bc0</color>
</resources>

6
android/app/src/main/res/values/strings.xml
View File

@ -1,10 +1,4 @@
<resources> <resources>
<string name="app_name">Status</string> <string name="app_name">Status</string>
<string name="root_warning">Your phone appears to be ROOTED, by pressing CONTINUE you understand and accept the risks in using this software.</string> <string name="root_warning">Your phone appears to be ROOTED, by pressing CONTINUE you understand and accept the risks in using this software.</string>
<string name="root_okay">Continue</string> <string name="root_okay">Continue</string>

10
android/app/src/main/res/values/styles.xml
View File

@ -1,8 +1,10 @@
<resources> <resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. --> <item name="colorPrimary">@color/primary</item>
</style> <item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
<item name="colorControlNormal">@color/primary</item>
<item name="colorControlActivated">@color/primary</item>
</style>
</resources> </resources>

5
ios/StatusIm.xcodeproj/project.pbxproj
View File

@ -765,7 +765,6 @@
TestTargetID = 13B07F861A680F5B00A75B9A; TestTargetID = 13B07F861A680F5B00A75B9A;
}; };
13B07F861A680F5B00A75B9A = { 13B07F861A680F5B00A75B9A = {
DevelopmentTeam = 259TWTDE52;
ProvisioningStyle = Automatic; ProvisioningStyle = Automatic;
}; };
}; };
@ -1246,7 +1245,7 @@
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
DEAD_CODE_STRIPPING = NO; DEAD_CODE_STRIPPING = NO;
DEVELOPMENT_TEAM = 259TWTDE52; DEVELOPMENT_TEAM = "";
FRAMEWORK_SEARCH_PATHS = "$(PROJECT_DIR)/../modules/react-native-status/ios/RCTStatus"; FRAMEWORK_SEARCH_PATHS = "$(PROJECT_DIR)/../modules/react-native-status/ios/RCTStatus";
HEADER_SEARCH_PATHS = ( HEADER_SEARCH_PATHS = (
"$(inherited)", "$(inherited)",
@ -1290,7 +1289,7 @@
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
DEAD_CODE_STRIPPING = NO; DEAD_CODE_STRIPPING = NO;
DEVELOPMENT_TEAM = 259TWTDE52; DEVELOPMENT_TEAM = "";
FRAMEWORK_SEARCH_PATHS = "$(PROJECT_DIR)/../modules/react-native-status/ios/RCTStatus"; FRAMEWORK_SEARCH_PATHS = "$(PROJECT_DIR)/../modules/react-native-status/ios/RCTStatus";
HEADER_SEARCH_PATHS = ( HEADER_SEARCH_PATHS = (
"$(inherited)", "$(inherited)",

7
src/status_im/chat/constants.cljs
View File

@ -1,6 +1,11 @@
(ns status-im.chat.constants) (ns status-im.chat.constants)
(def input-height 56) (def input-height 54)
(def max-input-height 66)
(def min-input-height 22)
(def input-spacing-top 16)
(def input-spacing-bottom 16)
(def request-info-height 61) (def request-info-height 61)
(def response-height-normal 211) (def response-height-normal 211)
(def minimum-suggestion-height (+ input-height request-info-height)) (def minimum-suggestion-height (+ input-height request-info-height))

58
src/status_im/chat/styles/message_input.cljs
View File

@ -1,30 +1,48 @@
(ns status-im.chat.styles.message-input (ns status-im.chat.styles.message-input
(:require [status-im.components.styles :refer [color-white (:require [status-im.components.styles :refer [color-white
color-blue]] color-blue]]
[status-im.chat.constants :refer [input-height]])) [status-im.chat.constants :refer [max-input-height
min-input-height
(def message-input-container input-spacing-top
{:flex 1 input-spacing-bottom]]))
:marginRight 0})
(def input-container (def input-container
{:flexDirection :column}) {:flex-direction :column})
(def input-view (defn input-view [content-height]
{:flexDirection :row {:flex-direction :row
:height input-height :align-items :center
:backgroundColor color-white}) :justify-content :center
:height (+ (min (max min-input-height content-height) max-input-height)
input-spacing-top
input-spacing-bottom)
:background-color color-white})
(def send-icon (defn message-input-container [content-height]
{:marginTop 10.5 {:height (min (max min-input-height content-height) max-input-height)
:marginLeft 12 :margin-top input-spacing-top
:width 15 :margin-bottom input-spacing-bottom
:height 15}) :flex 1
:flex-direction "column"
:margin-right 0})
(def send-wrapper
{:margin-bottom 8
:margin-right 10
:width 36
:flex 1
:flex-direction "column"
:align-items :center
:justify-content :flex-end})
(def send-container (def send-container
{:marginTop 10 {:width 36
:marginRight 10
:width 36
:height 36 :height 36
:borderRadius 18 :border-radius 18
:backgroundColor color-blue}) :background-color color-blue})
(def send-icon
{:margin-top 10.5
:margin-left 12
:width 15
:height 15})

25
src/status_im/chat/styles/plain_message.cljs
View File

@ -1,18 +1,21 @@
(ns status-im.chat.styles.plain-message (ns status-im.chat.styles.plain-message
(:require [status-im.components.styles :refer [text2-color]])) (:require [status-im.components.styles :refer [text1-color]]
[status-im.chat.constants :refer [max-input-height
min-input-height]]))
(defn message-input-button-touchable [w] (defn message-input-button-touchable [width content-height]
{:width w {:width width
:height 56 :flex 1
:alignItems :center :margin-bottom 14
:justifyContent :center}) :align-items :center
:justify-content :flex-end})
(defn message-input-button [scale] (defn message-input-button [scale]
{:transform [{:scale scale}] {:transform [{:scale scale}]
:width 24 :width 24
:height 24 :height 24
:alignItems :center :align-items :center
:justifyContent :center}) :justify-content :center})
(def list-icon (def list-icon
{:width 20 {:width 20
@ -33,10 +36,10 @@
(def message-input (def message-input
{:flex 1 {:flex 1
:marginTop -2
:padding 0 :padding 0
:fontSize 14 :font-size 14
:color text2-color}) :line-height 20
:color text1-color})
(def smile-icon (def smile-icon
{:width 20 {:width 20

6
src/status_im/chat/styles/response.cljs
View File

@ -81,11 +81,11 @@
:width 12 :width 12
:height 12}) :height 12})
(defn command-input [ml disbale?] (defn command-input [ml disable?]
{:flex 1 {:flex 1
:marginRight 16 :marginRight 16
:margin-left (- ml 5) :margin-left (- ml 5)
:marginTop -2 :margin-top 4
:padding 0 :padding 0
:fontSize 14 :fontSize 14
:color (if disbale? color-white text1-color)}) :color (if disable? color-white text1-color)})

2
src/status_im/chat/views/command.cljs
View File

@ -39,5 +39,5 @@
(defn cancel-button [] (defn cancel-button []
[touchable-highlight {:on-press cancel-command-input} [touchable-highlight {:on-press cancel-command-input}
[view st/cancel-container [view st/cancel-container
[icon :close-gray st/cancel-icon]]]) [icon :close_gray st/cancel-icon]]])

97
src/status_im/chat/views/message_input.cljs
View File

@ -11,16 +11,16 @@
[status-im.chat.views.command :as command] [status-im.chat.views.command :as command]
[status-im.chat.styles.message-input :as st] [status-im.chat.styles.message-input :as st]
[status-im.chat.styles.plain-message :as st-message] [status-im.chat.styles.plain-message :as st-message]
[status-im.chat.styles.response :as st-response])) [status-im.chat.styles.response :as st-response]
[reagent.core :as r]
[clojure.string :as str]))
(defn send-button [{:keys [on-press accessibility-label]}] (defn send-button [{:keys [on-press accessibility-label]}]
[touchable-highlight {:on-press on-press [touchable-highlight {:on-press on-press
:accessibility-label accessibility-label} :accessibility-label accessibility-label}
[view st/send-wrapper
[view st/send-container [view st/send-container
[icon :send st/send-icon]]]) [icon :send st/send-icon]]]])
(defn message-input-container [input]
[view st/message-input-container input])
(defn plain-input-options [disable?] (defn plain-input-options [disable?]
{:style st-message/message-input {:style st-message/message-input
@ -39,42 +39,79 @@
:on-change-text (when-not disable? command/set-input-message) :on-change-text (when-not disable? command/set-input-message)
:on-submit-editing (on-press-commands-handler command)}) :on-submit-editing (on-press-commands-handler command)})
(defview message-input [input-options command] (defview message-input [input-options set-layout-size]
[command? [:command?] [input-message [:get-chat-input-text]
input-message [:get-chat-input-text] disable? [:get :disable-input]]
input-command [:get-chat-command-content] [text-input (merge
(plain-input-options disable?)
{:auto-focus false
:blur-on-submit true
:multiline true
:on-change #(let [size (-> (.-nativeEvent %)
(.-contentSize)
(.-height))]
(set-layout-size size))
:accessibility-label :input
:on-focus #(dispatch [:set :focused true])
:on-blur #(do (dispatch [:set :focused false])
(set-layout-size 0))
:default-value (or input-message "")}
input-options)])
(defview command-input [input-options command]
[input-command [:get-chat-command-content]
icon-width [:command-icon-width] icon-width [:command-icon-width]
disable? [:get :disable-input]] disable? [:get :disable-input]]
[text-input (merge [text-input (merge
(if command?
(command-input-options command icon-width disable?) (command-input-options command icon-width disable?)
(plain-input-options disable?)) {:auto-focus true
{:auto-focus false
:blur-on-submit false :blur-on-submit false
:editable true
:accessibility-label :input :accessibility-label :input
:on-focus #(dispatch [:set :focused true]) :on-focus #(dispatch [:set :focused true])
:on-blur #(dispatch [:set :focused false]) :on-blur #(dispatch [:set :focused false])
:default-value (if command? (or input-command "") input-message)} :default-value (or input-command "")}
input-options)]) input-options)])
(defview plain-message-input-view [{:keys [input-options]}] (defn plain-message-get-initial-state [_]
[command? [:command?] {:height 0})
{:keys [type] :as command} [:get-chat-command]
input-command [:get-chat-command-content] (defn plain-message-render [_]
valid-plain-message? [:valid-plain-message?]] (let [command? (subscribe [:command?])
command (subscribe [:get-chat-command])
input-command (subscribe [:get-chat-command-content])
input-message (subscribe [:get-chat-input-text])
valid-plain-message? (subscribe [:valid-plain-message?])
component (r/current-component)
set-layout-size #(r/set-state component {:height %})]
(r/create-class
{:component-will-update
(fn [_]
(when (or (and @command? (str/blank? @input-command))
(and (not @command?) (not @input-message)))
(set-layout-size 0)))
:reagent-render
(fn [{:keys [input-options]}]
(let [{:keys [height]} (r/state component)]
[view st/input-container [view st/input-container
[view st/input-view [view (st/input-view height)
[plain-message/commands-button] [plain-message/commands-button height #(set-layout-size 0)]
[message-input-container [view (st/message-input-container height)
[message-input input-options command]] (if @command?
[command-input input-options @command]
[message-input input-options set-layout-size])]
;; TODO emoticons: not implemented ;; TODO emoticons: not implemented
[plain-message/smile-button] [plain-message/smile-button height]
(when (or command? valid-plain-message?) (when (or @command? @valid-plain-message?)
(let [on-press (if command? (let [on-press (if @command?
(on-press-commands-handler command) (on-press-commands-handler @command)
plain-message/send)] plain-message/send)]
[send-button {:on-press on-press [send-button {:on-press #(on-press %)
:accessibility-label :send-message}])) :accessibility-label :send-message}]))
(when (and command? (= :command type)) (when (and @command? (= :command (:type @command)))
[command/command-icon command])]]) [command/command-icon @command])]]))})))
(defn plain-message-input-view [_]
(r/create-class {:get-initial-state plain-message-get-initial-state
:reagent-render plain-message-render}))

15
src/status_im/chat/views/plain_message.cljs
View File

@ -37,7 +37,7 @@
:delay delay}) :delay delay})
#(dispatch [:set :disable-input false]))))) #(dispatch [:set :disable-input false])))))
(defn commands-button [] (defn commands-button [height on-press]
(let [command? (subscribe [:command?]) (let [command? (subscribe [:command?])
requests (subscribe [:get-requests]) requests (subscribe [:get-requests])
suggestions (subscribe [:get-suggestions]) suggestions (subscribe [:get-suggestions])
@ -55,11 +55,11 @@
:component-did-update :component-did-update
on-update on-update
:reagent-render :reagent-render
(fn [] (fn [on-press]
[touchable-highlight {:on-press #(dispatch [:switch-command-suggestions!]) [touchable-highlight {:on-press #(do (dispatch [:switch-command-suggestions!])
(on-press))
:disabled @command?} :disabled @command?}
[animated-view {:style (st/message-input-button-touchable [animated-view {:style (st/message-input-button-touchable container-width height)}
container-width)}
(when-not @command? (when-not @command?
[animated-view {:style (st/message-input-button buttons-scale)} [animated-view {:style (st/message-input-button buttons-scale)}
(if (seq @suggestions) (if (seq @suggestions)
@ -79,7 +79,7 @@
(when (and @command? (.-finished e)) (when (and @command? (.-finished e))
(anim/set-value width 0.1))))))) (anim/set-value width 0.1)))))))
(defn smile-button [] (defn smile-button [height]
(let [command? (subscribe [:command?]) (let [command? (subscribe [:command?])
buttons-scale (anim/create-value (if @command? 1 0)) buttons-scale (anim/create-value (if @command? 1 0))
container-width (anim/create-value (if @command? 0.1 56)) container-width (anim/create-value (if @command? 0.1 56))
@ -98,7 +98,6 @@
;; TODO emoticons: not implemented ;; TODO emoticons: not implemented
) )
:disabled @command?} :disabled @command?}
[animated-view {:style (st/message-input-button-touchable [animated-view {:style (st/message-input-button-touchable container-width height)}
container-width)}
[animated-view {:style (st/message-input-button buttons-scale)} [animated-view {:style (st/message-input-button buttons-scale)}
[icon :smile st/smile-icon]]]])}))) [icon :smile st/smile-icon]]]])})))

6
src/status_im/chat/views/response.cljs
View File

@ -24,12 +24,12 @@
(defn drag-icon [] (defn drag-icon []
[view st/drag-container [view st/drag-container
[icon :drag-white st/drag-icon]]) [icon :drag_white st/drag-icon]])
(defn command-icon [] (defn command-icon []
[view st/command-icon-container [view st/command-icon-container
;; TODO stub data: command icon ;; TODO stub data: command icon
[icon :dollar-green st/command-icon]]) [icon :dollar_green st/command-icon]])
(defn info-container [command] (defn info-container [command]
[view st/info-container [view st/info-container
@ -55,7 +55,7 @@
[info-container @command] [info-container @command]
[touchable-highlight {:on-press #(dispatch [:start-cancel-command])} [touchable-highlight {:on-press #(dispatch [:start-cancel-command])}
[view st/cancel-container [view st/cancel-container
[icon :close-white st/cancel-icon]]]]] [icon :close_white st/cancel-icon]]]]]
[view (merge (drag/pan-handlers pan-responder) [view (merge (drag/pan-handlers pan-responder)
{:style ddst/drag-down-touchable}) {:style ddst/drag-down-touchable})
[icon :drag_down ddst/drag-down-icon]])))) [icon :drag_down ddst/drag-down-icon]]))))

2
src/status_im/contacts/views/contact.cljs
View File

@ -30,4 +30,4 @@
[touchable-highlight [touchable-highlight
{:on-press more-click-handler} {:on-press more-click-handler}
[view st/more-btn [view st/more-btn
[icon :more-vertical st/more-btn-icon]]]]]) [icon :more_vertical st/more-btn-icon]]]]])

4
src/status_im/group_settings/screen.cljs
View File

@ -138,7 +138,7 @@
(if (or focused? (not= name new-name)) (if (or focused? (not= name new-name))
[touchable-highlight {:style (st/chat-name-btn-edit-container valid?) [touchable-highlight {:style (st/chat-name-btn-edit-container valid?)
:on-press save} :on-press save}
[view [icon :ok-purple st/add-members-icon]]] [view [icon :ok_purple st/add-members-icon]]]
[touchable-highlight {:style (st/chat-name-btn-edit-container true) [touchable-highlight {:style (st/chat-name-btn-edit-container true)
:on-press focus} :on-press focus}
[view [text {:style st/chat-name-btn-edit-text} (label :t/edit)]]])] [view [text {:style st/chat-name-btn-edit-text} (label :t/edit)]]])]
@ -154,7 +154,7 @@
[touchable-highlight {:on-press #(dispatch [:navigate-to :add-participants])} [touchable-highlight {:on-press #(dispatch [:navigate-to :add-participants])}
;; TODO add participants view is not in design ;; TODO add participants view is not in design
[view st/add-members-container [view st/add-members-container
[icon :add-gray st/add-members-icon] [icon :add_gray st/add-members-icon]
[text {:style st/add-members-text} [text {:style st/add-members-text}
(label :t/add-members)]]] (label :t/add-members)]]]
[chat-members] [chat-members]