Mastodon
/
Pinafore-Web-Client-Frontend
mirror of https://github.com/nolanlawson/pinafore
1
0
Fork 0
Code Issues Releases Wiki Activity

start adding compose icons, update seafoam style

This commit is contained in:
Nolan Lawson 2018-02-26 20:55:49 -08:00
parent a6b2f270c8
commit 3c62411819
5 changed files with 40 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
bin/svgs.js
View File

@ -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'},
]

38
routes/_components/compose/LiteComposeBox.html → routes/_components/compose/ComposeBox.html
View File

@ -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: {

6
routes/index.html
View File

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

6
scss/themes/seafoam.scss
View File

@ -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";

5
templates/2xx.html
View File

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