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

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

Multiline text input (#255)
This commit is contained in:
Roman Volosovskyi 2016-09-27 17:22:17 +03:00 committed by GitHub
parent a302a43058 149442100e
commit 54633394ed
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>
<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_okay">Continue</string>

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

@ -1,8 +1,10 @@
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
<item name="colorPrimary">@color/primary</item>
<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>

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

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

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

@ -1,6 +1,11 @@
(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 response-height-normal 211)
(def minimum-suggestion-height (+ input-height request-info-height))

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

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

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

@ -1,18 +1,21 @@
(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]
{:width w
:height 56
:alignItems :center
:justifyContent :center})
(defn message-input-button-touchable [width content-height]
{:width width
:flex 1
:margin-bottom 14
:align-items :center
:justify-content :flex-end})
(defn message-input-button [scale]
{:transform [{:scale scale}]
:width 24
:height 24
:alignItems :center
:justifyContent :center})
{:transform [{:scale scale}]
:width 24
:height 24
:align-items :center
:justify-content :center})
(def list-icon
{:width 20
@ -23,21 +26,21 @@
:width 8
:height 8
:border-radius 8
:left 0
:top 0
:position :absolute})
:left 0
:top 0
:position :absolute})
(def close-icon
{:width 12
:height 12})
(def message-input
{:flex 1
:marginTop -2
:padding 0
:fontSize 14
:color text2-color})
{:flex 1
:padding 0
:font-size 14
:line-height 20
:color text1-color})
(def smile-icon
{:width 20
:height 20})
{:width 20
:height 20})

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

@ -81,11 +81,11 @@
:width 12
:height 12})
(defn command-input [ml disbale?]
(defn command-input [ml disable?]
{:flex 1
:marginRight 16
:margin-left (- ml 5)
:marginTop -2
:margin-top 4
:padding 0
: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 []
[touchable-highlight {:on-press cancel-command-input}
[view st/cancel-container
[icon :close-gray st/cancel-icon]]])
[icon :close_gray st/cancel-icon]]])

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

@ -11,16 +11,16 @@
[status-im.chat.views.command :as command]
[status-im.chat.styles.message-input :as st]
[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]}]
[touchable-highlight {:on-press on-press
:accessibility-label accessibility-label}
[view st/send-container
[icon :send st/send-icon]]])
(defn message-input-container [input]
[view st/message-input-container input])
[view st/send-wrapper
[view st/send-container
[icon :send st/send-icon]]]])
(defn plain-input-options [disable?]
{:style st-message/message-input
@ -39,42 +39,79 @@
:on-change-text (when-not disable? command/set-input-message)
:on-submit-editing (on-press-commands-handler command)})
(defview message-input [input-options command]
[command? [:command?]
input-message [:get-chat-input-text]
input-command [:get-chat-command-content]
(defview message-input [input-options set-layout-size]
[input-message [:get-chat-input-text]
disable? [:get :disable-input]]
[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]
disable? [:get :disable-input]]
[text-input (merge
(if command?
(command-input-options command icon-width disable?)
(plain-input-options disable?))
{:auto-focus false
(command-input-options command icon-width disable?)
{:auto-focus true
:blur-on-submit false
:editable true
:accessibility-label :input
:on-focus #(dispatch [:set :focused true])
:on-blur #(dispatch [:set :focused false])
:default-value (if command? (or input-command "") input-message)}
:default-value (or input-command "")}
input-options)])
(defview plain-message-input-view [{:keys [input-options]}]
[command? [:command?]
{:keys [type] :as command} [:get-chat-command]
input-command [:get-chat-command-content]
valid-plain-message? [:valid-plain-message?]]
[view st/input-container
[view st/input-view
[plain-message/commands-button]
[message-input-container
[message-input input-options command]]
;; TODO emoticons: not implemented
[plain-message/smile-button]
(when (or command? valid-plain-message?)
(let [on-press (if command?
(on-press-commands-handler command)
plain-message/send)]
[send-button {:on-press on-press
:accessibility-label :send-message}]))
(when (and command? (= :command type))
[command/command-icon command])]])
(defn plain-message-get-initial-state [_]
{:height 0})
(defn plain-message-render [_]
(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-view height)
[plain-message/commands-button height #(set-layout-size 0)]
[view (st/message-input-container height)
(if @command?
[command-input input-options @command]
[message-input input-options set-layout-size])]
;; TODO emoticons: not implemented
[plain-message/smile-button height]
(when (or @command? @valid-plain-message?)
(let [on-press (if @command?
(on-press-commands-handler @command)
plain-message/send)]
[send-button {:on-press #(on-press %)
:accessibility-label :send-message}]))
(when (and @command? (= :command (:type @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})
#(dispatch [:set :disable-input false])))))
(defn commands-button []
(defn commands-button [height on-press]
(let [command? (subscribe [:command?])
requests (subscribe [:get-requests])
suggestions (subscribe [:get-suggestions])
@ -55,11 +55,11 @@
:component-did-update
on-update
:reagent-render
(fn []
[touchable-highlight {:on-press #(dispatch [:switch-command-suggestions!])
(fn [on-press]
[touchable-highlight {:on-press #(do (dispatch [:switch-command-suggestions!])
(on-press))
:disabled @command?}
[animated-view {:style (st/message-input-button-touchable
container-width)}
[animated-view {:style (st/message-input-button-touchable container-width height)}
(when-not @command?
[animated-view {:style (st/message-input-button buttons-scale)}
(if (seq @suggestions)
@ -79,7 +79,7 @@
(when (and @command? (.-finished e))
(anim/set-value width 0.1)))))))
(defn smile-button []
(defn smile-button [height]
(let [command? (subscribe [:command?])
buttons-scale (anim/create-value (if @command? 1 0))
container-width (anim/create-value (if @command? 0.1 56))
@ -98,7 +98,6 @@
;; TODO emoticons: not implemented
)
:disabled @command?}
[animated-view {:style (st/message-input-button-touchable
container-width)}
[animated-view {:style (st/message-input-button-touchable container-width height)}
[animated-view {:style (st/message-input-button buttons-scale)}
[icon :smile st/smile-icon]]]])})))

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

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

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

@ -30,4 +30,4 @@
[touchable-highlight
{:on-press more-click-handler}
[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))
[touchable-highlight {:style (st/chat-name-btn-edit-container valid?)
: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)
:on-press focus}
[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])}
;; TODO add participants view is not in design
[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}
(label :t/add-members)]]]
[chat-members]