From 0c5b27b03168b5730313a30948bc64183de4b97d Mon Sep 17 00:00:00 2001 From: Joris Tirado Date: Fri, 12 Oct 2018 11:14:19 -0700 Subject: [PATCH] UI-3177: Restructure feature popup header to handle longer strings (#87) * Restructure feature popup header to handle string of different lengths * Apply new feature popup header structure to call recording * Apply new feature popup header structure to caller ID * Apply new feature popup header structure to conferencing * Apply new feature popup header structure to do not disturbe * Apply new feature popup header structure to faxbox * Apply new feature popup header structure to Find Me Follow Me * Apply new feature popup header structure to Hotdesking * Apply new feature popup header structure to Music On Hold * Apply new feature popup header structure to Voicemail to Email * Clean up remaining feature popup specific styling * Apply new feature popup header structure to groups features --- .../groups/views/feature-call_recording.html | 12 +- submodules/groups/views/feature-forward.html | 14 +- .../groups/views/feature-next_action.html | 12 +- submodules/groups/views/feature-prepend.html | 14 +- submodules/groups/views/feature-ringback.html | 14 +- submodules/users/{users.css => users.scss} | 384 ++++++++++-------- .../users/views/feature-call_forward.html | 13 +- .../users/views/feature-call_recording.html | 12 +- submodules/users/views/feature-caller_id.html | 12 +- .../users/views/feature-conferencing.html | 12 +- .../users/views/feature-do_not_disturb.html | 12 +- submodules/users/views/feature-faxing.html | 12 +- .../views/feature-find_me_follow_me.html | 14 +- submodules/users/views/feature-hotdesk.html | 12 +- .../users/views/feature-music_on_hold.html | 14 +- .../users/views/feature-vm_to_email.html | 12 +- 16 files changed, 331 insertions(+), 244 deletions(-) rename submodules/users/{users.css => users.scss} (79%) diff --git a/submodules/groups/views/feature-call_recording.html b/submodules/groups/views/feature-call_recording.html index 5016e93..7fbbca7 100644 --- a/submodules/groups/views/feature-call_recording.html +++ b/submodules/groups/views/feature-call_recording.html @@ -1,10 +1,14 @@
-
- +
+
+ +
+
+ {{ i18n.groups.callRecording.headline }} +
- {{ i18n.groups.callRecording.headline }} -
+
{{#monsterSwitch}} {{/monsterSwitch}} diff --git a/submodules/groups/views/feature-forward.html b/submodules/groups/views/feature-forward.html index fca0212..a78568f 100644 --- a/submodules/groups/views/feature-forward.html +++ b/submodules/groups/views/feature-forward.html @@ -1,10 +1,14 @@
-
- +
+
+ +
+
+ {{ i18n.groups.forward.headline }} +
- {{ i18n.groups.forward.headline }} -
+
{{#monsterSwitch}} {{/monsterSwitch}} @@ -23,4 +27,4 @@
-
\ No newline at end of file +
diff --git a/submodules/groups/views/feature-next_action.html b/submodules/groups/views/feature-next_action.html index 455885f..eb0a8a2 100644 --- a/submodules/groups/views/feature-next_action.html +++ b/submodules/groups/views/feature-next_action.html @@ -1,10 +1,14 @@
-
- +
+
+ +
+
+ {{ i18n.groups.nextAction.headline }} +
- {{ i18n.groups.nextAction.headline }} -
+
{{#monsterSwitch}} {{/monsterSwitch}} diff --git a/submodules/groups/views/feature-prepend.html b/submodules/groups/views/feature-prepend.html index 8930745..429fa6a 100644 --- a/submodules/groups/views/feature-prepend.html +++ b/submodules/groups/views/feature-prepend.html @@ -1,10 +1,14 @@
-
- +
+
+ +
+
+ {{ i18n.groups.prepend.headline }} +
- {{ i18n.groups.prepend.headline }} -
+
{{#monsterSwitch}} {{/monsterSwitch}} @@ -30,4 +34,4 @@
-
\ No newline at end of file +
diff --git a/submodules/groups/views/feature-ringback.html b/submodules/groups/views/feature-ringback.html index 2e3bc4a..a3dd28c 100644 --- a/submodules/groups/views/feature-ringback.html +++ b/submodules/groups/views/feature-ringback.html @@ -1,10 +1,14 @@
-
- +
+
+ +
+
+ {{ i18n.groups.ringback.headline }} +
- {{ i18n.groups.ringback.headline }} -
+
{{#monsterSwitch}} {{/monsterSwitch}} @@ -37,4 +41,4 @@
-
\ No newline at end of file +
diff --git a/submodules/users/users.css b/submodules/users/users.scss similarity index 79% rename from submodules/users/users.css rename to submodules/users/users.scss index f5ee253..76886c7 100644 --- a/submodules/users/users.css +++ b/submodules/users/users.scss @@ -1,3 +1,5 @@ +@import '../../../../css/partials/base'; + #users_container_overlay { position: fixed; top: 0; @@ -555,7 +557,7 @@ .monster-feature-popup-container .feature-fa-wrapper{ display: inline-block; margin: 20px; - width: 60px; + min-width: 60px; height: 60px; border: 5px solid #DDDDDD; @@ -685,130 +687,6 @@ margin-top: 25px; } -/* Caller-ID User Feature Popup */ -.monster-feature-popup-container[data-feature="caller_id"] { - width: 525px; -} - -.monster-feature-popup-container .caller-id-select { - margin-top: 5px; -} - -/* Hot Desking User Feature Popup */ -.monster-feature-popup-container[data-feature="hotdesk"] #pin { - margin-top: 10px; -} - -/* VM To Email User Feature Popup */ -.monster-feature-popup-container[data-feature="vm_to_email"] #email { - margin-top: 8px; -} - -.monster-feature-popup-container[data-feature="vm_to_email"] .main-line { - height: auto; - line-height: 20px; - margin: 10px 0 30px 0; -} - -/* Conferencing */ -.monster-feature-popup-container[data-feature="conferencing"] form { - margin-bottom: 0; -} - -.monster-feature-popup-container[data-feature="conferencing"] form .list-numbers { - display: inline-block; - font-weight: 600; - height: 65px; - line-height: 15px; - margin-left: 25px; - overflow: auto; - vertical-align: middle; - width: 180px; -} - -.monster-feature-popup-container[data-feature="conferencing"] form .list-numbers[data-count="1"] { - line-height: 61px; -} - -.monster-feature-popup-container[data-feature="conferencing"] form .list-numbers[data-count="2"] { - line-height: 32px; -} - -.monster-feature-popup-container[data-feature="conferencing"] form .list-numbers[data-count="3"] { - line-height: 20px; -} - -/* Music-On-Hold Feature */ -.monster-feature-popup-container[data-feature="music_on_hold"] .media-dropdown { - margin-bottom: 0px; -} -.monster-feature-popup-container[data-feature="music_on_hold"] .upload-toggle { - margin-left: 10px; - min-width: 117px; -} -.monster-feature-popup-container[data-feature="music_on_hold"] .upload-div { - display: none; - margin-top: 20px; -} -.monster-feature-popup-container[data-feature="music_on_hold"] .upload-div .upload-input { - margin: 0; - width: 330px; -} -.monster-feature-popup-container[data-feature="music_on_hold"] .upload-div button.upload-action { - margin-left: 10px; - padding-left: 19px; - padding-right: 19px; -} - -.monster-feature-popup-container[data-feature="music_on_hold"] .upload-div button > i { - margin-right: 0; - padding-right: 0; -} - -.monster-feature-popup-container[data-feature="music_on_hold"] .upload-div .file-upload { - margin: 0; -} -.monster-feature-popup-container[data-feature="music_on_hold"] .upload-div .file-upload > input { - margin: 0; - padding: 6px; - width: 192px; -} - -/* Faxing Feature Popup */ -.monster-feature-popup-container[data-feature='faxing'] { - overflow: hidden; -} - -.monster-feature-popup-container[data-feature='faxing'] #faxbox_form { - margin-bottom: 0; -} - -.monster-feature-popup-container[data-feature='faxing'] #faxbox_form a { - color: #22a5ff; - text-decoration: underline; -} - -.monster-feature-popup-container[data-feature='faxing'] #faxbox_form a:hover { - text-decoration: none; -} - -.monster-feature-popup-container[data-feature='faxing'] #faxbox_form p { - line-height: 30px; -} - -.monster-feature-popup-container[data-feature='faxing'] #faxbox_form .monster-primary-color { - color: #22a5ff; -} - -.monster-feature-popup-container[data-feature='faxing'] #faxbox_form .number-selector { - display: inline-block; - margin: 0 10px; -} - -.monster-feature-popup-container[data-feature='faxing'] #faxbox_form #helper_content { - margin-top: 10px; -} - /* Change Password Popup */ .smart-edit-popup { width: 430px; @@ -832,39 +710,6 @@ margin-right: 10px; } -/* Find me Follow me feature popup */ -.monster-feature-popup-container[data-feature="find_me_follow_me"] { - width: 620px; -} - -#find_me_follow_me_form { - margin: 0; -} - -#find_me_follow_me_form .no-device { - color: red; - font-size: 18px; - padding: 10px; -} - -#find_me_follow_me_form .grid-time .grid-time-row { - background-color: inherit; -} -#find_me_follow_me_form .grid-time .grid-time-row .name { - width: 25%; -} -#find_me_follow_me_form .grid-time .grid-time-row .times { - width: 65%; -} -#find_me_follow_me_form .grid-time .grid-time-row .scale-container { - right: 10%; - left: 25%; -} -#find_me_follow_me_form .grid-time .grid-time-row-placeholder { - height: 52px; - background-color: inherit; -} - /********* CSS for device popovers (appended directly on the body) *********/ .device-popover-icon { margin-right: 10px; @@ -913,30 +758,211 @@ margin-top: 10px; } -.monster-feature-popup-container[data-feature="call_forward"] { - width: 600px; -} +.monster-feature-popup-container { + .feature-popup-title { + display: flex; + align-items: center; -.monster-feature-popup-container[data-feature="call_forward"] .btn-group { - float: right; - font-size: 14px; - margin-right: 25px; - margin-top: 40px; -} + .popup-title { + display: flex; + align-items: center; -.monster-feature-popup-container[data-feature="call_forward"] .failover-info { - margin-bottom: 25px; -} + .feature-title { + max-height: 4em; + overflow-y: hidden; + } + } -.monster-feature-popup-container[data-feature="call_forward"] .failover-info.disabled { - display: none; -} + .popup-action { + margin: 0 25px 0 20px; + } + } -/*** Call recording popup ***/ -.monster-feature-popup-container[data-feature="call_recording"] .btn-group-wrapper button { - font-size: 14px; -} + &[data-feature="call_recording"] .btn-group-wrapper { + button { + font-size: 14px; + } -.monster-feature-popup-container[data-feature="call_recording"] .btn-group-wrapper .btn-group { - margin-left: 10px; + .btn-group { + margin-left: 10px; + } + } + + &[data-feature="forward"] { + width: 600px; + + .btn-group { + font-size: 14px; + } + + .failover-info { + margin-bottom: 25px; + + &.disabled { + display: none; + } + } + } + + &[data-feature="caller_id"] { + width: 525px; + + .caller-id-select { + margin-top: 5px; + } + } + + &[data-feature="conferencing"] { + form { + margin-bottom: 0; + + .list-numbers { + display: inline-block; + font-weight: 600; + height: 65px; + line-height: 15px; + margin-left: 25px; + overflow: auto; + vertical-align: middle; + width: 180px; + + &[data-count="1"] { + line-height: 61px; + } + + &[data-count="2"] { + line-height: 32px; + } + + &[data-count="3"] { + line-height: 20px; + } + } + } + } + + &[data-feature='faxing'] { + overflow: hidden; + + #faxbox_form { + margin-bottom: 0; + + a { + color: #22a5ff; + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } + + p { + line-height: 30px; + } + + .monster-primary-color { + color: $primary-color; + } + + .number-selector { + display: inline-block; + margin: 0 10px; + } + + #helper_content { + margin-top: 10px; + } + } + } + + &[data-feature="find_me_follow_me"] { + width: 620px; + + #find_me_follow_me_form { + margin: 0; + + .no-device { + color: red; + font-size: 18px; + padding: 10px; + } + + .grid-time { + .grid-time-row { + background-color: inherit; + + .name { + width: 25%; + } + .times { + width: 65%; + } + .scale-container { + right: 10%; + left: 25%; + } + } + + .grid-time-row-placeholder { + height: 52px; + background-color: inherit; + } + } + } + } + + &[data-feature="hotdesk"] { + #pin { + margin-top: 10px; + } + } + + &[data-feature="music_on_hold"] { + .media-dropdown { + margin-bottom: 0px; + } + .upload-toggle { + margin-left: 10px; + min-width: 117px; + } + .upload-div { + display: none; + margin-top: 20px; + + .upload-input { + margin: 0; + width: 330px; + } + button.upload-action { + margin-left: 10px; + padding-left: 19px; + padding-right: 19px; + } + button > i { + margin-right: 0; + padding-right: 0; + } + .file-upload { + margin: 0; + + & > input { + margin: 0; + padding: 6px; + width: 192px; + } + } + } + } + + &[data-feature="vm_to_email"] { + #email { + margin-top: 8px; + } + + .main-line { + height: auto; + line-height: 20px; + margin: 10px 0 30px 0; + } + } } diff --git a/submodules/users/views/feature-call_forward.html b/submodules/users/views/feature-call_forward.html index b9dd990..3a75802 100644 --- a/submodules/users/views/feature-call_forward.html +++ b/submodules/users/views/feature-call_forward.html @@ -1,11 +1,16 @@
-
- +
+
+ +
+ +
+ {{ i18n.users.call_forward.headline }} +
- {{ i18n.users.call_forward.headline }} -
+
diff --git a/submodules/users/views/feature-call_recording.html b/submodules/users/views/feature-call_recording.html index 78cb071..3be966f 100644 --- a/submodules/users/views/feature-call_recording.html +++ b/submodules/users/views/feature-call_recording.html @@ -1,10 +1,14 @@
-
- +
+
+ +
+
+ {{ i18n.users.callRecording.headline }} +
- {{ i18n.users.callRecording.headline }} -
+
{{#monsterSwitch}} {{/monsterSwitch}} diff --git a/submodules/users/views/feature-caller_id.html b/submodules/users/views/feature-caller_id.html index a8369c7..6eb27d7 100644 --- a/submodules/users/views/feature-caller_id.html +++ b/submodules/users/views/feature-caller_id.html @@ -1,10 +1,14 @@
-
- +
+
+ +
+
+ {{ i18n.users.caller_id.headline }} +
- {{ i18n.users.caller_id.headline }} -
+
{{#monsterSwitch}} {{/monsterSwitch}} diff --git a/submodules/users/views/feature-conferencing.html b/submodules/users/views/feature-conferencing.html index cf7bcd6..66e6553 100644 --- a/submodules/users/views/feature-conferencing.html +++ b/submodules/users/views/feature-conferencing.html @@ -1,10 +1,14 @@
-
- +
+
+ +
+
+ {{ i18n.users.conferencing.headline }} +
- {{ i18n.users.conferencing.headline }} -
+
{{#monsterSwitch}} {{/monsterSwitch}} diff --git a/submodules/users/views/feature-do_not_disturb.html b/submodules/users/views/feature-do_not_disturb.html index 3ceecf0..394dea9 100644 --- a/submodules/users/views/feature-do_not_disturb.html +++ b/submodules/users/views/feature-do_not_disturb.html @@ -1,10 +1,14 @@
-
- +
+
+ +
+
+ {{ i18n.users.do_not_disturb.headline }} +
- {{ i18n.users.do_not_disturb.headline }} -
+
{{#monsterSwitch}} {{/monsterSwitch}} diff --git a/submodules/users/views/feature-faxing.html b/submodules/users/views/feature-faxing.html index 62e3a27..56e8094 100644 --- a/submodules/users/views/feature-faxing.html +++ b/submodules/users/views/feature-faxing.html @@ -1,10 +1,14 @@
-
- +
+
+ +
+
+ {{ i18n.users.faxing.headline }} +
- {{ i18n.users.faxing.headline }} -
+
{{#monsterSwitch}} {{/monsterSwitch}} diff --git a/submodules/users/views/feature-find_me_follow_me.html b/submodules/users/views/feature-find_me_follow_me.html index 732621c..dd33440 100644 --- a/submodules/users/views/feature-find_me_follow_me.html +++ b/submodules/users/views/feature-find_me_follow_me.html @@ -1,10 +1,14 @@
-
- +
+
+ +
+
+ {{ i18n.users.find_me_follow_me.headline }} +
- {{ i18n.users.find_me_follow_me.headline }} -
+
{{#monsterSwitch}} {{/monsterSwitch}} @@ -22,4 +26,4 @@
-
\ No newline at end of file +
diff --git a/submodules/users/views/feature-hotdesk.html b/submodules/users/views/feature-hotdesk.html index cd01b2f..226ac01 100644 --- a/submodules/users/views/feature-hotdesk.html +++ b/submodules/users/views/feature-hotdesk.html @@ -1,10 +1,14 @@
-
- +
+
+ +
+
+ {{ i18n.users.hotdesk.headline }} +
- {{ i18n.users.hotdesk.headline }} -
+
{{#monsterSwitch}} {{/monsterSwitch}} diff --git a/submodules/users/views/feature-music_on_hold.html b/submodules/users/views/feature-music_on_hold.html index 66eb7e8..af551bf 100644 --- a/submodules/users/views/feature-music_on_hold.html +++ b/submodules/users/views/feature-music_on_hold.html @@ -1,10 +1,14 @@
-
- +
+
+ +
+
+ {{ i18n.users.music_on_hold.headline }} +
- {{ i18n.users.music_on_hold.headline }} -
+
{{#monsterSwitch}} {{/monsterSwitch}} @@ -37,4 +41,4 @@
-
\ No newline at end of file +
diff --git a/submodules/users/views/feature-vm_to_email.html b/submodules/users/views/feature-vm_to_email.html index 788ce61..01dfa83 100644 --- a/submodules/users/views/feature-vm_to_email.html +++ b/submodules/users/views/feature-vm_to_email.html @@ -1,10 +1,14 @@
-
- +
+
+ +
+
+ {{ i18n.users.vm_to_email.headline }} +
- {{ i18n.users.vm_to_email.headline }} -
+
{{#monsterSwitch}} {{/monsterSwitch}}