From 9c01acee9b865ccc8c4d2ff0556aed4d80f6963b Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 16 Feb 2016 09:28:56 +0100 Subject: [PATCH] css: refactor controls--emailSwitch to generic --button --- .../app/views/layout_ref/inputs.jst.eco | 15 + .../views/layout_ref/merge_customer.jst.eco | 4 +- .../views/layout_ref/primary_email.jst.eco | 20 +- app/assets/stylesheets/zammad.scss | 351 +++++++++--------- 4 files changed, 202 insertions(+), 188 deletions(-) diff --git a/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco b/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco index 1baef73fe..28479211d 100644 --- a/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco +++ b/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco @@ -2,6 +2,21 @@

Inputs

+

Color

+
+
+ +
+
+ +
+
+ <%- @Icon('eyedropper') %> +
+
+
+
+

Time

A time of the day

diff --git a/app/assets/javascripts/app/views/layout_ref/merge_customer.jst.eco b/app/assets/javascripts/app/views/layout_ref/merge_customer.jst.eco index f99a405ce..41c03490d 100644 --- a/app/assets/javascripts/app/views/layout_ref/merge_customer.jst.eco +++ b/app/assets/javascripts/app/views/layout_ref/merge_customer.jst.eco @@ -103,13 +103,13 @@
-
+
nicole.braun@zammad.org
-
+
nicole.mueller@zammad.org
diff --git a/app/assets/javascripts/app/views/layout_ref/primary_email.jst.eco b/app/assets/javascripts/app/views/layout_ref/primary_email.jst.eco index 43b8faed7..8e40c7db8 100644 --- a/app/assets/javascripts/app/views/layout_ref/primary_email.jst.eco +++ b/app/assets/javascripts/app/views/layout_ref/primary_email.jst.eco @@ -38,11 +38,13 @@ +
-
+
-
- - +
+
+ + +
@@ -53,11 +55,13 @@ ×
-
+
-
- - +
+
+ + +
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index b0ae7495e..6c3d1c375 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -1506,190 +1506,198 @@ input.time.time--12 { width: 7.5ch; } - .tokenfield.focus { - border-color: hsl(200,71%,59%); - box-shadow: 0 0 0 3px hsl(201,62%,90%); - } +.tokenfield.focus { + border-color: hsl(200,71%,59%); + box-shadow: 0 0 0 3px hsl(201,62%,90%); +} - .richtext.form-control { - padding-bottom: 28px; - } +.richtext.form-control { + padding-bottom: 28px; +} - .richtext.form-control [contenteditable] { - height: auto; - min-height: 82px; - background: none; - } +.richtext.form-control [contenteditable] { + height: auto; + min-height: 82px; + background: none; +} - .richtext.form-control .attachments.attachments--list:not(:empty) { - border-top: 1px solid rgba(0,0,0,.04); - white-space: normal; - margin: 0 -12px -28px; - padding: 25px 20px 21px 72px; - position: relative; - line-height: 1; - } +.richtext.form-control .attachments.attachments--list:not(:empty) { + border-top: 1px solid rgba(0,0,0,.04); + white-space: normal; + margin: 0 -12px -28px; + padding: 25px 20px 21px 72px; + position: relative; + line-height: 1; +} - textarea.form-control { - height: 118px; - } +textarea.form-control { + height: 118px; +} - select.form-control:not([multiple]) { - padding-left: 10px; - padding-right: 34px; - word-wrap: normal; - } +select.form-control:not([multiple]) { + padding-left: 10px; + padding-right: 34px; + word-wrap: normal; +} - .form-control.is-hidden { - display: none; - } +.form-control.is-hidden { + display: none; +} - .form-control[disabled], .form-control.is-disabled { - cursor: not-allowed; - background-color: #fff; - color: #d5d5d5; - opacity: 1; - } +.form-control[disabled], .form-control.is-disabled { + cursor: not-allowed; + background-color: #fff; + color: #d5d5d5; + opacity: 1; +} - .form-control.form-control--borderless { - border: none; - padding: 0; - line-height: inherit; - height: auto; - - &:focus { - box-shadow: none; - } - } - - .form-control + .icon-arrow-down, - .dropdown-arrow { - position: absolute; - right: 12px; - top: 50%; - margin-top: -3px; - fill: black; - opacity: 0.39; - width: 13px; - height: 7px; - @extend .u-unclickable; - } - - /* - - Firefox only hack - ----------------- - - Firefox below version 35 doesn't allow us to - hide the dropdown arrow but we want to replace - it with our own icon. So we have to hide our own - icon in Firefox versions under 35. - - The class is set via Javascript - - */ - - html.ff-lt-35 .form-control + .icon-arrow-down, - html.ff-lt-35 .dropdown-arrow { - display: none; - } - - select::-ms-expand { - display: none; - } - - .has-error .form-control, - .has-error .form-control:focus, - .has-error .form-control.focus { +.form-control.form-control--borderless { + border: none; + padding: 0; + line-height: inherit; + height: auto; + + &:focus { box-shadow: none; - border-color: red !important; + } +} + +.form-control + .icon-arrow-down, +.dropdown-arrow { + position: absolute; + right: 12px; + top: 50%; + margin-top: -3px; + fill: black; + opacity: 0.39; + width: 13px; + height: 7px; + @extend .u-unclickable; +} + +/* + + Firefox only hack + ----------------- + + Firefox below version 35 doesn't allow us to + hide the dropdown arrow but we want to replace + it with our own icon. So we have to hide our own + icon in Firefox versions under 35. + + The class is set via Javascript + +*/ + +html.ff-lt-35 .form-control + .icon-arrow-down, +html.ff-lt-35 .dropdown-arrow { + display: none; +} + +select::-ms-expand { + display: none; +} + +.has-error .form-control, +.has-error .form-control:focus, +.has-error .form-control.focus { + box-shadow: none; + border-color: red !important; +} + +input.has-error { + box-shadow: none; + border-color: red !important; +} + +.help-inline:not(:empty) { + color: red; + padding: 2px; + font-size: 13px; +} + +/* use on input[type=radio] */ +.primary-email-switch { + display: none; + + & + label { + font-size: 11px; + color: #DBDBDB; + cursor: pointer; + margin: 0; } - input.has-error { - box-shadow: none; - border-color: red !important; + &:checked + label { + color: $highlight-color; } +} - .help-inline:not(:empty) { - color: red; - padding: 2px; - font-size: 13px; - } +.primary-email-switch-label { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} - /* use on input[type=radio] */ - .primary-email-switch { - display: none; +.primary-email-switch + label { + align-self: stretch; + padding: 0 5px; + display: flex; + align-items: center; +} - & + label { - font-size: 11px; - color: #DBDBDB; - cursor: pointer; - margin: 0; - } - - &:checked + label { - color: $highlight-color; - } - } - - .primary-email-switch-holder { - position: relative; - display: flex; +.controls--button { + display: flex; + + input, + .form-control { + flex: 1; + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; - .primary-email-switch-label { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - .primary-email-switch + label { - align-self: stretch; - padding: 0 5px; - display: flex; - align-items: center; - } - } - - .controls--emailSwitch { - display: flex; - - .form-control { - flex: 1; - border-right: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + &:focus + .controls-button { + .controls-button-inner { + border-color: hsl(200,71%,59%); + } - &:focus + .primary-email-switch-holder { - label { - border-color: hsl(200,71%,59%); - } - - /* + /* - fake the form-control outline + fake the form-control outline - */ - &:before { - content: ""; - position: absolute; - left: 0; - top: -3px; - right: -3px; - bottom: -3px; - background: hsl(201,62%,90%); - border-radius: 0 7px 7px 0; - } + */ + &:before { + content: ""; + position: absolute; + left: 0; + top: -3px; + right: -3px; + bottom: -3px; + background: hsl(201,62%,90%); + border-radius: 0 7px 7px 0; } } - - .primary-email-switch-holder label { - padding: 0 9px; - background: white; - position: relative; - border: 1px solid hsl(0, 0%, 90%); - border-radius: 0 3px 3px 0; - } } +} + +.controls-button { + position: relative; + display: flex; + + &.is-active .icon { + fill: $highlight-color; + } +} + +.controls-button-inner { + display: flex; + justify-content: center; + align-items: center; + padding: 0 10px; + background: white; + position: relative; + border: 1px solid hsl(0, 0%, 90%); + border-radius: 0 3px 3px 0; +} .searchfield { position: relative; @@ -7642,24 +7650,11 @@ output { height: 100%; transform-origin: left top; overflow: hidden; - - &[data-mode=screenshot] iframe, - &[data-mode=iframe] img { - display: none; + + &.is-picking { + cursor: image_url("/assets/images/eyedropper.gif") 0 15, auto; } } - - iframe { - position: absolute; - border: none; - left: 0; - top: 0; - width: 100%; - height: 100%; - background: white; - border-radius: 0 0 5px 5px; - pointer-events: none; - } img { vertical-align: bottom;