From 1d3b1ac934e5dacb05d227ddc1ab0cbd8e16e169 Mon Sep 17 00:00:00 2001 From: shpuld Date: Sat, 2 Mar 2019 16:57:32 +0200 Subject: start working on one tap notifications --- src/App.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'src/App.js') diff --git a/src/App.js b/src/App.js index 214e0f48..5e5b6eea 100644 --- a/src/App.js +++ b/src/App.js @@ -26,6 +26,7 @@ export default { }, data: () => ({ mobileActivePanel: 'timeline', + notificationsOpen: false, finderHidden: true, supportsMask: window.CSS && window.CSS.supports && ( window.CSS.supports('mask-size', 'contain') || @@ -101,6 +102,9 @@ export default { }, toggleMobileSidebar () { this.$refs.sideDrawer.toggleDrawer() + }, + toggleMobileNotifications () { + this.notificationsOpen = !this.notificationsOpen } } } -- cgit v1.2.3-70-g09d2 From c7e180080afd0e255e439030df800f79d33ff5de Mon Sep 17 00:00:00 2001 From: shpuld Date: Sun, 3 Mar 2019 16:33:40 +0200 Subject: more work with notifications drawer --- src/App.js | 14 +++++++++++++- src/App.scss | 2 +- src/App.vue | 10 ++++++---- src/boot/after_store.js | 3 +++ src/modules/interface.js | 10 +++++++++- 5 files changed, 32 insertions(+), 7 deletions(-) (limited to 'src/App.js') diff --git a/src/App.js b/src/App.js index 5e5b6eea..b6234a08 100644 --- a/src/App.js +++ b/src/App.js @@ -39,6 +39,10 @@ export default { created () { // Load the locale from the storage this.$i18n.locale = this.$store.state.config.interfaceLanguage + window.addEventListener('resize', this.updateMobileState) + }, + destroyed () { + window.removeEventListener('resize', this.updateMobileState) }, computed: { currentUser () { return this.$store.state.users.currentUser }, @@ -87,7 +91,8 @@ export default { unseenNotificationsCount () { return this.unseenNotifications.length }, - showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel } + showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, + isMobileLayout () { return this.$store.state.interface.mobileLayout } }, methods: { scrollToTop () { @@ -105,6 +110,13 @@ export default { }, toggleMobileNotifications () { this.notificationsOpen = !this.notificationsOpen + }, + updateMobileState () { + const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth + const changed = width <= 800 !== this.isMobileLayout + if (changed) { + this.$store.dispatch('setMobileLayout', width <= 800) + } } } } diff --git a/src/App.scss b/src/App.scss index 3edc41a0..775bc1c8 100644 --- a/src/App.scss +++ b/src/App.scss @@ -667,7 +667,7 @@ nav { height: 100vh; top: 50px; left: 0; - z-index: 1001; + z-index: 9; overflow-x: hidden; overflow-y: scroll; transition-property: transform; diff --git a/src/App.vue b/src/App.vue index aad84804..d83d5dbe 100644 --- a/src/App.vue +++ b/src/App.vue @@ -25,11 +25,13 @@
- -
- +
+ +
+ +
-
+
diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 53ecc083..ad72ce04 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -5,6 +5,9 @@ import routes from './routes' import App from '../App.vue' const afterStoreSetup = ({ store, i18n }) => { + const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth + store.dispatch('setMobileLayout', width <= 800) + window.fetch('/api/statusnet/config.json') .then((res) => res.json()) .then((data) => { diff --git a/src/modules/interface.js b/src/modules/interface.js index 956c9cb3..71554787 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -11,7 +11,8 @@ const defaultState = { window.CSS.supports('filter', 'drop-shadow(0 0)') || window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)') ) - } + }, + mobileLayout: false } const interfaceMod = { @@ -31,6 +32,9 @@ const interfaceMod = { }, setNotificationPermission (state, permission) { state.notificationPermission = permission + }, + setMobileLayout (state, value) { + state.mobileLayout = value } }, actions: { @@ -42,6 +46,10 @@ const interfaceMod = { }, setNotificationPermission ({ commit }, permission) { commit('setNotificationPermission', permission) + }, + setMobileLayout ({ commit }, value) { + console.log('setMobileLayout called') + commit('setMobileLayout', value) } } } -- cgit v1.2.3-70-g09d2 From 2879495b8ab16a07d337965871e951f660fc1815 Mon Sep 17 00:00:00 2001 From: shpuld Date: Mon, 1 Apr 2019 22:41:34 +0300 Subject: remove window width copypasta --- src/App.js | 7 ++++--- src/boot/after_store.js | 4 ++-- src/services/window_utils/window_utils.js | 5 +++++ 3 files changed, 11 insertions(+), 5 deletions(-) create mode 100644 src/services/window_utils/window_utils.js (limited to 'src/App.js') diff --git a/src/App.js b/src/App.js index 96954e72..46145b16 100644 --- a/src/App.js +++ b/src/App.js @@ -10,6 +10,7 @@ import MediaModal from './components/media_modal/media_modal.vue' import SideDrawer from './components/side_drawer/side_drawer.vue' import MobilePostStatusModal from './components/mobile_post_status_modal/mobile_post_status_modal.vue' import MobileNav from './components/mobile_nav/mobile_nav.vue' +import { windowWidth } from './services/window_utils/window_utils' export default { name: 'app', @@ -102,10 +103,10 @@ export default { this.finderHidden = hidden }, updateMobileState () { - const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth - const changed = width <= 800 !== this.isMobileLayout + const mobileLayout = windowWidth() <= 800 + const changed = mobileLayout !== this.isMobileLayout if (changed) { - this.$store.dispatch('setMobileLayout', width <= 800) + this.$store.dispatch('setMobileLayout', mobileLayout) } } } diff --git a/src/boot/after_store.js b/src/boot/after_store.js index f86a65e3..e03b7f27 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -1,8 +1,8 @@ import Vue from 'vue' import VueRouter from 'vue-router' import routes from './routes' - import App from '../App.vue' +import { windowWidth } from '../services/window_utils/window_utils' const getStatusnetConfig = async ({ store }) => { try { @@ -230,7 +230,7 @@ const afterStoreSetup = async ({ store, i18n }) => { }) } - const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth + const width = windowWidth() store.dispatch('setMobileLayout', width <= 800) const apiConfig = await getStatusnetConfig({ store }) diff --git a/src/services/window_utils/window_utils.js b/src/services/window_utils/window_utils.js new file mode 100644 index 00000000..faff6cb9 --- /dev/null +++ b/src/services/window_utils/window_utils.js @@ -0,0 +1,5 @@ + +export const windowWidth = () => + window.innerWidth || + document.documentElement.clientWidth || + document.body.clientWidth -- cgit v1.2.3-70-g09d2 From 2cda9010df6192b008515b2138a2e071473bc40b Mon Sep 17 00:00:00 2001 From: taehoon Date: Tue, 19 Mar 2019 04:53:11 -0400 Subject: add user reporting modal --- src/App.js | 4 +- src/App.vue | 1 + src/components/checkbox/checkbox.js | 44 ++++++++ src/components/checkbox/checkbox.scss | 48 +++++++++ src/components/user_card/user_card.js | 3 + src/components/user_card/user_card.vue | 10 +- .../user_reporting_modal/user_reporting_modal.js | 81 +++++++++++++++ .../user_reporting_modal/user_reporting_modal.vue | 111 +++++++++++++++++++++ src/i18n/en.json | 1 + src/main.js | 4 +- src/modules/reports.js | 33 ++++++ 11 files changed, 336 insertions(+), 4 deletions(-) create mode 100644 src/components/checkbox/checkbox.js create mode 100644 src/components/checkbox/checkbox.scss create mode 100644 src/components/user_reporting_modal/user_reporting_modal.js create mode 100644 src/components/user_reporting_modal/user_reporting_modal.vue create mode 100644 src/modules/reports.js (limited to 'src/App.js') diff --git a/src/App.js b/src/App.js index 46145b16..e72c73e3 100644 --- a/src/App.js +++ b/src/App.js @@ -10,6 +10,7 @@ import MediaModal from './components/media_modal/media_modal.vue' import SideDrawer from './components/side_drawer/side_drawer.vue' import MobilePostStatusModal from './components/mobile_post_status_modal/mobile_post_status_modal.vue' import MobileNav from './components/mobile_nav/mobile_nav.vue' +import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue' import { windowWidth } from './services/window_utils/window_utils' export default { @@ -26,7 +27,8 @@ export default { MediaModal, SideDrawer, MobilePostStatusModal, - MobileNav + MobileNav, + UserReportingModal }, data: () => ({ mobileActivePanel: 'timeline', diff --git a/src/App.vue b/src/App.vue index 3b8623ad..cb7e8d78 100644 --- a/src/App.vue +++ b/src/App.vue @@ -46,6 +46,7 @@
+
diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js new file mode 100644 index 00000000..324a7597 --- /dev/null +++ b/src/components/checkbox/checkbox.js @@ -0,0 +1,44 @@ +// TODO: Template-based functional component is supported in vue-loader 13.3.0+. +// Also, somehow, props are not provided through 'context' even though they are defined. +// Need to upgrade vue-loader + +import './checkbox.scss' + +export default { + functional: true, + name: 'Checkbox', + model: { + prop: 'checked', + event: 'change' + }, + render (createElement, { data, children }) { + const { props = {}, attrs = {}, on = {}, ...rest } = data + const { name, checked, disabled, readonly, ...restAttrs } = attrs + const { change, ...restListeners } = on + const wrapperProps = { + attrs: restAttrs, + on: restListeners, + ...rest + } + const inputProps = { + attrs: { + name, + checked, + disabled, + readonly, + ...props + }, + on: {} + } + if (change) { + inputProps.on.change = e => change(e.target.checked) + } + return ( + + ) + } +} diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss new file mode 100644 index 00000000..07b3f39e --- /dev/null +++ b/src/components/checkbox/checkbox.scss @@ -0,0 +1,48 @@ +@import '../../_variables.scss'; + +.checkbox { + position: relative; + display: inline-block; + padding-left: 1.2em; + + input[type=checkbox] { + display: none; + + & + i::before { + position: absolute; + left: 0; + top: 0; + display: block; + content: '✔'; + transition: color 200ms; + width: 1.1em; + height: 1.1em; + border-radius: $fallback--checkboxRadius; + border-radius: var(--checkboxRadius, $fallback--checkboxRadius); + box-shadow: 0px 0px 2px black inset; + box-shadow: var(--inputShadow); + background-color: $fallback--fg; + background-color: var(--input, $fallback--fg); + vertical-align: top; + text-align: center; + line-height: 1.1em; + font-size: 1.1em; + color: transparent; + overflow: hidden; + box-sizing: border-box; + } + + &:checked + i::before { + color: $fallback--text; + color: var(--text, $fallback--text); + } + + &:disabled + i::before { + opacity: .5; + } + } + + & > span { + margin-left: .5em; + } +} \ No newline at end of file diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index 1a100de3..7c6ffa89 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -151,6 +151,9 @@ export default { }, userProfileLink (user) { return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames) + }, + reportUser () { + this.$store.dispatch('openUserReportingModal', this.user.id) } } } diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index e62b384d..2d02ca03 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -99,8 +99,14 @@
- - +
+ + + +
+
diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js new file mode 100644 index 00000000..fb9ea16d --- /dev/null +++ b/src/components/user_reporting_modal/user_reporting_modal.js @@ -0,0 +1,81 @@ + +import Status from '../status/status.vue' +import Checkbox from '../checkbox/checkbox.js' + +const UserReportingModal = { + components: { + Status, + Checkbox + }, + data () { + return { + comment: '', + forward: false, + statusIdsToReport: [] + } + }, + computed: { + isLoggedIn () { + return !!this.$store.state.users.currentUser + }, + isOpen () { + return this.isLoggedIn && this.$store.state.reports.modalActivated + }, + userId () { + return this.$store.state.reports.userId + }, + user () { + return this.$store.getters.findUser(this.userId) + }, + remoteInstance () { + return !this.user.is_local && this.user.screen_name.substr(this.user.screen_name.indexOf('@') + 1) + }, + statuses () { + return this.$store.state.reports.statuses + } + }, + watch: { + userId (value) { + this.statusIdsToReport = [] + } + }, + methods: { + closeModal () { + this.$store.dispatch('closeUserReportingModal') + }, + reportUser () { + const payload = { + comment: this.comment, + forward: this.forward, + statusIdsToReport: this.statusIdsToReport + } + this.$store.dispatch('reportUser', payload) + }, + isChecked (statusId) { + return this.statusIdsToReport.indexOf(statusId) !== -1 + }, + toggleStatus (checked, statusId) { + if (checked === this.isChecked(statusId)) { + return + } + + if (checked) { + this.statusIdsToReport.push(statusId) + } else { + this.statusIdsToReport.splice(this.statusIdsToReport.indexOf(statusId), 1) + } + }, + resize (e) { + const target = e.target || e + if (!(target instanceof window.Element)) { return } + // Auto is needed to make textbox shrink when removing lines + target.style.height = 'auto' + target.style.height = `${target.scrollHeight}px` + if (target.value === '') { + target.style.height = null + } + } + } +} + +export default UserReportingModal diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue new file mode 100644 index 00000000..49839da3 --- /dev/null +++ b/src/components/user_reporting_modal/user_reporting_modal.vue @@ -0,0 +1,111 @@ +