Issue #620: Float composer right of close button

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 -->