Redesigned compose form

3 files changed, 206 insertions, 17 deletions

diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index bda35425f..506410c27 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -19,9 +19,11 @@
   line-height: 36px;
   border-radius: 4px;
   text-decoration: none;
+  transition: all 100ms ease-in;
 
   &:hover {
     background-color: lighten($color4, 7%);
+    transition: all 200ms ease-out;
   }
 
   &:disabled {
@@ -44,13 +46,17 @@
 }
 
 .icon-button {
+  display: inline-block;
+  padding: 0;
   color: lighten($color1, 26%);
   border: none;
   background: transparent;
   cursor: pointer;
+  transition: all 100ms ease-in;
 
   &:hover {
     color: lighten($color1, 33%);
+    transition: all 200ms ease-out;
   }
 
   &.disabled {
@@ -62,8 +68,63 @@
     color: $color4;
   }
 
-  &:focus {
-    outline: none;
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &::-moz-focus-inner, &:focus, &:active {
+    outline: 0 !important;
+  }
+
+  &.inverted {
+    color: lighten($color1, 33%);
+
+    &:hover {
+      color: lighten($color1, 26%);
+    }
+
+    &.active {
+      color: $color4;
+    }
+
+    &.disabled {
+      color: $color3;
+    }
+  }
+}
+
+.text-icon-button {
+  color: lighten($color1, 26%);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 12px;
+  padding: 0 3px;
+  line-height: 27px;
+  outline: 0;
+  transition: all 100ms ease-in;
+
+  &:hover {
+    color: lighten($color1, 33%);
+    transition: all 200ms ease-out;
+  }
+
+  &.disabled {
+    color: lighten($color1, 13%);
+    cursor: default;
+  }
+
+  &.active {
+    color: $color4;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &::-moz-focus-inner, &:focus, &:active {
+    outline: 0 !important;
   }
 }
 
@@ -103,6 +164,29 @@
   }
 }
 
+.compose-form__modifiers {
+  color: $color1;
+  font-family: inherit;
+  font-size: 14px;
+  background: $color5;
+  border-radius: 0 0 4px 0;
+}
+
+.compose-form__buttons {
+  padding: 10px;
+  background: darken($color5, 8%);
+  box-shadow: inset 0 5px 5px rgba($color8, 0.05);
+  border-radius: 0 0 4px 4px;
+  flex: 1 1 auto;
+  margin-right: 16px;
+  display: flex;
+
+  .icon-button {
+    box-sizing: content-box;
+    padding: 0 3px;
+  }
+}
+
 .compose-form__label {
   display: block;
   line-height: 24px;
@@ -144,6 +228,9 @@
 }
 
 .reply-indicator {
+  border-radius: 4px 4px 0 0;
+  position: relative;
+  bottom: -2px;
   background: $color3;
   padding: 10px;
 
@@ -515,6 +602,7 @@ a.status__content__spoiler-link {
   flex-shrink: 0;
   cursor: default;
   color: $color3;
+  padding-bottom: 5px;
 
   strong {
     color: $color5;
@@ -568,6 +656,10 @@ a.status__content__spoiler-link {
     & > ul {
       left: -98px;
     }
+
+    & > .emoji-dialog {
+      left: -249px;
+    }
   }
 
   & > ul > li > a {
@@ -585,7 +677,7 @@ a.status__content__spoiler-link {
     white-space: nowrap;
 
     &:focus {
-      outline: none;
+      outline: 0;
     }
 
     &:hover {
@@ -643,7 +735,7 @@ a.status__content__spoiler-link {
 }
 
 .drawer {
-  width: 280px;
+  width: 330px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -676,7 +768,8 @@ a.status__content__spoiler-link {
 }
 
 .drawer__inner {
-  background: linear-gradient(rgba(lighten($color1, 13%), 1), rgba(lighten($color1, 13%), 0.65));
+  //background: linear-gradient(rgba(lighten($color1, 13%), 1), rgba(lighten($color1, 13%), 0.65));
+  background: lighten($color1, 13%);
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -965,11 +1058,23 @@ a.status__content__spoiler-link {
   font-size: 14px;
   resize: vertical;
   border: 0;
+  outline: 0;
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.spoiler-input__input {
+  border-radius: 4px;
 }
 
 .autosuggest-textarea__textarea {
   height: 100px;
   background: $color5;
+  border-radius: 4px 4px 0 0;
+  padding-bottom: 0;
+  padding-right: 10px + 22px;
 }
 
 .autosuggest-textarea__suggestions {
@@ -1153,6 +1258,11 @@ button.active i.fa-retweet {
 .collapsable {
   color: $color5;
   background: lighten($color1, 8%);
+
+  &:hover {
+    color: $color5;
+    background: lighten($color1, 8%);
+  }
 }
 
 .media-spoiler {
@@ -1411,7 +1521,7 @@ button.active i.fa-retweet {
     cursor: pointer;
 
     &:focus {
-      outline: none;
+      outline: 0;
     }
   }
 }
@@ -1479,7 +1589,7 @@ button.active i.fa-retweet {
 }
 
 .upload-progress {
-  padding-bottom: 20px;
+  padding: 10px;
   color: lighten($color1, 26%);
   overflow: hidden;
   display: flex;
@@ -1511,14 +1621,20 @@ button.active i.fa-retweet {
   left: 0;
   top: 0;
   height: 6px;
-  background: $color2;
+  background: $color4;
   border-radius: 6px;
 }
 
 .emoji-button {
+  outline: 0;
+
+  &:active, &:focus {
+    outline: 0 !important;
+  }
+
   img {
     filter: grayscale(100%);
-    opacity: 0.4;
+    opacity: 0.8;
     display: block;
     margin: 0;
     width: 22px;
@@ -1538,3 +1654,74 @@ button.active i.fa-retweet {
   opacity: 1;
   filter: none;
 }
+
+.privacy-dropdown {
+  position: relative;
+}
+
+.privacy-dropdown__dropdown {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 24px;
+  width: 180px;
+  background: $color5;
+  border-radius: 0 4px 4px 4px;
+  z-index: 2;
+  overflow: hidden;
+}
+
+.privacy-dropdown__option {
+  color: $color1;
+  padding: 10px;
+  cursor: pointer;
+  display: flex;
+
+  &:hover, &.active {
+    background: $color4;
+    color: $color5;
+
+    .privacy-dropdown__option__content {
+      color: $color5;
+
+      strong {
+        color: $color5;
+      }
+    }
+  }
+
+  &.active:hover {
+    background: lighten($color4, 4%);
+  }
+}
+
+.privacy-dropdown__option__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+}
+
+.privacy-dropdown__option__content {
+  flex: 1 1 auto;
+  color: $color3;
+
+  strong {
+    font-weight: 500;
+    display: block;
+    color: $color1;
+  }
+}
+
+.privacy-dropdown.active {
+  .privacy-dropdown__value {
+    background: $color5;
+    border-radius: 4px 4px 0 0;
+    box-shadow: 0 -4px 4px rgba($color8, 0.1);
+  }
+
+  .privacy-dropdown__dropdown {
+    display: block;
+    box-shadow: 2px 4px 6px rgba($color8, 0.1);
+  }
+}
diff --git a/app/assets/stylesheets/fonts/roboto-mono.scss b/app/assets/stylesheets/fonts/roboto-mono.scss
index ca64649de..319ecb08e 100644
--- a/app/assets/stylesheets/fonts/roboto-mono.scss
+++ b/app/assets/stylesheets/fonts/roboto-mono.scss
@@ -1,3 +1,4 @@
+/*
 @font-face {
   font-family: 'Roboto Mono';
   src: font-url('roboto-mono/robotomono-bold-webfont.eot');
@@ -105,7 +106,7 @@
 }
 
 
-
+*/
 
 @font-face {
   font-family: 'Roboto Mono';
@@ -121,7 +122,7 @@
 }
 
 
-
+/*
 
 @font-face {
   font-family: 'Roboto Mono';
@@ -150,4 +151,4 @@
   font-weight: 200;
   font-style: italic;
 
-}
\ No newline at end of file
+}*/
diff --git a/app/assets/stylesheets/fonts/roboto.scss b/app/assets/stylesheets/fonts/roboto.scss
index aa91efe6d..5c0d14043 100644
--- a/app/assets/stylesheets/fonts/roboto.scss
+++ b/app/assets/stylesheets/fonts/roboto.scss
@@ -1,3 +1,4 @@
+/*
 @font-face {
 	font-family: 'Roboto';
 	src: font-url('roboto/roboto-lightitalic-webfont.eot');
@@ -8,7 +9,7 @@
 		font-url('roboto/roboto-lightitalic-webfont.svg#roboto-lightitalic-webfont') format('svg');
 	font-weight: 300;
 	font-style: italic;
-}
+}*/
 
 @font-face {
 	font-family: 'Roboto';
@@ -46,7 +47,7 @@
 	font-weight: 500;
 	font-style: normal;
 }
-
+/*
 @font-face {
 	font-family: 'Roboto';
 	src: font-url('roboto/roboto-thin-webfont.eot');
@@ -57,7 +58,7 @@
 		font-url('roboto/roboto-thin-webfont.svg#roboto-thin-webfont') format('svg');
 	font-weight: 100;
 	font-style: normal;
-}
+}*/
 
 @font-face {
 	font-family: 'Roboto';
@@ -70,7 +71,7 @@
 	font-weight: normal;
 	font-style: normal;
 }
-
+/*
 @font-face {
 	font-family: 'Roboto';
 	src: font-url('roboto/roboto-mediumitalic-webfont.eot');
@@ -141,4 +142,4 @@
 		font-url('roboto/roboto-black-webfont.svg#roboto-black-webfont') format('svg');
 	font-weight: 900;
 	font-style: normal;
-}
+}*/