start work on compose box
This commit is contained in:
parent
454fcda954
commit
33b999b37a
11 changed files with 172 additions and 13 deletions
5
package-lock.json
generated
5
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
139
routes/_components/compose/LiteComposeBox.html
Normal 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>
|
||||
|
|
@ -101,4 +101,9 @@ export function instanceComputations (store) {
|
|||
(statusModifications, currentInstance) => {
|
||||
return statusModifications[currentInstance]
|
||||
})
|
||||
|
||||
store.compute('currentInputTextInCompose',
|
||||
['inputTextInCompose', 'currentInstance'],
|
||||
(inputTextInCompose, currentInstance) => (inputTextInCompose[currentInstance] || '')
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ a:hover {
|
|||
input {
|
||||
border: 1px solid var(--input-border);
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue