From 3c62411819c30938481ef9f038f354b3b0f71c0f Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Mon, 26 Feb 2018 20:55:49 -0800 Subject: [PATCH] start adding compose icons, update seafoam style --- bin/svgs.js | 5 ++- .../{LiteComposeBox.html => ComposeBox.html} | 38 +++++++++++++------ routes/index.html | 6 +-- scss/themes/seafoam.scss | 6 +-- templates/2xx.html | 5 ++- 5 files changed, 40 insertions(+), 20 deletions(-) rename routes/_components/compose/{LiteComposeBox.html => ComposeBox.html} (88%) diff --git a/bin/svgs.js b/bin/svgs.js index 87e1254..c5f7f35 100644 --- a/bin/svgs.js +++ b/bin/svgs.js @@ -24,5 +24,8 @@ module.exports = [ {id: 'fa-thumb-tack', src: 'node_modules/font-awesome-svg-png/white/svg/thumb-tack.svg', title: 'Thumbtack'}, {id: 'fa-bars', src: 'node_modules/font-awesome-svg-png/white/svg/bars.svg', title: 'List'}, {id: 'fa-volume-off', src: 'node_modules/font-awesome-svg-png/white/svg/volume-off.svg', title: 'Volume off'}, - {id: 'fa-ban', src: 'node_modules/font-awesome-svg-png/white/svg/ban.svg', title: 'Ban'} + {id: 'fa-ban', src: 'node_modules/font-awesome-svg-png/white/svg/ban.svg', title: 'Ban'}, + {id: 'fa-camera', src: 'node_modules/font-awesome-svg-png/white/svg/camera.svg', title: 'Camera'}, + {id: 'fa-smile', src: 'node_modules/font-awesome-svg-png/white/svg/smile-o.svg', title: 'Smile'}, + {id: 'fa-exclamation-triangle', src: 'node_modules/font-awesome-svg-png/white/svg/exclamation-triangle.svg', title: 'Warning'}, ] diff --git a/routes/_components/compose/LiteComposeBox.html b/routes/_components/compose/ComposeBox.html similarity index 88% rename from routes/_components/compose/LiteComposeBox.html rename to routes/_components/compose/ComposeBox.html index 36127e7..515e233 100644 --- a/routes/_components/compose/LiteComposeBox.html +++ b/routes/_components/compose/ComposeBox.html @@ -17,6 +17,12 @@ style="transform: scaleX({{inputLengthAsFractionOfMaxRoundedAfterRaf || 0}});" aria-hidden="true" > +
+ + + + +
{{inputLengthToDisplayAfterRaf || '0'}} @@ -37,12 +43,12 @@ display: grid; align-items: flex-start; grid-template-areas: - "avatar display-name handle" - "avatar input input" - "avatar gauge gauge" - "avatar length length" - "avatar button button"; - grid-template-columns: min-content minmax(0, max-content) 1fr; + "avatar display-name handle handle" + "avatar input input input" + "avatar gauge gauge gauge" + "avatar toolbar toolbar length" + "avatar button button button"; + grid-template-columns: min-content minmax(0, max-content) 1fr 1fr; border-bottom: 1px solid var(--main-border); width: 560px; max-width: calc(100vw - 40px); @@ -80,11 +86,10 @@ :global(.compose-profile-input) { grid-area: input; - margin-left: 5px; + margin: 10px 0 0 5px; padding: 10px; border: 1px solid var(--input-border); min-height: 75px; - margin-top: 10px; resize: none; overflow: hidden; word-wrap: break-word; @@ -105,9 +110,9 @@ .compose-profile-length-gauge { grid-area: gauge; + margin: 0 0 5px 5px; height: 2px; background: var(--main-theme-color); - margin-left: 5px; transform-origin: left; } .compose-profile-length-gauge.should-animate { @@ -116,10 +121,10 @@ .compose-profile-length { grid-area: length; - margin-top: 5px; justify-self: right; color: var(--main-theme-color); - font-size: 1.1em; + font-size: 1.3em; + align-self: center; } .over-char-limit .compose-profile-length { @@ -130,6 +135,13 @@ background: var(--warning-color); } + .compose-profile-toolbar { + grid-area: toolbar; + align-self: center; + display: flex; + align-items: center; + } + @media (max-width: 767px) { .compose-profile-current-user { padding: 10px 10px; @@ -150,6 +162,7 @@ import { scheduleIdleTask } from '../../_utils/scheduleIdleTask' import debounce from 'lodash/debounce' import { mark, stop } from '../../_utils/marks' + import IconButton from '../IconButton.html' const CHAR_LIMIT = 500 @@ -198,7 +211,8 @@ inputText: '' }), components: { - Avatar + Avatar, + IconButton }, store: () => store, computed: { diff --git a/routes/index.html b/routes/index.html index 87801d7..16bf974 100644 --- a/routes/index.html +++ b/routes/index.html @@ -5,7 +5,7 @@ {{#if $isUserLoggedIn}} {{#if $currentVerifyCredentials}} - + {{/if}} {{else}} @@ -18,7 +18,7 @@ import Layout from './_components/Layout.html' import NotLoggedInHome from './_components/NotLoggedInHome.html' import LazyTimeline from './_components/timeline/LazyTimeline.html' - import LiteComposeBox from './_components/compose/LiteComposeBox.html' + import ComposeBox from './_components/compose/ComposeBox.html' import { store } from './_store/store.js' export default { @@ -27,7 +27,7 @@ Layout, LazyTimeline, NotLoggedInHome, - LiteComposeBox + ComposeBox } } diff --git a/scss/themes/seafoam.scss b/scss/themes/seafoam.scss index 71796d1..4f91a40 100644 --- a/scss/themes/seafoam.scss +++ b/scss/themes/seafoam.scss @@ -1,5 +1,5 @@ -$main-theme-color: teal; -$body-bg-color: lighten($main-theme-color, 70%); +$main-theme-color: #177380; +$body-bg-color: lighten($main-theme-color, 60%); $anchor-color: $main-theme-color; $main-text-color: #333; $border-color: #dadada; @@ -7,7 +7,7 @@ $main-bg-color: white; $secondary-text-color: white; $toast-border: #fafafa; $toast-bg: #333; -$focus-outline: lighten($main-theme-color, 30%); +$focus-outline: lighten($main-theme-color, 50%); @import "_base.scss"; diff --git a/templates/2xx.html b/templates/2xx.html index cc7d596..8954f53 100644 --- a/templates/2xx.html +++ b/templates/2xx.html @@ -39,7 +39,7 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o window.__themeColors = { 'default': "royalblue", scarlet: "#e04e41", - seafoam: "teal", + seafoam: "#177380", hotpants: "hotpink", oaken: "saddlebrown", majesty: "blueviolet", @@ -90,6 +90,9 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o List Volume off Ban +Camera +Smile +Warning