data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

start work on compose box

Browse source
This commit is contained in:
Nolan Lawson 2018-02-25 16:26:43 -08:00
parent 454fcda954
commit 33b999b37a
11 changed files with 172 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
package-lock.json generated
View file

@ -357,6 +357,11 @@
"postcss-value-parser": "3.3.0"
}
},
"autosize": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.0.tgz",
"integrity": "sha1-egWZsbqE1zvXWJsNnaOHAVLGkjc="
},
"aws-sign2": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",

1
package.json
View file

@ -25,6 +25,7 @@
"dependencies": {
"@gamestdio/websocket": "^0.2.2",
"a11y-dialog": "^4.0.1",
"autosize": "^4.0.0",
"cheerio": "^1.0.0-rc.2",
"child-process-promise": "^2.2.1",
"chokidar": "^2.0.0",

4
routes/_actions/instances.js
View file

@ -67,6 +67,10 @@ export async function updateVerifyCredentialsForInstance (instanceName) {
)
}
export async function updateVerifyCredentialsForCurrentInstance () {
await updateVerifyCredentialsForInstance(store.get('currentInstance'))
}
export async function updateInstanceInfo (instanceName) {
await cacheFirstUpdateAfter(
() => getInstanceInfo(instanceName),

139
routes/_components/compose/LiteComposeBox.html Normal file
View file

@ -0,0 +1,139 @@
<div class="lite-compose-box">
<div class="compose-profile-current-user">
<Avatar account="{{verifyCredentials}}" className="compose-profile-avatar" size="small"/>
<a class="compose-profile-display-name" href="/accounts/{{verifyCredentials.id}}">
{{verifyCredentials.display_name || verifyCredentials.acct}}
</a>
<span class="compose-profile-handle">
{{'@' + verifyCredentials.acct}}
</span>
<textarea
class="compose-profile-input"
placeholder="What's on your mind?"
ref:textarea
bind:value=inputText
></textarea>
<button class="primary compose-profile-button">
Toot!
</button>
</div>
</div>
<style>
.lite-compose-box {
display: grid;
flex-direction: row;
}
.compose-profile-current-user {
border-radius: 4px;
padding: 20px;
display: grid;
align-items: flex-start;
grid-template-areas:
"avatar display-name handle"
"avatar input input"
"avatar button button";
grid-template-columns: min-content minmax(0, max-content) 1fr;
grid-template-rows: min-content min-content min-content;
grid-row-gap: 10px;
border-bottom: 1px solid var(--main-border);
width: 560px;
max-width: calc(100vw - 40px);
}
:global(.compose-profile-avatar) {
grid-area: avatar;
margin-right: 15px;
}
.compose-profile-display-name {
color: var(--deemphasized-text-color);
grid-area: display-name;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.1em;
margin-left: 5px;
font-weight: 600;
}
.compose-profile-display-name,
.compose-profile-display-name:hover,
.compose-profile-display-name:visited {
color: var(--body-text-color);
}
:global(.compose-profile-handle) {
grid-area: handle;
color: var(--deemphasized-text-color);
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.1em;
margin-left: 5px;
}
:global(.compose-profile-input) {
font-size: 1.1em;
grid-area: input;
margin-left: 5px;
padding: 5px;
border: 1px solid var(--input-border);
min-height: 75px;
resize: none;
}
.compose-profile-button {
grid-area: button;
justify-self: right;
text-transform: uppercase;
}
@media (max-width: 767px) {
.compose-profile-current-user {
padding: 10px 10px;
max-width: calc(100vw - 20px);
width: 580px;
}
:global(.compose-profile-avatar) {
grid-area: avatar;
margin-right: 5px;
}
}
</style>
<script>
import Avatar from '../Avatar.html'
import { store } from '../../_store/store'
import autosize from 'autosize'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import debounce from 'lodash/debounce'
export default {
oncreate() {
autosize(this.refs.textarea)
this.set({inputText: store.get('currentInputTextInCompose')})
autosize.update(this.refs.textarea)
const saveText = debounce(() => scheduleIdleTask(() => this.store.save()), 1000)
this.observe('inputText', inputText => {
let inputTextInCompose = this.store.get('inputTextInCompose')
let currentInstance = this.store.get('currentInstance')
inputTextInCompose[currentInstance] = inputText || ''
this.store.set({inputTextInCompose: inputTextInCompose})
saveText()
}, {init: false})
},
ondestroy() {
autosize.destroy(this.refs.textarea)
},
data: () => ({
inputText: ''
}),
components: {
Avatar
},
store: () => store,
computed: {
currentInputTextInCompose: ($currentInputTextInCompose) => $currentInputTextInCompose
}
}
</script>

5
routes/_store/instanceComputations.js
View file

@ -101,4 +101,9 @@ export function instanceComputations (store) {
(statusModifications, currentInstance) => {
return statusModifications[currentInstance]
})
store.compute('currentInputTextInCompose',
['inputTextInCompose', 'currentInstance'],
(inputTextInCompose, currentInstance) => (inputTextInCompose[currentInstance] || '')
)
}

6
routes/_store/store.js
View file

@ -13,7 +13,8 @@ const KEYS_TO_STORE_IN_LOCAL_STORAGE = new Set([
'loggedInInstancesInOrder',
'autoplayGifs',
'markMediaAsSensitive',
'pinnedPages'
'pinnedPages',
'inputTextInCompose'
])
class PinaforeStore extends LocalStorageStore {
@ -37,7 +38,8 @@ export const store = new PinaforeStore({
instanceLists: {},
pinnedStatuses: {},
instanceInfos: {},
statusModifications: {}
statusModifications: {},
inputTextInCompose: {}
})
mixins(PinaforeStore)

7
routes/index.html
View file

@ -4,6 +4,9 @@
<Layout page='home'>
{{#if $isUserLoggedIn}}
{{#if $currentVerifyCredentials}}
<LiteComposeBox verifyCredentials="{{$currentVerifyCredentials}}"/>
{{/if}}
<LazyTimeline timeline='home' />
{{else}}
<NotLoggedInHome/>
@ -15,6 +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 { store } from './_store/store.js'
export default {
@ -22,7 +26,8 @@
components: {
Layout,
LazyTimeline,
NotLoggedInHome
NotLoggedInHome,
LiteComposeBox
}
}
</script>

3
routes/settings/instances/[instanceName].html
View file

@ -62,6 +62,9 @@
:global(.acct-handle) {
grid-area: handle;
}
.acct-display-name {
grid-area: display-name;
}
.theme-chooser {
background: var(--form-bg);
border: 1px solid var(--main-border);

8
routes/settings/instances/add.html
View file

@ -51,7 +51,7 @@
background-color: var(--main-bg);
}
input.new-instance-input {
min-width: 50%;
min-width: 60%;
max-width: 100%;
}
@ -67,12 +67,6 @@
display: block;
margin: 20px 5px;
}
@media (max-width: 767px) {
input.new-instance-input {
max-width: 80%;
}
}
</style>
<script>
import Layout from '../../_components/Layout.html';

1
scss/global.scss
View file

@ -68,6 +68,7 @@ a:hover {
input {
border: 1px solid var(--input-border);
padding: 5px;
box-sizing: border-box;
}
button {

2
templates/2xx.html
View file

@ -11,7 +11,7 @@
<style>
/* auto-generated w/ build-sass.js */
body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#90a8ee;--action-button-fill-color-hover:#a2b6f0;--action-button-fill-color-active:#577ae4;--action-button-fill-color-pressed:#2351dc;--action-button-fill-color-pressed-hover:#3862e0;--action-button-fill-color-pressed-active:#1d44b8;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#c5d1f6;--very-deemphasized-link-color:rgba(65,105,225,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#d2dcf8}
body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.4;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;will-change:transform;position:absolute;top:72px;left:0;right:0;bottom:0}@media (max-width: 767px){.container{top:62px}}main{position:relative;width:602px;max-width:100vw;padding:0;box-sizing:border-box;margin:30px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}*:focus{outline:2px solid var(--focus-outline)}button::-moz-focus-inner{border:0}input:required,input:invalid{box-shadow:none}
body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.4;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;will-change:transform;position:absolute;top:72px;left:0;right:0;bottom:0}@media (max-width: 767px){.container{top:62px}}main{position:relative;width:602px;max-width:100vw;padding:0;box-sizing:border-box;margin:30px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px;box-sizing:border-box}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}*:focus{outline:2px solid var(--focus-outline)}button::-moz-focus-inner{border:0}input:required,input:invalid{box-shadow:none}
body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline,body.theme-gecko.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#737373;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#bfbfbf;--very-deemphasized-link-color:rgba(153,153,153,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#ededed}
</style>