From c70a91d78524f58d9eae5efe1988215f656876f7 Mon Sep 17 00:00:00 2001 From: Felix Hammerl Date: Tue, 15 Mar 2016 16:47:26 +0100 Subject: Issue #620: Float composer right of close button --- web-ui/app/scss/_compose.scss | 185 --------------------------- web-ui/app/scss/style.scss | 3 +- web-ui/app/scss/views/_compose-button.scss | 24 ++++ web-ui/app/scss/views/_compose-view.scss | 178 ++++++++++++++++++++++++++ web-ui/app/templates/compose/compose_box.hbs | 50 ++++---- 5 files changed, 230 insertions(+), 210 deletions(-) delete mode 100644 web-ui/app/scss/_compose.scss create mode 100644 web-ui/app/scss/views/_compose-button.scss create mode 100644 web-ui/app/scss/views/_compose-view.scss (limited to 'web-ui') diff --git a/web-ui/app/scss/_compose.scss b/web-ui/app/scss/_compose.scss deleted file mode 100644 index 32d11c3d..00000000 --- a/web-ui/app/scss/_compose.scss +++ /dev/null @@ -1,185 +0,0 @@ -// COMPOSE BUTTON -#compose { - margin-bottom: 5px; - padding-right: 4px; - #compose-trigger { - width: 100%; - display: inline-block; - padding: 5px; - #compose-mails-trigger { - background: $action_buttons; - color: $white; - padding: 10px 30px; - text-align: center; - font-weight: 400; - font-size: 1.2em; - @include btn-transition; - &:hover { - background: lighten($action_buttons, 10%); - cursor: pointer; - } - } - } -} - -// COMPOSE PANE -#compose-box, #draft-box, #reply-box, #feedback-box { - div.floatlabel { - position: relative; - } - margin: 5px 0 50px 30px; - padding: 0; - .input-container { - padding: 1px; - } - label, span { - color: $recipients_font_color; - padding: 0.5rem; - cursor: text; - display: inline-block; - } - - label { - padding: 13px 10px; - } - - span { - padding: 3px; - - &.attachment-size { - color: $attachment_size; - cursor: pointer; - } - } - - label.floatlabel { - padding: 0.4rem !important; - position: absolute; - font-size: 0.6rem; - transition: all 0.1s linear; - opacity: 0; - font-weight: bold; - } - label.showfloatlabel { - color: $light_blue !important; - top: -0.3rem; - opacity: 1; - } - input, textarea { - margin: 0; - border: none; - transition: all 0.1s linear; - } - input.showfloatlabel, textarea.showfloatlabel { - padding-top: 1rem !important; - } - input#subject, #feedback-subject { - font-size: 1.6875rem; - line-height: 1.4; - border-top: 1px solid $lighter_gray; - } - #feedback-subject { - color: $dark_grey; - } - textarea { - border-bottom: 2px solid $lighter_gray; - min-height: 400px; - font-family: inherit; - font-weight: normal; - font-size: 1rem; - line-height: 1.6; - text-rendering: optimizeLegibility; - } - - &.reply-box, &.forward-box { - margin: 0; - h4 { - font-size: 0.9em; - font-style: italic; - color: $medium_grey; - margin: 2px 0; - clear: both; - cursor: pointer; - &:hover { - background: $contrast; - } - } - textarea { - min-height: 200px; - margin: 10px 0; - } - p { - padding: 5px; - margin: 10px 0; - font-style: italic; - cursor: pointer; - &:hover { - background: $contrast; - } - } - } - - button.close-mail-button { - margin: 1px; - } - - .buttons-group { - margin-top: 0px; - } - - #attachment-upload-item { - display: none; - - .progress { - width: 0%; - position: absolute; - right: 0; - left: 0; - top: 0; - bottom: 0; - min-height: 100%; - - .progress-bar { - height: 100%; - background-color: rgba($light_blue, 0.3); - } - - } - } - - .attachmentsAreaWrap { - padding: 0; - - .attachmentsArea { - padding: 0; - border-top: 0; - - #upload-error { - color: $error; - margin-bottom: 20px; - - .close-icon { - font-size: 1.0rem; - cursor: pointer; - } - - span, a { - color: $error; - font-size: 0.9rem; - } - - a { - text-decoration: underline; - padding: 5px; - } - } - - } - } - - @include recipients; -} - -#reply-box { - @include recipients; -} diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss index 68b12898..cb905c27 100644 --- a/web-ui/app/scss/style.scss +++ b/web-ui/app/scss/style.scss @@ -22,12 +22,13 @@ @import "views/no-message-selected"; @import "views/no-mails-available"; @import "views/read-view"; +@import "views/compose-view"; +@import "views/compose-button"; // misc stuff @import "others"; // TODO -@import "compose"; @import "reply"; @import "security"; @import "styles"; diff --git a/web-ui/app/scss/views/_compose-button.scss b/web-ui/app/scss/views/_compose-button.scss new file mode 100644 index 00000000..41814a38 --- /dev/null +++ b/web-ui/app/scss/views/_compose-button.scss @@ -0,0 +1,24 @@ +// COMPOSE BUTTON +#compose { + margin-bottom: 5px; + padding-right: 4px; + #compose-trigger { + width: 100%; + display: inline-block; + padding: 5px; + #compose-mails-trigger { + background: $action_buttons; + color: $white; + padding: 10px 30px; + text-align: center; + font-weight: 400; + font-size: 1.2em; + @include btn-transition; + &:hover { + background: lighten($action_buttons, 10%); + cursor: pointer; + } + } + } +} + diff --git a/web-ui/app/scss/views/_compose-view.scss b/web-ui/app/scss/views/_compose-view.scss new file mode 100644 index 00000000..5d6fe0b2 --- /dev/null +++ b/web-ui/app/scss/views/_compose-view.scss @@ -0,0 +1,178 @@ +.compose-view { + overflow: auto; +} + +// COMPOSE PANE +#compose-box, #draft-box, #reply-box, #feedback-box { + div.floatlabel { + position: relative; + } + + margin: 5px 0 50px 30px; + padding: 0; + + .input-container { + padding: 1px; + } + + label, span { + color: $recipients_font_color; + padding: 0.5rem; + cursor: text; + display: inline-block; + } + + label { + padding: 13px 10px; + } + + span { + padding: 3px; + + &.attachment-size { + color: $attachment_size; + cursor: pointer; + } + } + + label.floatlabel { + padding: 0.4rem !important; + position: absolute; + font-size: 0.6rem; + transition: all 0.1s linear; + opacity: 0; + font-weight: bold; + } + + label.showfloatlabel { + color: $light_blue !important; + top: -0.3rem; + opacity: 1; + } + + input, textarea { + margin: 0; + border: none; + transition: all 0.1s linear; + } + + input.showfloatlabel, textarea.showfloatlabel { + padding-top: 1rem !important; + } + + input#subject, #feedback-subject { + font-size: 1.6875rem; + line-height: 1.4; + border-top: 1px solid $lighter_gray; + } + + #feedback-subject { + color: $dark_grey; + } + + textarea { + border-bottom: 2px solid $lighter_gray; + min-height: 400px; + font-family: inherit; + font-weight: normal; + font-size: 1rem; + line-height: 1.6; + text-rendering: optimizeLegibility; + } + + &.reply-box, &.forward-box { + margin: 0; + + h4 { + font-size: 0.9em; + font-style: italic; + color: $medium_grey; + margin: 2px 0; + clear: both; + cursor: pointer; + + &:hover { + background: $contrast; + } + } + + textarea { + min-height: 200px; + margin: 10px 0; + } + + p { + padding: 5px; + margin: 10px 0; + font-style: italic; + cursor: pointer; + + &:hover { + background: $contrast; + } + } + } + + button.close-mail-button { + margin: 1px; + } + + .buttons-group { + margin-top: 0px; + } + + #attachment-upload-item { + display: none; + + .progress { + width: 0%; + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + min-height: 100%; + + .progress-bar { + height: 100%; + background-color: rgba($light_blue, 0.3); + } + } + } + + .attachmentsAreaWrap { + padding: 0; + + .attachmentsArea { + padding: 0; + border-top: 0; + + #upload-error { + color: $error; + margin-bottom: 20px; + + .close-icon { + font-size: 1.0rem; + cursor: pointer; + } + + span, a { + color: $error; + font-size: 0.9rem; + } + + a { + text-decoration: underline; + padding: 5px; + } + } + } + } + + @include recipients; +} + +#reply-box { + @include recipients; +} + diff --git a/web-ui/app/templates/compose/compose_box.hbs b/web-ui/app/templates/compose/compose_box.hbs index 78447ec2..b88138b5 100644 --- a/web-ui/app/templates/compose/compose_box.hbs +++ b/web-ui/app/templates/compose/compose_box.hbs @@ -1,30 +1,32 @@ -{{> recipients }} - -
- {{t 'To'}} - {{t 'CC'}} - {{t 'BCC'}} -
- -
- - -
-
- - -
-{{> attachments_list }} +
+ + {{> recipients }} +
+ {{t 'To'}} + {{t 'CC'}} + {{t 'BCC'}} +
+ +
+ + +
+
+ + +
+ + {{> attachments_list }} -
- - - -
-
+
+ + + +
+
+
-- cgit v1.2.3