diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/instance_specific_panel/instance_specific_panel.js | 9 | ||||
| -rw-r--r-- | src/components/instance_specific_panel/instance_specific_panel.vue | 15 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.js | 15 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 11 | ||||
| -rw-r--r-- | src/components/status/status.vue | 2 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 79 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 4 | ||||
| -rw-r--r-- | src/components/user_settings/user_settings.vue | 2 |
8 files changed, 107 insertions, 30 deletions
diff --git a/src/components/instance_specific_panel/instance_specific_panel.js b/src/components/instance_specific_panel/instance_specific_panel.js new file mode 100644 index 00000000..abd408c8 --- /dev/null +++ b/src/components/instance_specific_panel/instance_specific_panel.js @@ -0,0 +1,9 @@ +const InstanceSpecificPanel = { + computed: { + instanceSpecificPanelContent () { + return this.$store.state.config.instanceSpecificPanelContent + } + } +} + +export default InstanceSpecificPanel diff --git a/src/components/instance_specific_panel/instance_specific_panel.vue b/src/components/instance_specific_panel/instance_specific_panel.vue new file mode 100644 index 00000000..b3ea019d --- /dev/null +++ b/src/components/instance_specific_panel/instance_specific_panel.vue @@ -0,0 +1,15 @@ +<template> + <div class="instance-specific-panel"> + <div class="panel panel-default base01-background"> + <div class="panel-body"> + <div v-html="instanceSpecificPanelContent"> + </div> + </div> + </div> + </div> +</template> + +<script src="./instance_specific_panel.js" ></script> + +<style lang="scss"> +</style> diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index d4290c85..999aa732 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -98,6 +98,21 @@ const PostStatusForm = { }, customEmoji () { return this.$store.state.config.customEmoji || [] + }, + statusLength () { + return this.newStatus.status.length + }, + statusLengthLimit () { + return this.$store.state.config.textlimit + }, + hasStatusLengthLimit () { + return this.statusLengthLimit > 0 + }, + charactersLeft () { + return this.statusLengthLimit - this.statusLength + }, + isOverLengthLimit () { + return this.hasStatusLengthLimit && (this.statusLength > this.statusLengthLimit) } }, methods: { diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 4a6a574a..4871bcae 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -22,7 +22,12 @@ </div> <div class='form-bottom'> <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload> + + <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p> + <p v-else-if="hasStatusLengthLimit" class="base04">{{ charactersLeft }}</p> + <button v-if="posting" disabled class="btn btn-default base05 base02-background">{{$t('post_status.posting')}}</button> + <button v-else-if="isOverLengthLimit" disabled class="btn btn-default base05 base02-background">{{$t('general.submit')}}</button> <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default base05 base02-background">{{$t('general.submit')}}</button> </div> <div class='error' v-if="error"> @@ -71,6 +76,12 @@ button { width: 10em; } + + p { + margin: 0.35em; + padding: 0.35em; + display: flex; + } } .error { border-radius: 5px; diff --git a/src/components/status/status.vue b/src/components/status/status.vue index f6afaa25..28272b0b 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -100,7 +100,7 @@ <div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div> <div v-if='status.attachments' class='attachments'> - <attachment v-if="!hideAttachments" :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments"> + <attachment v-if="!hideAttachments" :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments" :key="attachment.id"> </attachment> </div> </div> diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index f92f7299..31bf546d 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -7,20 +7,24 @@ <p>{{$t('settings.theme_help')}}</p> <div class="color-container"> <div class="color-item"> - <label for="bgcolor" class="base04">{{$t('settings.background')}}</label> - <input id="bgcolor" class="theme-color-in" type="text" v-model="bgColorLocal"> + <label for="bgcolor" class="base04 theme-color-lb">{{$t('settings.background')}}</label> + <input id="bgcolor" class="theme-color-cl" type="color" v-model="bgColorLocal"> + <input id="bgcolor-t" class="theme-color-in" type="text" v-model="bgColorLocal"> </div> <div class="color-item"> - <label for="fgcolor" class="base04">{{$t('settings.foreground')}}</label> - <input id="fgcolor" class="theme-color-in" type="text" v-model="fgColorLocal"> + <label for="fgcolor" class="base04 theme-color-lb">{{$t('settings.foreground')}}</label> + <input id="fgcolor" class="theme-color-cl" type="color" v-model="fgColorLocal"> + <input id="fgcolor-t" class="theme-color-in" type="text" v-model="fgColorLocal"> </div> <div class="color-item"> - <label for="textcolor" class="base04">{{$t('settings.text')}}</label> - <input id="textcolor" class="theme-color-in" type="text" v-model="textColorLocal"> + <label for="textcolor" class="base04 theme-color-lb">{{$t('settings.text')}}</label> + <input id="textcolor" class="theme-color-cl" type="color" v-model="textColorLocal"> + <input id="textcolor-t" class="theme-color-in" type="text" v-model="textColorLocal"> </div> <div class="color-item"> - <label for="linkcolor" class="base04">{{$t('settings.links')}}</label> - <input id="linkcolor" class="theme-color-in" type="text" v-model="linkColorLocal"> + <label for="linkcolor" class="base04 theme-color-lb">{{$t('settings.links')}}</label> + <input id="linkcolor" class="theme-color-cl" type="color" v-model="linkColorLocal"> + <input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal"> </div> </div> <div> @@ -43,27 +47,50 @@ <script src="./style_switcher.js"></script> <style lang="scss"> - .style-switcher { - margin-right: 1em; - } +.style-switcher { + margin-right: 1em; +} - .color-container { - display: flex; - flex-wrap: wrap; - } +.color-container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} - .color-item { - max-width: 9em; - display:flex; - flex-wrap:wrap; - } +.color-item { + min-width: 20em; + display:flex; + flex: 1 1 0; + align-items: baseline; + margin: 5px 6px 5px 0; +} +.theme-color-cl, +.theme-color-in { + margin-left: 4px; + border-radius: 2px; + border: 0; +} + +.theme-color-in { + padding: 5px; + min-width: 4em; + max-width: 7em; + flex: 1; +} +.theme-color-lb { + flex: 2; + min-width: 7em; + max-width: 10em; +} - .theme-color-in { - max-width: 8em; - border-radius: 2px; - border: 0; - padding: 5px; - margin: 5px 0 5px 0; +.theme-color-cl { + padding: 1px; + max-width: 8em; + align-self: stretch; + height: 100%; + flex: 0; + min-width: 2em; + cursor: pointer; } .theme-preview-content { diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 9d2e1ea1..d6ecfd2f 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -32,7 +32,7 @@ </div> <div class="panel-body base01-background"> <div class="timeline"> - <user-card v-for="follower in followers" :user="follower" :showFollows="false"></user-card> + <user-card v-for="follower in followers" :key="follower.id" :user="follower" :showFollows="false"></user-card> </div> </div> </div> @@ -44,7 +44,7 @@ </div> <div class="panel-body base01-background"> <div class="timeline"> - <user-card v-for="friend in friends" :user="friend" :showFollows="true"></user-card> + <user-card v-for="friend in friends" :key="friend.id" :user="friend" :showFollows="true"></user-card> </div> </div> </div> diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index da78cdc2..1ef52bbf 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -7,7 +7,7 @@ <div class="setting-item"> <h3>{{$t('settings.name_bio')}}</h3> <p>{{$t('settings.name')}}</p> - <input class='name-changer base03-border' id='username' v-model="newname" :value="user.screen_name"></input> + <input class='name-changer base03-border' id='username' v-model="newname"></input> <p>{{$t('settings.bio')}}</p> <textarea class="bio base03-border" v-model="newbio"></textarea> <button :disabled='newname.length <= 0' class="btn btn-default base05 base02-background" @click="updateProfile">{{$t('general.submit')}}</button> |