moved buttons to add & remove message arguments to side

AppSaloon · May 11, 2017 · 416b7c2 · 416b7c2
1 parent d6ca8dc
commit 416b7c2
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 38 deletions.
diff --git a/src/app/css/components/_column.scss b/src/app/css/components/_column.scss
@@ -97,24 +97,33 @@
     }
 }
 
-.column-button-row {
-    margin-bottom: 7px;
-    .column-button-row-button {
-        margin-top: 1px;
-        margin-right: 5px;
-        min-width: 20px;
-        height: 20px;
-        color: white;
-        background-color: #7a54a8;
-        font-size: 12px;
-        border: none;
-        outline: none;
-        cursor: pointer;
-        &.active {
-            background-color: #a088bd;
-        }
-        &:hover {
-            background-color: #7046a3;
+.message-arguments-button-group {
+    display: flex;
+    :first-child {
+        flex: 4;
+    }
+    :last-child {
+        flex: 1;
+    }
+    .message-arguments-buttons {
+        margin-bottom: 7px;
+        .message-arguments-buttons-button {
+            margin-top: 1px;
+            margin-right: 5px;
+            min-width: 20px;
+            height: 20px;
+            color: white;
+            background-color: #7a54a8;
+            font-size: 12px;
+            border: none;
+            outline: none;
+            cursor: pointer;
+            &.active {
+                background-color: #a088bd;
+            }
+            &:hover {
+                background-color: #7046a3;
+            }
         }
     }
 }

diff --git a/src/app/js/components/column/messageSender/MessageSenderView.js b/src/app/js/components/column/messageSender/MessageSenderView.js
@@ -225,26 +225,28 @@ class MessageSender extends Component {
 
                     <div>
                         <span>Message arguments</span>
-                        <div className="column-button-row">
-                            {
-                                state.messageCollection.map( (m, i) =>
-                                    <button key={i} className={`column-button-row-button ${ messageInEditor === i ? 'active' : '' }`} onClick={() => this.setState({messageInEditor: i})}>{i+1}</button>
-                                )
-                            }
-                        </div>
-                        <div className="column-button-row">
-                            <button
-                                onClick={this.addMessageArgument}
-                                className="column-button-row-button"
-                            >
-                                Add
-                            </button>
-                            <button
-                                onClick={this.removeMessageArgument}
-                                className="column-button-row-button"
-                            >
-                                Remove
-                            </button>
+                        <div className="message-arguments-button-group">
+                            <div className="message-arguments-buttons">
+                                {
+                                    state.messageCollection.map( (m, i) =>
+                                        <button key={i} className={`message-arguments-buttons-button ${ messageInEditor === i ? 'active' : '' }`} onClick={() => this.setState({messageInEditor: i})}>{i+1}</button>
+                                    )
+                                }
+                            </div>
+                            <div className="message-arguments-buttons">
+                                <button
+                                    onClick={this.addMessageArgument}
+                                    className="message-arguments-buttons-button"
+                                >
+                                    Add
+                                </button>
+                                <button
+                                    onClick={this.removeMessageArgument}
+                                    className="message-arguments-buttons-button"
+                                >
+                                    Remove
+                                </button>
+                            </div>
                         </div>
                     </div>