Merge pull request #1031 from BeatC/invite-dialog-visual-bugs

Fix some visual bugs

css/_base.scss

@@ -36,7 +36,6 @@ input[type='text'], input[type='password'], textarea {
     color: $inputColor;
     border-radius: $borderRadius;
     line-height: 32px;
-    letter-spacing: $letterSpacing;
     height: 32px;
     text-align: left;
     border:1px solid $inputBorderColor;
@@ -45,6 +44,10 @@ input[type='text'], input[type='password'], textarea {
     resize: none; /* prevents the user-resizing, adjust to taste */
 }
 
+@include placeholder {
+    color: $inputColor;
+}
+
 textarea {
     overflow: hidden;
     word-wrap: break-word;
@@ -61,7 +64,6 @@ button, input, select, textarea {
     vertical-align: baseline;
     color: $inputColor;
     font-size: 1em;
-    letter-spacing: $letterSpacing;
 }
 
 button, select, input[type="button"],

css/_mixins.scss

@@ -76,4 +76,22 @@
     -webkit-box-shadow: $type $h $y $blur $color;
     -moz-box-shadow: $type $h $y $blur $color;
     box-shadow: $type $h $y $blur $color;
+}
+
+/**
+* Mixin styling placeholder
+**/
+@mixin placeholder() {
+    $selectors: (
+        "::-webkit-input-placeholder",
+        "::-moz-placeholder",
+        ":-moz-placeholder",
+        ":-ms-input-placeholder"
+    );
+
+    @each $selector in $selectors {
+        #{$selector} {
+            @content;
+        }
+    }
 }

css/_side_toolbar_container.scss

@@ -12,7 +12,6 @@
     max-width: $sidebarWidth;
     z-index: 800;
     overflow: hidden;
-    letter-spacing: $titleLetterSpacing;
 
     /**
      * Labels inside the side panel.

css/_videolayout_default.scss

@@ -183,7 +183,6 @@
     text-overflow: ellipsis;
     font-size: 12px;
     font-weight: 100;
-    letter-spacing: 1px;
     overflow: hidden;
     white-space: nowrap;
     line-height: $thumbnailToolbarHeight;

css/buttons/_button-control.scss

@@ -4,6 +4,7 @@
     border: 1px solid $buttonBorder;
     vertical-align: baseline;
     height: 30px;
+    min-width: 60px;
     padding: 4px 10px;
     margin: 0;
     line-height: 1.5em;
@@ -13,7 +14,6 @@
     font-size: 14px;
     margin-left: 10px;
     color: $buttonColor;
-    letter-spacing: $letterSpacing;
     font-weight: $buttonFontWeight;
     @include transition(background-color .1s ease-out);
 

css/modals/_dialog.scss

@@ -37,7 +37,6 @@
                 h2 {
                     font-size: em(20, 12);
                     font-weight: $dialogTitleFontWeight;
-                    letter-spacing: $titleLetterSpacing;
                     color: $auiDialogColor;
                 }
 
@@ -58,7 +57,6 @@
 
                 p,span, h3 {
                     font-weight: $labelFontWeight;
-                    letter-spacing: $letterSpacing;
                 }
 
                 &:last-child {

css/themes/_light.scss

@@ -36,8 +36,6 @@ $inputBackground: #fff;
 $inputBorderColor: #ccc;
 $inputColor: #333;
 $defaultDarkSelectionColor: #ccc;
-$titleLetterSpacing: 0;
-$letterSpacing: 0;
 $buttonFontWeight: 400;
 $labelFontWeight: 400;
 $hintFontSize: em(13, 14);

lang/main.json

@@ -195,7 +195,9 @@
         "connecting": "Connecting",
         "copy": "Copy",
         "error": "Error",
-        "addPassword": "Add Password",
+        "roomLocked": "This call is locked. New callers must have the link and enter the password to join",
+        "addPassword": "Add a password",
+        "createPassword": "Create password",
         "detectext": "Error when trying to detect desktopsharing extension.",
         "failtoinstall": "Failed to install desktop sharing extension",
         "failedpermissions": "Failed to obtain permissions to use the local microphone and/or camera.",
@@ -217,6 +219,7 @@
         "defaultError": "There was some kind of error",
         "passwordRequired": "Password required",
         "Ok": "Ok",
+        "done": "Done",
         "Remove": "Remove",
         "removePassword": "Remove password",
         "shareVideoTitle": "Share a video",
@@ -243,7 +246,7 @@
         "sipMsg": "Enter SIP number",
         "passwordCheck": "Are you sure you would like to remove your password?",
         "passwordMsg": "Set a password to lock your room",
-        "shareLink": "Copy and share this link",
+        "shareLink": "Share the link to the call",
         "settings1": "Configure your conference",
         "settings2": "Participants join muted",
         "settings3": "Require nicknames<br/><br/>Set a password to lock your room:",

modules/UI/invite/InviteDialogView.js

@@ -103,16 +103,21 @@ export default class InviteDialogView {
         let {
             titleString
         } = this.dialog;
-
+        let doneKey = 'dialog.done';
+        let doneMsg = APP.translation.translateString(doneKey);
         let states = {};
+        let buttons = {};
+        buttons[`${doneMsg}`] = true;
 
         states[States.UNLOCKED] = {
             title: titleString,
-            html: this.getShareLinkBlock() + this.getAddPasswordBlock()
+            html: this.getShareLinkBlock() + this.getAddPasswordBlock(),
+            buttons
         };
         states[States.LOCKED] = {
             title: titleString,
-            html: this.getShareLinkBlock() + this.getPasswordBlock()
+            html: this.getShareLinkBlock() + this.getPasswordBlock(),
+            buttons
         };
 
         return states;
@@ -125,7 +130,7 @@ export default class InviteDialogView {
     getShareLinkBlock() {
         let copyKey = 'dialog.copy';
         let copyText = APP.translation.translateString(copyKey);
-        let roomLockDescKey = 'roomLocked';
+        let roomLockDescKey = 'dialog.roomLocked';
         let roomLockDesc = APP.translation.translateString(roomLockDescKey);
         let roomUnlockKey = 'roomUnlocked';
         let roomUnlock = APP.translation.translateString(roomUnlockKey);
@@ -165,6 +170,8 @@ export default class InviteDialogView {
         let addPassText = APP.translation.translateString(addPassKey);
         let addKey = 'dialog.add';
         let addText = APP.translation.translateString(addKey);
+        let hintKey = 'dialog.createPassword';
+        let hintMsg = APP.translation.translateString(hintKey);
         let html;
 
         if (this.model.isModerator) {
@@ -175,7 +182,7 @@ export default class InviteDialogView {
                        data-i18n="${addPassKey}">${addPassText}</label>
                 <div class="input-control__container">
                     <input class="input-control__input" id="newPasswordInput"
-                           type="text">
+                           type="text" placeholder="${hintMsg}">
                     <button id="addPasswordBtn" id="inviteDialogAddPassword"
                             disabled data-i18n="${addKey}"
                             class="button-control button-control_light">
@@ -242,7 +249,6 @@ export default class InviteDialogView {
      * Opening the dialog
      */
     open() {
-        let leftButton;
         let {
             submitFunction,
             loadedFunction,
@@ -250,23 +256,12 @@ export default class InviteDialogView {
         } = this.dialog;
 
         let states = this.getStates();
-
-        let buttons = [];
-        let leftButtonKey = "dialog.Invite";
-        let cancelButton
-            = APP.translation.generateTranslationHTML("dialog.Cancel");
-        buttons.push({title: cancelButton, value: false});
-
-        leftButton = APP.translation.generateTranslationHTML(leftButtonKey);
-        buttons.push({ title: leftButton, value: true});
-
         let initial = this.model.roomLocked ? States.LOCKED : States.UNLOCKED;
 
         APP.UI.messageHandler.openDialogWithStates(states, {
             submit: submitFunction,
             loaded: loadedFunction,
             close: closeFunction,
-            buttons,
             size: 'medium'
         });
         $.prompt.goToState(initial);