WIP <Compose> Refactor; <ActionsModal>; dropdowns

1 files changed, 311 insertions, 256 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss
index a8d688ea5..ae9114644 100644
--- a/app/javascript/flavours/glitch/styles/components/composer.scss
+++ b/app/javascript/flavours/glitch/styles/components/composer.scss
@@ -1,315 +1,370 @@
-.composer {
+.composer { padding: 10px }
+
+.composer--spoiler {
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  border-radius: 4px;
   padding: 10px;
+  width: 100%;
+  outline: 0;
+  color: $ui-base-color;
+  background: $simple-background-color;
+  font-size: 14px;
+  font-family: inherit;
+  resize: vertical;
+
+  &:focus { outline: 0 }
+  @include single-column('screen and (max-width: 630px)') { font-size: 16px }
+}
+
+.composer--warning {
+  color: darken($ui-secondary-color, 65%);
+  margin-bottom: 15px;
+  background: $ui-primary-color;
+  box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
+  padding: 8px 10px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 400;
+
+  a {
+    color: darken($ui-primary-color, 33%);
+    font-weight: 500;
+    text-decoration: underline;
+
+    &:active,
+    &:focus,
+    &:hover { text-decoration: none }
+  }
+}
+
+.composer--reply {
+  margin: 0 0 -2px;
+  border-radius: 4px 4px 0 0;
+  padding: 10px;
+  background: $ui-primary-color;
+
+  & > header {
+    margin-bottom: 5px;
+    overflow: hidden;
+
+    & > .account {
+      & > .avatar {
+        float: left;
+        margin-right: 5px;
+      }
+
+      & > .display_name {
+        color: $ui-base-color;
+        display: block;
+        padding-right: 25px;
+        max-width: 100%;
+        line-height: 24px;
+        text-decoration: none;
+        overflow: hidden;
+      }
+    }
+
+    & > .cancel {
+      float: right;
+      line-height: 24px;
+    }
+  }
+
+  & > .content {
+    position: relative;
+    margin: 10px 0;
+    padding: 0 12px;
+    font-size: 14px;
+    line-height: 20px;
+    color: $ui-base-color;
+    word-wrap: break-word;
+    font-weight: 400;
+    overflow: visible;
+    white-space: pre-wrap;
+    padding-top: 5px;
+  }
+
+  .emojione {
+    width: 20px;
+    height: 20px;
+    margin: -5px 0 0;
+  }
+
+  p {
+    margin-bottom: 20px;
+
+    &:last-child { margin-bottom: 0 }
+  }
+
+  a {
+    color: lighten($ui-base-color, 20%);
+    text-decoration: none;
+
+    &:hover { text-decoration: underline }
+
+    &.mention {
+      &:hover {
+        text-decoration: none;
+
+        span { text-decoration: underline }
+      }
+    }
+  }
+}
 
-  .composer--spoiler {
+.composer--textarea {
+  background: $simple-background-color;
+  position: relative;
+
+  &:disabled { background: $ui-secondary-color }
+
+  & > .textarea {
     display: block;
     box-sizing: border-box;
     margin: 0;
     border: none;
-    border-radius: 4px;
-    padding: 10px;
+    border-radius: 4px 4px 0 0;
+    padding: 10px 32px 0 10px;
     width: 100%;
+    min-height: 100px;
     outline: 0;
     color: $ui-base-color;
     background: $simple-background-color;
     font-size: 14px;
     font-family: inherit;
-    resize: vertical;
+    resize: none;
 
     &:focus { outline: 0 }
     @include single-column('screen and (max-width: 630px)') { font-size: 16px }
+
+    @include limited-single-column('screen and (max-width: 600px)') {
+      height: 100px !important; // prevent auto-resize textarea
+      resize: vertical;
+    }
   }
+}
 
-  .composer--warning {
-    color: darken($ui-secondary-color, 65%);
-    margin-bottom: 15px;
-    background: $ui-primary-color;
-    box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
-    padding: 8px 10px;
-    border-radius: 4px;
-    font-size: 13px;
-    font-weight: 400;
+.composer--textarea--suggestions {
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  top: 100%;
+  border-radius: 0 0 4px 4px;
+  padding: 6px;
+  width: 100%;
+  color: $ui-base-color;
+  background: $ui-secondary-color;
+  box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
+  font-size: 14px;
+  z-index: 99;
+
+  &[hidden] { display: none }
+}
 
-    a {
-      color: darken($ui-primary-color, 33%);
-      font-weight: 500;
-      text-decoration: underline;
+.composer--textarea--suggestions--item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  border-radius: 4px;
+  padding: 10px;
+  font-size: 14px;
+  line-height: 18px;
+  cursor: pointer;
 
-      &:active,
-      &:focus,
-      &:hover { text-decoration: none }
+  &:hover,
+  &:focus,
+  &:active,
+  &.active { background: darken($ui-secondary-color, 10%) }
+
+  & > .emoji {
+    img {
+      display: block;
+      float: left;
+      margin-right: 8px;
+      width: 16px;
+      height: 16px;
     }
   }
+}
 
-  .composer--reply {
-    margin: 0 0 -2px;
-    border-radius: 4px 4px 0 0;
-    padding: 10px;
-    background: $ui-primary-color;
-
-    & > header {
-      margin-bottom: 5px;
-      overflow: hidden;
-
-      & > .account {
-        & > .avatar {
-          float: left;
-          margin-right: 5px;
-        }
-
-        & > .display_name {
-          color: $ui-base-color;
-          display: block;
-          padding-right: 25px;
-          max-width: 100%;
-          line-height: 24px;
-          text-decoration: none;
-          overflow: hidden;
-        }
-      }
+.composer--upload_form {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding: 5px;
+  color: $ui-base-color;
+  background: $simple-background-color;
+  font-size: 14px;
+  font-family: inherit;
+  overflow: hidden;
+}
 
-      & > .cancel {
-        float: right;
-        line-height: 24px;
-      }
-    }
+.composer--upload_form--item {
+  flex: 1 1 0;
+  margin: 5px;
+  min-width: 40%;
 
-    & > .content {
-      position: relative;
-      margin: 10px 0;
-      padding: 0 12px;
+  & > div {
+    position: relative;
+    border-radius: 4px;
+    height: 100px;
+    width: 100%;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    input {
+      display: block;
+      position: absolute;
+      box-sizing: border-box;
+      bottom: 0;
+      left: 0;
+      margin: 0;
+      border: 0;
+      padding: 10px;
+      width: 100%;
+      color: $ui-secondary-color;
+      background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
       font-size: 14px;
-      line-height: 20px;
-      color: $ui-base-color;
-      word-wrap: break-word;
-      font-weight: 400;
-      overflow: visible;
-      white-space: pre-wrap;
-      padding-top: 5px;
-    }
+      font-family: inherit;
+      font-weight: 500;
+      opacity: 0;
+      z-index: 2;
+      transition: opacity .1s ease;
+
+      &:focus { color: $white }
 
-    .emojione {
-      width: 20px;
-      height: 20px;
-      margin: -5px 0 0;
+      &::placeholder {
+        opacity: 0.54;
+        color: $ui-secondary-color;
+      }
     }
 
-    p {
-      margin-bottom: 20px;
+    & > .close { mix-blend-mode: difference }
+  }
 
-      &:last-child { margin-bottom: 0 }
+  &.active {
+    & > div {
+      input { opacity: 1 }
     }
+  }
+}
 
-    a {
-      color: lighten($ui-base-color, 20%);
-      text-decoration: none;
+.composer--options {
+  padding: 10px;
+  background: darken($simple-background-color, 8%);
+  box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05);
+  border-radius: 0 0 4px 4px;
+
+  & > * {
+    display: inline-block;
+    box-sizing: content-box;
+    padding: 0 3px;
+    line-height: 27px;
+  }
 
-      &:hover { text-decoration: underline }
+  & > hr {
+    display: inline-block;
+    margin: 0 3px;
+    border-width: 0 0 0 1px;
+    border-style: none none none solid;
+    border-color: transparent transparent transparent darken($simple-background-color, 24%);
+    padding: 0;
+    background: transparent;
+  }
+}
 
-      &.mention {
-        &:hover {
-          text-decoration: none;
+.composer--options--dropdown {
+  & > .value { transition: none }
 
-          span { text-decoration: underline }
-        }
-      }
+  &.active {
+    & > .value {
+      border-radius: 4px 4px 0 0;
+      box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
+      color: $primary-text-color;
+      background: $ui-highlight-color;
     }
   }
+}
 
-  .composer--textarea {
-    background: $simple-background-color;
-    position: relative;
+.composer--options--dropdown__dropdown {
+  position: absolute;
+  margin-left: 40px;
+  border-radius: 4px;
+  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+  background: $simple-background-color;
+  overflow: hidden;
+  transform-origin: 50% 0;
+}
 
-    &:disabled { background: $ui-secondary-color }
+.composer--options--dropdown--item {
+  color: $ui-base-color;
+  padding: 10px;
+  cursor: pointer;
+  display: flex;
 
-    & > .textarea {
-      display: block;
-      box-sizing: border-box;
-      margin: 0;
-      border: none;
-      border-radius: 4px 4px 0 0;
-      padding: 10px 32px 0 10px;
-      width: 100%;
-      min-height: 100px;
-      outline: 0;
-      color: $ui-base-color;
-      background: $simple-background-color;
-      font-size: 14px;
-      font-family: inherit;
-      resize: none;
+  & > .content {
+    flex: 1 1 auto;
+    color: darken($ui-primary-color, 24%);
 
-      &:focus { outline: 0 }
-      @include single-column('screen and (max-width: 630px)') { font-size: 16px }
+    &:not(:first-child) { margin-left: 10px }
 
-      @include limited-single-column('screen and (max-width: 600px)') {
-        height: 100px !important; // prevent auto-resize textarea
-        resize: vertical;
-      }
-    }
-
-    .composer--textarea--suggestions {
+    strong {
       display: block;
-      position: absolute;
-      box-sizing: border-box;
-      top: 100%;
-      border-radius: 0 0 4px 4px;
-      padding: 6px;
-      width: 100%;
       color: $ui-base-color;
-      background: $ui-secondary-color;
-      box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
-      font-size: 14px;
-      z-index: 99;
-
-      &[hidden] { display: none }
-
-      .composer--textarea--suggestions--item {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-start;
-        border-radius: 4px;
-        padding: 10px;
-        font-size: 14px;
-        line-height: 18px;
-        cursor: pointer;
-
-        &:hover,
-        &:focus,
-        &:active,
-        &.active { background: darken($ui-secondary-color, 10%) }
-
-        & > .emoji {
-          img {
-            display: block;
-            float: left;
-            margin-right: 8px;
-            width: 16px;
-            height: 16px;
-          }
-        }
-      }
+      font-weight: 500;
     }
   }
 
-  .composer--upload_form {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    padding: 5px;
-    color: $ui-base-color;
-    background: $simple-background-color;
-    font-size: 14px;
-    font-family: inherit;
-    overflow: hidden;
+  &:hover,
+  &.active {
+    background: $ui-highlight-color;
+    color: $primary-text-color;
 
-    .composer--upload_form--item {
-      flex: 1 1 0;
-      margin: 5px;
-      min-width: 40%;
-
-      & > div {
-        position: relative;
-        border-radius: 4px;
-        height: 100px;
-        width: 100%;
-        background-position: center;
-        background-size: cover;
-        background-repeat: no-repeat;
-
-        input {
-          display: block;
-          position: absolute;
-          box-sizing: border-box;
-          bottom: 0;
-          left: 0;
-          margin: 0;
-          border: 0;
-          padding: 10px;
-          width: 100%;
-          color: $ui-secondary-color;
-          background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
-          font-size: 14px;
-          font-family: inherit;
-          font-weight: 500;
-          opacity: 0;
-          z-index: 2;
-          transition: opacity .1s ease;
-
-          &:focus { color: $white }
-
-          &::placeholder {
-            opacity: 0.54;
-            color: $ui-secondary-color;
-          }
-        }
-
-        & > .close { mix-blend-mode: difference }
-      }
+    & > .content {
+      color: $primary-text-color;
 
-      &.active {
-        & > div {
-          input { opacity: 1 }
-        }
-      }
+      strong { color: $primary-text-color }
     }
   }
 
-  .composer--options {
-    padding: 10px;
-    background: darken($simple-background-color, 8%);
-    box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05);
-    border-radius: 0 0 4px 4px;
-
-    & > * {
-      display: inline-block;
-      box-sizing: content-box;
-      padding: 0 3px;
-      line-height: 27px;
-    }
+  &.active:hover { background: lighten($ui-highlight-color, 4%) }
+}
 
-    & > hr {
-      display: inline-block;
-      margin: 0 3px;
-      border-width: 0 0 0 1px;
-      border-style: none none none solid;
-      border-color: transparent transparent transparent darken($simple-background-color, 24%);
-      padding: 0;
-      background: transparent;
-    }
-  }
+.composer--publisher {
+  padding-top: 10px;
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
 
-  .composer--publisher {
+  & > .count {
+    display: inline-block;
+    margin: 0 16px 0 8px;
     padding-top: 10px;
-    text-align: right;
-    white-space: nowrap;
-    overflow: hidden;
-
-    & > .count {
-      display: inline-block;
-      margin: 0 16px 0 8px;
-      padding-top: 10px;
-      font-size: 16px;
-      line-height: 36px;
-    }
+    font-size: 16px;
+    line-height: 36px;
+  }
 
-    & > .primary {
-      display: inline-block;
-      margin: 0;
-      padding: 0 10px;
-      text-align: center;
-    }
+  & > .primary {
+    display: inline-block;
+    margin: 0;
+    padding: 0 10px;
+    text-align: center;
+  }
 
-    & > .side_arm {
-      display: inline-block;
-      margin: 0 2px 0 0;
-      padding: 0;
-      width: 36px;
-      text-align: center;
-    }
+  & > .side_arm {
+    display: inline-block;
+    margin: 0 2px 0 0;
+    padding: 0;
+    width: 36px;
+    text-align: center;
+  }
 
-    &.over {
-      & > .count { color: $warning-red }
-    }
+  &.over {
+    & > .count { color: $warning-red }
   }
 }