start adding compose icons, update seafoam style
This commit is contained in:
Nolan Lawson
parent
a6b2f270c8
commit
3c62411819
|
|
@ -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'},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -17,6 +17,12 @@
|
|||
style="transform: scaleX({{inputLengthAsFractionOfMaxRoundedAfterRaf || 0}});"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
<div class="compose-profile-toolbar">
|
||||
<IconButton label="Insert emoji" href="#fa-smile" />
|
||||
<IconButton label="Add media" href="#fa-camera" />
|
||||
<IconButton label="Adjust privacy" href="#fa-globe" />
|
||||
<IconButton label="Add content warning" href="#fa-exclamation-triangle" />
|
||||
</div>
|
||||
<span class="compose-profile-length"
|
||||
aria-label="{{inputLengthLabel}}">
|
||||
{{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: {
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<Layout page='home'>
|
||||
{{#if $isUserLoggedIn}}
|
||||
{{#if $currentVerifyCredentials}}
|
||||
<LiteComposeBox verifyCredentials="{{$currentVerifyCredentials}}"/>
|
||||
<ComposeBox verifyCredentials="{{$currentVerifyCredentials}}"/>
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='home' />
|
||||
{{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
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
|||
<symbol id="fa-bars" viewBox="0 0 1792 1792"><title>List</title><path d="M1664 1344v128q0 26-19 45t-45 19H192q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19H192q-26 0-45-19t-19-45V832q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19H192q-26 0-45-19t-19-45V320q0-26 19-45t45-19h1408q26 0 45 19t19 45z"></path></symbol>
|
||||
<symbol id="fa-volume-off" viewBox="0 0 1792 1792"><title>Volume off</title><path d="M1280 352v1088q0 26-19 45t-45 19-45-19l-333-333H576q-26 0-45-19t-19-45V704q0-26 19-45t45-19h262l333-333q19-19 45-19t45 19 19 45z"></path></symbol>
|
||||
<symbol id="fa-ban" viewBox="0 0 1792 1792"><title>Ban</title><path d="M1440 893q0-161-87-295l-754 753q137 89 297 89 111 0 211.5-43.5T1281 1280t116-174.5 43-212.5zm-999 299l755-754q-135-91-300-91-148 0-273 73T425 619t-73 274q0 162 89 299zm1223-299q0 157-61 300t-163.5 246-245 164-298.5 61-298.5-61-245-164T189 1193t-61-300 61-299.5T352.5 348t245-164T896 123t298.5 61 245 164T1603 593.5t61 299.5z"></path></symbol>
|
||||
<symbol id="fa-camera" viewBox="0 0 2048 1792"><title>Camera</title><path d="M1024 672q119 0 203.5 84.5T1312 960t-84.5 203.5T1024 1248t-203.5-84.5T736 960t84.5-203.5T1024 672zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75H320q-106 0-181-75t-75-181V512q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5T768 0h512q53 0 103.5 35.5T1453 120l51 136h224zm-704 1152q185 0 316.5-131.5T1472 960t-131.5-316.5T1024 512 707.5 643.5 576 960t131.5 316.5T1024 1408z"></path></symbol>
|
||||
<symbol id="fa-smile" viewBox="0 0 1792 1792"><title>Smile</title><path d="M1262 1075q-37 121-138 195t-228 74-228-74-138-195q-8-25 4-48.5t38-31.5q25-8 48.5 4t31.5 38q25 80 92.5 129.5T896 1216t151.5-49.5T1140 1037q8-26 32-38t49-4 37 31.5 4 48.5zM768 640q0 53-37.5 90.5T640 768t-90.5-37.5T512 640t37.5-90.5T640 512t90.5 37.5T768 640zm512 0q0 53-37.5 90.5T1152 768t-90.5-37.5T1024 640t37.5-90.5T1152 512t90.5 37.5T1280 640zm256 256q0-130-51-248.5t-136.5-204-204-136.5T896 256t-248.5 51-204 136.5-136.5 204T256 896t51 248.5 136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5zm128 0q0 209-103 385.5T1281.5 1561 896 1664t-385.5-103T231 1281.5 128 896t103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z"></path></symbol>
|
||||
<symbol id="fa-exclamation-triangle" viewBox="0 0 1792 1792"><title>Warning</title><path d="M1024 1375v-190q0-14-9.5-23.5T992 1152H800q-13 0-22.5 9.5T768 1185v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11H786q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17H128q-34 0-63.5-17T18 1601q-37-63-2-126L784 67q17-31 47-49t65-18 65 18 47 49z"></path></symbol>
|
||||
</svg><!-- end insert svg here -->
|
||||
</svg>
|
||||
<!-- The application will be rendered inside this element,
|
||||
|
|
|
|||
Loading…
Reference in a new issue