summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--web-ui/app/scss/_compose.scss185
-rw-r--r--web-ui/app/scss/style.scss3
-rw-r--r--web-ui/app/scss/views/_compose-button.scss24
-rw-r--r--web-ui/app/scss/views/_compose-view.scss178
-rw-r--r--web-ui/app/templates/compose/compose_box.hbs50
5 files changed, 230 insertions, 210 deletions
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 }}
-
-<div class="clearfix">
- <a id="to-trigger" class="hide">{{t 'To'}}</a>
- <a id="ccs-trigger" class="hide">{{t 'CC'}}</a>
- <a id="bccs-trigger" class="hide">{{t 'BCC'}}</a>
-</div>
-
<button class="close-mail-button">
<i class="fa fa-times"></i>
</button>
-<div class="floatlabel">
- <label class="floatlabel" for="subject">Subject</label>
- <input class="floatlabel" name="subject" type="text" id="subject" value="{{subject}}" placeholder="{{t 'Subject'}}"
- tabindex="4"/>
-</div>
-<div class="floatlabel">
- <label class="floatlabel" for="body">Body</label>
- <textarea class="floatlabel" name="body" id="text-box" placeholder="{{t 'Body'}}" tabindex="5">{{body}}</textarea>
-</div>
-{{> attachments_list }}
+<div class="compose-view">
+
+ {{> recipients }}
+ <div class="clearfix">
+ <a id="to-trigger" class="hide">{{t 'To'}}</a>
+ <a id="ccs-trigger" class="hide">{{t 'CC'}}</a>
+ <a id="bccs-trigger" class="hide">{{t 'BCC'}}</a>
+ </div>
+
+ <div class="floatlabel">
+ <label class="floatlabel" for="subject">Subject</label>
+ <input class="floatlabel" name="subject" type="text" id="subject" value="{{subject}}" placeholder="{{t 'Subject'}}" tabindex="4"/>
+ </div>
+ <div class="floatlabel">
+ <label class="floatlabel" for="body">Body</label>
+ <textarea class="floatlabel" name="body" id="text-box" placeholder="{{t 'Body'}}" tabindex="5">{{body}}</textarea>
+ </div>
+
+ {{> attachments_list }}
-<div class="buttons-group columns">
- <button id="send-button" tabindex="6"><i class="fa fa-send"></i></button>
- <span id="attachment-button" tabindex="6"></span>
- <button id="trash-button" tabindex="7">{{t 'trash-button'}}<i class="fa fa-trash-o"></i></button>
- <div id="draft-save-status"></div>
-</div>
+ <div class="buttons-group columns">
+ <button id="send-button" tabindex="6"><i class="fa fa-send"></i></button>
+ <span id="attachment-button" tabindex="6"></span>
+ <button id="trash-button" tabindex="7">{{t 'trash-button'}}<i class="fa fa-trash-o"></i></button>
+ <div id="draft-save-status"></div>
+ </div>
+</div> <!-- ./compose-view -->