diff --git a/README.md b/README.md index 2174335aa6..5a3e2a4bec 100644 --- a/README.md +++ b/README.md @@ -29,4 +29,6 @@ npm run build npm run unit ``` -For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). +# Configuration + +Edit config.json for configuration. scopeOptionsEnabled gives you input fields for CWs and the scope settings. diff --git a/src/App.js b/src/App.js index e924896727..a052e058ea 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import UserPanel from './components/user_panel/user_panel.vue' import NavPanel from './components/nav_panel/nav_panel.vue' import Notifications from './components/notifications/notifications.vue' import UserFinder from './components/user_finder/user_finder.vue' +import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue' import ChatPanel from './components/chat_panel/chat_panel.vue' @@ -12,8 +13,9 @@ export default { NavPanel, Notifications, UserFinder, - ChatPanel, - InstanceSpecificPanel + WhoToFollowPanel, + InstanceSpecificPanel, + ChatPanel }, data: () => ({ mobileActivePanel: 'timeline' @@ -27,6 +29,7 @@ export default { style () { return { 'background-image': `url(${this.background})` } }, sitename () { return this.$store.state.config.name }, chat () { return this.$store.state.chat.channel.state === 'joined' }, + showWhoToFollowPanel () { return this.$store.state.config.showWhoToFollowPanel }, showInstanceSpecificPanel () { return this.$store.state.config.showInstanceSpecificPanel } }, methods: { diff --git a/src/App.scss b/src/App.scss index a860122074..f830a33bcb 100644 --- a/src/App.scss +++ b/src/App.scss @@ -88,13 +88,13 @@ label.select { input, textarea, .select { border: none; - border-radius: $fallback--btnRadius; - border-radius: var(--btnRadius, $fallback--btnRadius); + border-radius: $fallback--inputRadius; + border-radius: var(--inputRadius, $fallback--inputRadius); border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-top: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 2px black inset; - background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); + background-color: $fallback--input; + background-color: var(--input, $fallback--input); color: $fallback--lightFg; color: var(--lightFg, $fallback--lightFg); font-family: sans-serif; @@ -154,8 +154,8 @@ input, textarea, .select { border-top: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 2px black inset; margin-right: .5em; - background-color: $fallback--btn; - background-color: var(--btn, $fallback--btn); + background-color: $fallback--input; + background-color: var(--input, $fallback--input); vertical-align: top; text-align: center; line-height: 1.1em; diff --git a/src/App.vue b/src/App.vue index a8d17fa7e9..923d411b1e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -24,6 +24,7 @@ + diff --git a/src/_variables.scss b/src/_variables.scss index d90a1d48e5..b5222a6a63 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -4,7 +4,8 @@ $darkened-background: whitesmoke; $fallback--bg: #121a24; $fallback--btn: #182230; -$fallback--faint: #999; +$fallback--input: #182230; +$fallback--faint: rgba(185, 185, 186, .5); $fallback--fg: #b9b9ba; $fallback--link: #d8a070; $fallback--icon: #666; @@ -21,6 +22,7 @@ $fallback--cAlertRed: rgba(211,16,20,.5); $fallback--panelRadius: 10px; $fallback--checkBoxRadius: 2px; $fallback--btnRadius: 4px; +$fallback--inputRadius: 4px; $fallback--tooltipRadius: 5px; $fallback--avatarRadius: 4px; $fallback--avatarAltRadius: 10px; diff --git a/src/assets/nsfw.png b/src/assets/nsfw.png index bb6556b408..427490334a 100644 Binary files a/src/assets/nsfw.png and b/src/assets/nsfw.png differ diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index b2f6366895..c48fb16b67 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -96,6 +96,9 @@ background: rgba(230,230,230,0.6); font-weight: bold; z-index: 4; + line-height: 1; + border-radius: $fallback--tooltipRadius; + border-radius: var(--tooltipRadius, $fallback--tooltipRadius); } .small { diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 308e5e7dce..bfcd3fe7eb 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -3,7 +3,7 @@
{{ $t('timeline.conversation') }} - Collapse + {{ $t('timeline.collapse') }}
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 6f949afb63..2e1a6c7a1f 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -45,8 +45,6 @@ border-bottom: 1px solid; border-color: $fallback--border; border-color: var(--border, $fallback--border); - background-color: $fallback--bg; - background-color: var(--bg, $fallback--bg); padding: 0; &:first-child a { diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 9cbb1226e1..008530b43c 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -98,7 +98,7 @@ .status { padding: 0.25em 0; color: $fallback--faint; - color: var($fallback--faint, --faint); + color: var(--faint, $fallback--faint); } padding: 0; .media-body { diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 6bcf1c66fb..0597d65255 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -48,12 +48,21 @@ const PostStatusForm = { highlighted: 0, newStatus: { status: statusText, - files: [] + files: [], + visibility: 'public' }, caret: 0 } }, computed: { + vis () { + return { + public: { selected: this.newStatus.visibility === 'public' }, + unlisted: { selected: this.newStatus.visibility === 'unlisted' }, + private: { selected: this.newStatus.visibility === 'private' }, + direct: { selected: this.newStatus.visibility === 'direct' } + } + }, candidates () { const firstchar = this.textAtCaret.charAt(0) if (firstchar === '@') { @@ -118,6 +127,9 @@ const PostStatusForm = { }, isOverLengthLimit () { return this.hasStatusLengthLimit && (this.statusLength > this.statusLengthLimit) + }, + scopeOptionsEnabled () { + return this.$store.state.config.scopeOptionsEnabled } }, methods: { @@ -185,6 +197,8 @@ const PostStatusForm = { this.posting = true statusPoster.postStatus({ status: newStatus.status, + spoilerText: newStatus.spoilerText || null, + visibility: newStatus.visibility, media: newStatus.files, store: this.$store, inReplyToStatusId: this.replyTo @@ -192,7 +206,8 @@ const PostStatusForm = { if (!data.error) { this.newStatus = { status: '', - files: [] + files: [], + visibility: newStatus.visibility } this.$emit('posted') let el = this.$el.querySelector('textarea') @@ -239,18 +254,20 @@ const PostStatusForm = { e.dataTransfer.dropEffect = 'copy' }, resize (e) { - const target = e.target || e - target.style.height = 'auto' - const heightPx = target.scrollHeight - 10 - if (heightPx > 54) { - target.style.height = `${target.scrollHeight - 10}px` - } - if (target.value === '') { - target.style.height = '16px' + if (!e.target) { return } + const vertPadding = Number(window.getComputedStyle(e.target)['padding-top'].substr(0, 1)) + + Number(window.getComputedStyle(e.target)['padding-bottom'].substr(0, 1)) + e.target.style.height = 'auto' + e.target.style.height = `${e.target.scrollHeight - vertPadding}px` + if (e.target.value === '') { + e.target.style.height = '16px' } }, clearError () { this.error = null + }, + changeVis (visibility) { + this.newStatus.visibility = visibility } } } diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 88627e3ae6..802d51ed87 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -2,6 +2,12 @@
+ +
+ + + + +
-
- - {{candidate.utf}} - {{candidate.screen_name}}{{candidate.name}} -
-
+
{{candidate.utf}} {{candidate.screen_name}}{{candidate.name}} @@ -84,6 +91,17 @@ } } +.post-status-form .visibility-tray { + font-size: 1.2em; + padding: 3px; + cursor: pointer; + + .selected { + color: $fallback--lightFg; + color: var(--lightFg, $fallback--lightFg); + } +} + .post-status-form, .login { .form-bottom { display: flex; @@ -135,10 +153,6 @@ cursor: not-allowed; } - .icon-cancel { - cursor: pointer; - } - form { display: flex; flex-direction: column; @@ -152,7 +166,15 @@ line-height:24px; } - form textarea { + form textarea.form-cw { + line-height:16px; + resize: none; + overflow: hidden; + transition: min-height 200ms 100ms; + min-height: 1px; + } + + form textarea.form-control { line-height:16px; resize: none; overflow: hidden; @@ -161,7 +183,7 @@ box-sizing: content-box; } - form textarea:focus { + form textarea.form-control:focus { min-height: 48px; } @@ -186,8 +208,8 @@ z-index: 1; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); min-width: 75%; - background: $fallback--btn; - background: var(--btn, $fallback--btn); + background: $fallback--bg; + background: var(--bg, $fallback--bg); color: $fallback--lightFg; color: var(--lightFg, $fallback--lightFg); } @@ -216,6 +238,11 @@ color: $fallback--faint; color: var(--faint, $fallback--faint); } + + &.highlighted { + background-color: $fallback--btn; + background-color: var(--btn, $fallback--btn); + } } } diff --git a/src/components/status/status.js b/src/components/status/status.js index 73f4a7aa7d..87ef90d884 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -104,6 +104,18 @@ const Status = { StillImage }, methods: { + visibilityIcon (visibility) { + switch (visibility) { + case 'private': + return 'icon-lock' + case 'unlisted': + return 'icon-lock-open-alt' + case 'direct': + return 'icon-mail-alt' + default: + return 'icon-globe' + } + }, linkClicked ({target}) { if (target.tagName === 'SPAN') { target = target.parentNode diff --git a/src/components/status/status.vue b/src/components/status/status.vue index f1163fd9b9..ace141cd9d 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -55,6 +55,7 @@ +