From f811410b45e3b263788f8e001faf0e6ae827c97a Mon Sep 17 00:00:00 2001 From: yanas Date: Sun, 11 Sep 2016 16:54:32 -0500 Subject: [PATCH] Settings re-design --- css/_base.scss | 93 ++---- css/_device_settings_dialog.scss | 31 ++ css/_jquery-impromptu.scss | 2 +- css/_settingsmenu.scss | 77 ----- css/_side_toolbar_container.css | 114 +++++++ css/_toastr.scss | 46 ++- css/_toolbars.scss | 28 +- css/_variables.scss | 17 +- css/_welcome_page.scss | 2 +- css/main.scss | 5 +- index.html | 85 +++--- interface_config.js | 1 + lang/main.json | 28 +- modules/UI/UI.js | 43 ++- modules/UI/side_pannels/profile/Profile.js | 61 ++++ .../side_pannels/settings/SettingsDialog.js | 288 ++++++++++++++++++ .../UI/side_pannels/settings/SettingsMenu.js | 46 +-- modules/UI/toolbars/Toolbar.js | 127 ++++++-- modules/UI/util/UIUtil.js | 3 +- service/UI/UIEvents.js | 4 + 20 files changed, 792 insertions(+), 309 deletions(-) create mode 100644 css/_device_settings_dialog.scss delete mode 100644 css/_settingsmenu.scss create mode 100644 css/_side_toolbar_container.css create mode 100644 modules/UI/side_pannels/profile/Profile.js create mode 100644 modules/UI/side_pannels/settings/SettingsDialog.js diff --git a/css/_base.scss b/css/_base.scss index 4a78f4572..bcfbcb820 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -6,8 +6,8 @@ html, body{ margin:0px; height:100%; - color: #424242; - font-size: 14px; + color: $defaultColor; + font-size: 12px; font-weight: 400; background: #000000; overflow: hidden; @@ -29,25 +29,17 @@ input[type='text'], input[type='password'], textarea { -webkit-user-select: text; user-select: text; display: inline-block; - font-size: 14px; padding: 5px; - background: #f3f3f3; - border-radius: 3px; - font-weight: 100; - line-height: 20px; - height: 40px; - color: #333; + color: $defaultDarkColor; + border-radius: $borderRadius; + line-height: 32px; + height: 32px; text-align: left; - border:1px solid #ACD8F0; + border:1px solid $inputBorderColor; outline: none; /* removes the default outline */ resize: none; /* prevents the user-resizing, adjust to taste */ } -input[type='text'], input[type='password'], textarea:focus { - box-shadow: inset 0 0 3px 2px #ACD8F0; /* provides a more style-able - replacement to the outline */ -} - textarea { overflow: hidden; word-wrap: break-word; @@ -58,28 +50,33 @@ button.no-icon { padding: 0 1em; } -button { - border: none; - height: 35px; - padding: 0 1em 0 2em; - position: relative; - border-radius: 1px; - font-weight: bold; - color: #fff; - line-height: 35px; - background: #2c8ad2; -} - button, input, select, textarea { margin: 0; vertical-align: baseline; + color: $defaultDarkColor; + background: $inputLightBackground; + font-size: 12px; + border: none; + box-shadow: none; + outline: none; } -button, input[type="button"], input[type="reset"], input[type="submit"] { +button, select, input[type="button"], +input[type="reset"], input[type="submit"] { + height: 32px; + line-height: 32px; + padding-left: 4px; + padding-right: 4px; cursor: pointer; - -webkit-appearance: button; } +button { + color: #FFF; + background-color: $buttonBackground !important; + border-radius: $borderRadius; +} + +button, form { display: block; } @@ -137,32 +134,6 @@ form { z-index: 100; } -#toast-container.notification-bottom-right { - bottom: 140px; - right: 5px; -} - -#toast-container.notification-bottom-right-center { - right: 205px; -} - -#toast-container .toast-info { - -webkit-box-shadow: none; - box-shadow: none; -} - -.toast-close-button { - right: -7px; - top: -19px; -} - -#toast-container .toast-info { - background-color: black; - border: 1px solid #3a3a3a; - width: 220px; - padding: 10px 10px 10px 50px; -} - .connected { color: #21B9FC; font-size: 12px; @@ -173,18 +144,6 @@ form { font-size: 12px; } -.toast-close-button:hover, -.toast-close-button:focus { - color: #ffffff; - opacity: 1; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); - filter: alpha(opacity=100); -} - -.toast-message .nickname { - font-weight: bold; -} - /** * Hides an element. */ diff --git a/css/_device_settings_dialog.scss b/css/_device_settings_dialog.scss new file mode 100644 index 000000000..78862f5d4 --- /dev/null +++ b/css/_device_settings_dialog.scss @@ -0,0 +1,31 @@ +.settingsContent { + display: flex; + display: -webkit-flex; + + #localVideoPreview { + width: 50%; + align-self: baseline; + } + + .deviceSelection { + display: flex; + display: -webkit-flex; + -webkit-flex: 1; + flex: 1; + flex-direction: column; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: left; + margin-left: 10px; + + .device { + display: flex; + margin-bottom: 5px; + + select { + flex: 1; + margin_right: 5px; + } + } + } +} \ No newline at end of file diff --git a/css/_jquery-impromptu.scss b/css/_jquery-impromptu.scss index e01ee8c6c..db4e53cd9 100644 --- a/css/_jquery-impromptu.scss +++ b/css/_jquery-impromptu.scss @@ -55,7 +55,7 @@ div.jqi .jqibuttons{ div.jqi .jqibuttons button{ margin: 0; padding: 5px 20px; - background-color: transparent; + background-color: transparent !important; font-weight: normal; border: none; border-left: solid 1px #e4e4e4; diff --git a/css/_settingsmenu.scss b/css/_settingsmenu.scss deleted file mode 100644 index 0be06970f..000000000 --- a/css/_settingsmenu.scss +++ /dev/null @@ -1,77 +0,0 @@ -#settings_container input, select { - margin-top: 10px; - margin-left: 10%; - width: 80%; - font-size: 14px; - background: #3a3a3a; - border: none; - box-shadow: none; - color: #a7a7a7; -} - -#settings_container .arrow-up { - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid #3a3a3a; - position: relative; - top: 10px; - margin-left: auto; - margin-right: auto; -} - -#settings_container #avatar { - width: 24%; - left: 38%; - border-radius: 25px; - position: relative; -} - -#languages_selectbox { - height: 40px; - cursor: pointer; -} - -#startMutedOptions, -#followMeOptions { - padding-left: 10%; - text-indent: -10%; - margin-top: 10px; - display: none; /* hide by default */ - /* clearfix */ - overflow: auto; - zoom: 1; -} - -#startAudioMuted, -#startVideoMuted, -#followMeCheckBox { - width: 13px !important; -} - -.startMutedLabel, -.followMeLabel { - width: 94%; - float: left; - cursor: pointer; -} - -#devicesOptions { - display: none; - margin-top: 10px; -} - -#devicesOptions label { - display: block; - margin-top: 15px; -} - -#devicesOptions span { - padding-left: 10%; -} - -#devicesOptions select { - height: 40px; - cursor: pointer; -} diff --git a/css/_side_toolbar_container.css b/css/_side_toolbar_container.css new file mode 100644 index 000000000..1cee936b1 --- /dev/null +++ b/css/_side_toolbar_container.css @@ -0,0 +1,114 @@ +/** + * Toolbar side panel main container element. + */ +#sideToolbarContainer { + display: inline-block; + position:absolute; + top: 0px; + left: $defaultToolbarSize; + width: 0%; + height: 100%; + max-width: 200px; + background-color: rgba(0,0,0,0.8); + z-index: 800; + overflow: hidden; + + /** + * Labels inside the side panel. + */ + label { + color: $defaultSemiDarkColor; + } + + /** + * Form elements and blocks. + */ + input, label, select, button, a, .sideToolbarBlock { + display: inline-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: $defaultColor; + background: $inputBackground; + border: none; + } + + /** + * Specify styling of elements inside a block. + */ + .sideToolbarBlock { + input, label, button, a, select { + margin-top: 5px; + margin-left: 0; + width: 100%; + } + + .startMutedLabel, + .followMeLabel { + display: inline; + margin-top: 0; + } + } + + /** + * Inner container, for example contact list, settings or profile. + */ + .sideToolbarContainer__inner { + display: none; + width: 200px; + color: #FFF; + + /** + * Titles and subtitles of inner containers. + */ + > div.title, + div.subTitle { + color: $defaultColor !important; + text-align: left; + margin: 10px 0px 10px 0px; + padding: 5px 10px 5px 10px; + } + + /** + * Main title size. + */ + > div.title { + font-size: 16px; + } + + /** + * Subtitle specific properties. + */ + > div.subTitle { + font-size: 12px; + background: $inputSemiBackground !important; + margin-top: 20px !important; + margin-bottom: 8px !important; + } + + /** + * First element after a title. + */ + .first { + margin-top: 0px !important; + } + } +} + +#device_settings { + width : auto !important; + text-align: center; +} + +#startAudioMuted, +#startVideoMuted, +#followMeCheckBox { + width: 13px !important; +} diff --git a/css/_toastr.scss b/css/_toastr.scss index 91c7c1940..df49ea3e3 100644 --- a/css/_toastr.scss +++ b/css/_toastr.scss @@ -19,32 +19,42 @@ .toast-message label { color: #ffffff; } + +.toast-message .nickname { + font-weight: bold; +} + .toast-message a:hover { color: #cccccc; text-decoration: none; } + .toast-close-button { position: relative; right: -0.3em; top: -0.3em; float: right; - font-size: 20px; + font-size: 15px; + height: 15px; + width: 15px; font-weight: bold; color: #ffffff; + background: transparent !important; -webkit-text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff; opacity: 0.8; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: alpha(opacity=80); } + .toast-close-button:hover, .toast-close-button:focus { - color: #000000; + color: #ffffff; text-decoration: none; cursor: pointer; - opacity: 0.4; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); - filter: alpha(opacity=40); + opacity: 1; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + filter: alpha(opacity=100); } /*Additional properties for button version iOS requires the button element instead of an anchor tag. @@ -173,4 +183,30 @@ button.toast-close-button { padding: 15px 15px 15px 15px; width: 25em; } +} + +#toast-container.notification-bottom-right { + bottom: 140px; + right: 5px; +} + +#toast-container.notification-bottom-right-center { + right: 205px; +} + +#toast-container .toast-info { + -webkit-box-shadow: none; + box-shadow: none; +} + +.toast-close-button { + right: -7px; + top: -19px; +} + +#toast-container .toast-info { + background-color: black; + border: 1px solid #3a3a3a; + width: 220px; + padding: 10px 10px 10px 50px; } \ No newline at end of file diff --git a/css/_toolbars.scss b/css/_toolbars.scss index 0b4f59623..dae37d0a3 100644 --- a/css/_toolbars.scss +++ b/css/_toolbars.scss @@ -74,34 +74,8 @@ -webkit-transform: translateX(-100%); } -#sideToolbarContainer { - display: inline-block; - position:absolute; - top: 0px; - left: $defaultToolbarSize; - width: 0%; - height: 100%; - max-width: 200px; - background-color: rgba(0,0,0,0.8); - z-index: 800; - overflow: hidden; - - .sideToolbarContainer__inner { - display: none; - width: 200px; - color: #FFF; - - > div.title { - text-align: left; - padding: 10px; - margin: 2px; - font-size: 12pt; - } - } -} - #toolbar_button_hangup { - color: #ff0000; + color: #BF2117; font-size: 2.2em !important; } diff --git a/css/_variables.scss b/css/_variables.scss index c0e2d053f..4be6104b9 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -9,7 +9,22 @@ $baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-seri $defaultToolbarSize: 50px; /** - * Miscellaneous. + * Color variables. */ +$defaultColor: #ECEEF1; +$defaultSemiDarkColor: #8E96A8; +$defaultDarkColor: #172B4D; +$defaultBackground: #091E42; $toolbarSelectBackground: rgba(0, 0, 0, 0.6); +$inputBackground: rgba(94, 108, 132, .5); +$inputSemiBackground: rgba(94, 108, 132, .8); +$inputLightBackground: #E5E8EC; +$inputBorderColor: #E5E8EC; +$buttonBackground: #0074E0; + +/** + * Misc. + */ +$borderRadius: 4px; + diff --git a/css/_welcome_page.scss b/css/_welcome_page.scss index 6c055ab25..60e5506df 100644 --- a/css/_welcome_page.scss +++ b/css/_welcome_page.scss @@ -1,4 +1,3 @@ - #disable_welcome { display:none; } @@ -59,6 +58,7 @@ font-size: 18px; font-weight: 500; padding-left: 20px; + color: $defaultDarkColor; } #enter_room_field { diff --git a/css/main.scss b/css/main.scss index 85cfd2679..b53b637af 100644 --- a/css/main.scss +++ b/css/main.scss @@ -34,9 +34,10 @@ @import 'contact_list'; @import 'chat'; @import 'welcome_page'; -@import 'settingsmenu'; -@import 'feedback'; @import 'toolbars'; +@import 'side_toolbar_container'; +@import 'device_settings_dialog'; +@import 'feedback'; @import 'jquery.contextMenu'; @import 'keyboard-shortcuts'; diff --git a/index.html b/index.html index 1583ee123..512bcfabf 100644 --- a/index.html +++ b/index.html @@ -100,24 +100,11 @@ - - - -
    -
  • -
-
    -
  • -
- - - - - +
- +