Merge pull request #1129 from BeatC/make-identical-text-input

Make identical text input

css/_base.scss

@@ -29,36 +29,6 @@ html, body, input, textarea, keygen, select, button {
     color: #636363;
 }
 
-input[type='text'], input[type='password'], textarea {
-    display: inline-block;
-    width: 100%;
-    padding: 5px 7px;
-    color: $inputColor;
-    border-radius: $borderRadius;
-    line-height: 32px;
-    height: 32px;
-    text-align: left;
-    border:1px solid $inputBorderColor;
-    background-color: $inputBackground;
-    outline: none; /* removes the default outline */
-    resize: none; /* prevents the user-resizing, adjust to taste */
-}
-
-@include placeholder {
-    color: $placeHolderColor;
-}
-
-textarea {
-    overflow: hidden;
-    word-wrap: break-word;
-    resize: none;
-    line-height: 1.5em;
-}
-
-button.no-icon {
-    padding: 0 1em;
-}
-
 button, input, select, textarea {
     margin: 0;
     vertical-align: baseline;
@@ -75,10 +45,26 @@ input[type="reset"], input[type="submit"] {
     cursor: pointer;
 }
 
+textarea {
+    overflow: hidden;
+    word-wrap: break-word;
+    resize: none;
+    line-height: 1.5em;
+}
+
+input[type='text'], input[type='password'], textarea {
+    outline: none; /* removes the default outline */
+    resize: none; /* prevents the user-resizing, adjust to taste */
+}
+
 button {
     color: #FFF;
     background-color: $buttonBackground;
     border-radius: $borderRadius;
+
+    &.no-icon {
+        padding: 0 1em;
+    }
 }
 
 button,
@@ -132,42 +118,6 @@ form {
     font-size: 12px;
 }
 
-/**
- * Hides an element.
- */
-.hide {
-    display: none !important;
-}
-
-/**
- * Shows an element.
- */
-.show {
-    display: block !important;
-}
-
-/**
- * Shows an inline element.
- */
-.show-inline {
-    display: inline-block !important;
-}
-
-.show-list-item {
-    display: list-item !important;
-}
-
-/**
- * Shows a flex element.
- */
-.show-flex {
-    display: -webkit-box !important;
-    display: -moz-box !important;
-    display: -ms-flexbox !important;
-    display: -webkit-flex !important;
-    display: flex !important;
-}
-
 /**
 * Tooltips
 **/
@@ -189,18 +139,6 @@ form {
     visibility: visible;
 }
 
-.link {
-    cursor: pointer;
-    color: $linkFontColor;
-    @include transition(color .1s ease-out);
-
-    &:hover {
-        color: $linkHoverFontColor;
-        text-decoration: underline;
-        @include transition(color .1s ease-in);
-    }
-}
-
 #inviteLinkRef {
     -webkit-user-select: text;
     user-select: text;

css/_side_toolbar_container.scss

@@ -23,23 +23,13 @@
      * Form elements and blocks.
      */
     input, select, a,
-    .sideToolbarBlock, .input-control, .button-control {
+    .sideToolbarBlock, .form-control, .button-control {
         display: block;
         margin-top: 15px;
         margin-left: 10%;
         width: 80%;
     }
 
-    /**
-     * Specify colors for edit elements.
-     */
-    select, input[type="button"], input[type="text"], input[type="reset"],
-    input[type="submit"] {
-        color: $inputColor;
-        background: $inputBackground;
-        border: none;
-    }
-
     /**
      * Specify styling of elements inside a block.
      */

css/_utils.scss

@@ -0,0 +1,38 @@
+/**
+ * Hides an element.
+ */
+.hide {
+    display: none !important;
+}
+
+/**
+ * Shows an element.
+ */
+.show {
+    display: block !important;
+}
+
+/**
+ * Shows an inline element.
+ */
+.show-inline {
+    display: inline-block !important;
+}
+
+/**
+* Shows as a list item
+**/
+.show-list-item {
+    display: list-item !important;
+}
+
+/**
+ * Shows a flex element.
+ */
+.show-flex {
+    display: -webkit-box !important;
+    display: -moz-box !important;
+    display: -ms-flexbox !important;
+    display: -webkit-flex !important;
+    display: flex !important;
+}

css/input-control/_input-control.scss → css/components/_form-control.scss

@@ -1,4 +1,4 @@
-.input-control {
+.form-control {
     padding: 16px 0;
 
     &:first-child {
@@ -19,24 +19,6 @@
         font-weight: $labelFontWeight;
     }
 
-    &__input {
-        margin-bottom: 8px;
-        @include transition(all .2s ease-in);
-
-        &:last-child {
-            margin-bottom: inherit;
-        }
-
-        &::selection {
-            background-color: $defaultDarkSelectionColor;
-        }
-
-        &.error {
-            color: $errorColor;
-            border-color: $errorColor;
-        }
-    }
-
     &__em {
         color: $inputControlEmColor;
     }

css/components/_input-control.scss

@@ -0,0 +1,32 @@
+.input-control {
+    @include transition(all .2s ease-in);
+    display: inline-block;
+    width: 100%;
+    padding: 5px 7px;
+    color: $inputColor;
+    border-radius: $borderRadius;
+    line-height: 32px;
+    height: 32px;
+    text-align: left;
+    border:1px solid $inputBorderColor;
+    background-color: $inputBackground;
+    margin-bottom: 8px;
+
+    &:last-child {
+        margin-bottom: inherit;
+    }
+
+    &::selection {
+        background-color: $defaultDarkSelectionColor;
+    }
+
+
+    &.error {
+        color: $errorColor;
+        border-color: $errorColor;
+    }
+}
+
+@include placeholder {
+    color: $placeHolderColor;
+}

css/components/_link.scss

@@ -0,0 +1,11 @@
+.link {
+    cursor: pointer;
+    color: $linkFontColor;
+    @include transition(color .1s ease-out);
+
+    &:hover {
+        color: $linkHoverFontColor;
+        text-decoration: underline;
+        @include transition(color .1s ease-in);
+    }
+}

css/main.scss

@@ -33,6 +33,7 @@
 
 @import 'toastr';
 @import 'base';
+@import 'utils';
 @import 'overlay/overlay';
 @import 'inlay';
 @import 'reload_overlay/reload_overlay';
@@ -55,9 +56,11 @@
 @import 'jquery.contextMenu';
 @import 'keyboard-shortcuts';
 @import 'redirect_page';
-@import 'input-control/input-control';
+@import 'components/form-control';
+@import 'components/link';
 @import 'shortcuts/main';
-@import 'buttons/button-control';
+@import 'components/button-control';
+@import 'components/_input-control.scss';
 @import "modals/invite/invite";
 @import "connection-info";
 @import 'aui-components/dropdown';

css/modals/_dialog.scss

@@ -72,7 +72,7 @@
         }
     }
 
-    .input-control:not(:last-child) {
+    .form-control:not(:last-child) {
         border-bottom: 1px solid $auiBorderColor;
     }
 }

css/modals/feedback/_feedback.scss

@@ -62,7 +62,7 @@
             text-align: center;
             padding: 10px 40px 20px 40px;
 
-            .input-control{
+            .form-control{
                 &__input {
                     background-color: $feedbackInputBg;
                     color: $feedbackInputTextColor;

modules/UI/UI.js

@@ -80,12 +80,11 @@ JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[TrackErrors.NO_DATA_FROM_SOURCE]
 function promptDisplayName() {
     let labelKey = 'dialog.enterDisplayName';
     let message = (
-        `<div class="input-control">
-            <label data-i18n="${labelKey}" class="input-control__label"></label>
+        `<div class="form-control">
+            <label data-i18n="${labelKey}" class="form-control__label"></label>
             <input name="displayName" type="text"
                data-i18n="[placeholder]defaultNickname"
-               class="input-control__input"
-               autofocus>
+               class="input-control" autofocus>
          </div>`
     );
 
@@ -742,9 +741,11 @@ UI.showLoginPopup = function(callback) {
 
     let message = (
         `<input name="username" type="text"
-                placeholder="user@domain.net" autofocus>
+                placeholder="user@domain.net"
+                class="input-control" autofocus>
          <input name="password" type="password"
                 data-i18n="[placeholder]dialog.userPassword"
+                class="input-control"
                 placeholder="user password">`
     );
 

modules/UI/authentication/LoginDialog.js

@@ -11,10 +11,10 @@ function getPasswordInputHtml() {
 
     return `
         <input name="username" type="text" 
-               class="input-control__input"
+               class="input-control"
                placeholder=${placeholder} autofocus>
         <input name="password" type="password"
-               class="input-control__input"
+               class="input-control"
                data-i18n="[placeholder]dialog.userPassword">`;
 }
 

modules/UI/feedback/FeedbackWindow.js

@@ -66,7 +66,7 @@ function createRateFeedbackHTML() {
                 </div>
             </div>
             <div class="details">
-                <textarea id="feedbackTextArea" class="input-control__input" 
+                <textarea id="feedbackTextArea" class="input-control" 
                     data-i18n="[placeholder]dialog.feedbackHelp"></textarea>
             </div>
         </form>`;

modules/UI/invite/InviteDialogView.js

@@ -120,20 +120,20 @@ export default class InviteDialogView {
     getShareLinkBlock() {
         let classes = 'button-control button-control_light copyInviteLink';
         return (
-            `<div class="input-control">
-                <label class="input-control__label" for="inviteLinkRef"
+            `<div class="form-control">
+                <label class="form-control__label" for="inviteLinkRef"
                     data-i18n="${this.dialog.titleKey}"></label>
-                <div class="input-control__container">
-                    <input class="input-control__input inviteLink"
+                <div class="form-control__container">
+                    <input class="input-control inviteLink"
                            id="inviteLinkRef" type="text"
                            ${this.inviteAttributes} readonly>
                     <button data-i18n="dialog.copy" class="${classes}"></button>
                 </div>
-                <p class="input-control__hint ${this.lockHint}">
+                <p class="form-control__hint ${this.lockHint}">
                    <span class="icon-security-locked"></span>
                    <span data-i18n="dialog.roomLocked"></span>
                 </p>
-                <p class="input-control__hint ${this.unlockHint}">
+                <p class="form-control__hint ${this.unlockHint}">
                    <span class="icon-security"></span>
                    <span data-i18n="roomUnlocked"></span>
                 </p>
@@ -150,12 +150,13 @@ export default class InviteDialogView {
 
         if (this.model.isModerator) {
             html = (`
-            <div class="input-control">
-                <label class="input-control__label"
+            <div class="form-control">
+                <label class="form-control__label"
                        for="newPasswordInput" data-i18n="dialog.addPassword">
                </label>
-                <div class="input-control__container">
-                    <input class="input-control__input" id="newPasswordInput"
+                <div class="form-control__container">
+                    <input class="input-control"
+                           id="newPasswordInput"
                            type="text" 
                            data-i18n="[placeholder]dialog.createPassword">
                     <button id="addPasswordBtn" id="inviteDialogAddPassword"
@@ -182,19 +183,19 @@ export default class InviteDialogView {
 
         if (isModerator) {
             return (`
-                <div class="input-control">
-                    <label class="input-control__label"
+                <div class="form-control">
+                    <label class="form-control__label"
                            data-i18n="dialog.passwordLabel"></label>
-                    <div class="input-control__container">
+                    <div class="form-control__container">
                         <p>
-                            <span class="input-control__text"
+                            <span class="form-control__text"
                                   data-i18n="dialog.currentPassword"></span>
                             <span id="inviteDialogPassword"
-                                  class="input-control__em">
+                                  class="form-control__em">
                                 ${password}
                             </span>
                         </p>
-                        <a class="link input-control__right"
+                        <a class="link form-control__right"
                            id="inviteDialogRemovePassword"
                            data-i18n="dialog.removePassword"></a>
                     </div>
@@ -202,7 +203,7 @@ export default class InviteDialogView {
             `);
         } else {
             return (`
-                <div class="input-control">
+                <div class="form-control">
                     <p>A participant protected this call with a password.</p>
                 </div>
             `);

modules/UI/invite/RequirePasswordDialog.js

@@ -33,13 +33,14 @@ export default class RequirePasswordDialog {
      */
     _getBodyMessage() {
         return (
-            `<div class="input-control">
+            `<div class="form-control">
                 <label class="input-control__label"
                        data-i18n="${this.labelKey}"></label>
-                <input class="input-control__input" name="lockKey" type="text"
+                <input class="input-control__input input-control"
+                       name="lockKey" type="text"
                    data-i18n="[placeholder]dialog.password"
                    autofocus id="${this.inputId}">
-                <p class="input-control__hint input-control__hint_error hide"
+                <p class="form-control__hint form-control__hint_error hide"
                    id="${this.errorId}"
                    data-i18n="${this.errorKey}"></p>
             </div>`

modules/UI/recording/Recording.js

@@ -55,7 +55,8 @@ function _requestLiveStreamId() {
             state0: {
                 titleKey: "dialog.liveStreaming",
                 html:
-                    `<input name="streamId" type="text"
+                    `<input  class="input-control"
+                    name="streamId" type="text"
                     data-i18n="[placeholder]dialog.streamKey"
                     autofocus>`,
                 persistent: false,
@@ -123,6 +124,7 @@ function _requestRecordingToken () {
     let messageString = (
         `<input name="recordingToken" type="text"
                 data-i18n="[placeholder]dialog.token"
+                class="input-control"
                 autofocus>`
     );
     return new Promise(function (resolve, reject) {

modules/UI/shared_video/SharedVideo.js

@@ -765,6 +765,7 @@ function requestVideoLink() {
                 titleKey: "dialog.shareVideoTitle",
                 html:  `
                     <input name="sharedVideoUrl" type="text"
+                           class="input-control"
                            data-i18n="[placeholder]defaultLink"
                            autofocus>`,
                 persistent: false,

modules/UI/side_pannels/chat/Chat.js

@@ -17,7 +17,8 @@ const htmlStr = `
         <div id="nickname">
             <span data-i18n="chat.nickname.title"></span>
             <form>
-                <input type='text' id="nickinput" autofocus 
+                <input type='text'
+                       class="input-control" id="nickinput" autofocus
                     data-i18n="[placeholder]chat.nickname.popover">
             </form>
         </div>

modules/UI/side_pannels/contactlist/ContactListView.js

@@ -136,7 +136,7 @@ var ContactListView = {
      * Adds layout for lock description
      */
     getLockDescriptionLayout(key) {
-        let classes = "input-control__hint input-control_full-width";
+        let classes = "form-control__hint form-control_full-width";
         let padlockSuffix = '';
         if (key === this.lockKey) {
             padlockSuffix = '-locked';

modules/UI/side_pannels/profile/Profile.js

@@ -10,12 +10,12 @@ const htmlStr = `
         <div class="sideToolbarBlock first">
             <label class="first" data-i18n="profile.setDisplayNameLabel">
             </label>
-            <input type="text" id="setDisplayName"
+            <input class="input-control" type="text" id="setDisplayName"
                 data-i18n="[placeholder]settings.name">
         </div>
         <div class="sideToolbarBlock">
             <label data-i18n="profile.setEmailLabel"></label>
-            <input id="setEmail" type="text" 
+            <input id="setEmail" type="text" class="input-control" 
                 data-i18n="[placeholder]profile.setEmailInput">
         </div>
         <div id="authenticationContainer" 

modules/UI/toolbars/Toolbar.js

@@ -311,7 +311,8 @@ function showSipNumberInput () {
         : '';
     let titleKey = "dialog.sipMsg";
     let msgString = (`
-            <input name="sipNumber" type="text"
+            <input class="input-control"
+                   name="sipNumber" type="text"
                    value="${defaultNumber}" autofocus>`);
 
     APP.UI.messageHandler.openTwoButtonDialog({