From 85a10ba693d882009a04776f4614a8b80fa89e11 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 24 Jul 2017 18:49:51 -0300 Subject: [PATCH 1/5] Touch events for mobile :) --- .../client/components/Tag.css | 9 ++++++++ .../client/components/Tag.js | 23 +++++++++++++++++-- .../client/utils/index.js | 5 ++++ 3 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 plugins/talk-plugin-featured-comments/client/utils/index.js diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.css b/plugins/talk-plugin-featured-comments/client/components/Tag.css index 88a019b5d..7ade3d968 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tag.css +++ b/plugins/talk-plugin-featured-comments/client/components/Tag.css @@ -24,6 +24,15 @@ cursor: pointer; } +.noSelect { + -ms-user-select:none; + -moz-user-select: none; + -webkit-user-select: none; + -webkit-touch-callout:none; + user-select: none; + -webkit-tap-highlight-color:rgba(0,0,0,0); +} + .tooltip { top: 36px; left: auto; diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.js b/plugins/talk-plugin-featured-comments/client/components/Tag.js index b7ee8cd6b..129e07851 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tag.js +++ b/plugins/talk-plugin-featured-comments/client/components/Tag.js @@ -4,6 +4,7 @@ import styles from './Tag.css'; import Tooltip from './Tooltip'; import {t} from 'plugin-api/beta/client/services'; import {isTagged} from 'plugin-api/beta/client/utils'; +import bowser from 'bowser'; export default class Tag extends React.Component { constructor() { @@ -15,6 +16,20 @@ export default class Tag extends React.Component { } + componentDidMount() { + if (bowser.mobile) { + this.tagEl.addEventListener('touchstart', this.showTooltip); + this.tagEl.addEventListener('touchend', this.hideTooltip); + } + } + + componentWillUnmount() { + if (bowser.mobile) { + this.tagEl.removeEventListener('touchstart', this.showTooltip); + this.tagEl.removeEventListener('touchend', this.hideTooltip); + } + } + showTooltip = () => { this.setState({ tooltip: true @@ -30,10 +45,14 @@ export default class Tag extends React.Component { render() { const {tooltip} = this.state; return( -
+
this.tagEl = ref} + onMouseEnter={this.showTooltip} + onMouseLeave={this.hideTooltip} + className={styles.noSelect }> { isTagged(this.props.comment.tags, 'FEATURED') ? ( - + {t('talk-plugin-featured-comments.featured')} ) : null diff --git a/plugins/talk-plugin-featured-comments/client/utils/index.js b/plugins/talk-plugin-featured-comments/client/utils/index.js new file mode 100644 index 000000000..7d7d80969 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/utils/index.js @@ -0,0 +1,5 @@ +export const isTouchDevice = () => { + return (('ontouchstart' in window) + || (navigator.MaxTouchPoints > 0) + || (navigator.msMaxTouchPoints > 0)); +}; From 48dadd857126becb5e9148767a3b0aafba9c7c0e Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 25 Jul 2017 14:00:30 -0300 Subject: [PATCH 2/5] Viewing Options for mobile --- .../src/components/Stream.css | 4 ++-- client/coral-ui/components/Tab.css | 10 ++++++++ .../client/components/ViewingOptions.css | 24 +++++++++++++++++++ .../client/components/ViewingOptions.js | 7 ++++-- .../client/index.js | 4 +++- .../client/translations.yml | 4 ++++ 6 files changed, 48 insertions(+), 5 deletions(-) create mode 100644 plugins/coral-plugin-viewing-options/client/translations.yml diff --git a/client/coral-embed-stream/src/components/Stream.css b/client/coral-embed-stream/src/components/Stream.css index 8c5a4250b..23f620157 100644 --- a/client/coral-embed-stream/src/components/Stream.css +++ b/client/coral-embed-stream/src/components/Stream.css @@ -14,7 +14,7 @@ .filterWrapper { position: absolute; right: 0; - margin-top: 6px; + margin-top: 4px; } .highlightedContainer { @@ -26,4 +26,4 @@ margin-top: 28px; padding-bottom: 50px; min-height: 600px; -} +} \ No newline at end of file diff --git a/client/coral-ui/components/Tab.css b/client/coral-ui/components/Tab.css index b3c026b3d..fc38d192d 100644 --- a/client/coral-ui/components/Tab.css +++ b/client/coral-ui/components/Tab.css @@ -68,3 +68,13 @@ pointer-events: none; } + +@custom-media --small-viewport (max-width: 320px); + +@media (--small-viewport) { + .buttonSub, .buttonSubActive, .buttonSubActive:hover, .buttonSubActive:focus { + font-size: 0.96em; + padding-right: 5px; + padding-right: 5px; + } +} diff --git a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css index 81d373b95..607ddc303 100644 --- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css +++ b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css @@ -29,3 +29,27 @@ font-size: 14px; vertical-align: middle; } + + +@custom-media --small-viewport (max-width: 425px); + +.filterText { + display: inline-block; +} + +.filterIcon { + vertical-align: middle; + display: none; +} + +@media (--small-viewport) { + .filterText { + display: none; + } + .filterIcon { + display: inline-block; + } +} + + + diff --git a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js index 87680b370..13b3094a1 100644 --- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js +++ b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js @@ -1,8 +1,9 @@ import React from 'react'; import cn from 'classnames'; import styles from './ViewingOptions.css'; -import {Slot, ClickOutside} from 'plugin-api/beta/client/components'; +import {t} from 'plugin-api/beta/client/services'; import {Icon} from 'plugin-api/beta/client/components/ui'; +import {Slot, ClickOutside} from 'plugin-api/beta/client/components'; const ViewingOptions = (props) => { const toggleOpen = () => { @@ -23,7 +24,9 @@ const ViewingOptions = (props) => {
-
diff --git a/plugins/coral-plugin-viewing-options/client/index.js b/plugins/coral-plugin-viewing-options/client/index.js index 4e9001c1b..464a38d7d 100644 --- a/plugins/coral-plugin-viewing-options/client/index.js +++ b/plugins/coral-plugin-viewing-options/client/index.js @@ -1,9 +1,11 @@ import ViewingOptions from './containers/ViewingOptions'; import reducer from './reducer'; +import translations from './translations.yml'; export default { reducer, slots: { streamFilter: [ViewingOptions] - } + }, + translations }; diff --git a/plugins/coral-plugin-viewing-options/client/translations.yml b/plugins/coral-plugin-viewing-options/client/translations.yml new file mode 100644 index 000000000..6ab31fa1b --- /dev/null +++ b/plugins/coral-plugin-viewing-options/client/translations.yml @@ -0,0 +1,4 @@ +en: + viewing_options: "Viewing Options" +es: + viewing_options: "Opciones de visualización" \ No newline at end of file From 9aa5c1ec463aa3f16519fe718fd37f5e195eaaa6 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 25 Jul 2017 14:04:13 -0300 Subject: [PATCH 3/5] Viewing Options for mobile --- .../client/components/ViewingOptions.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css index 607ddc303..c51d87f11 100644 --- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css +++ b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css @@ -5,6 +5,10 @@ composes: buttonReset from "coral-framework/styles/reset.css"; } +.button:hover { + cursor: pointer; +} + .list { background: white; position: absolute; From 17e6064b9ea790bd8d8a99fdbcf230ea28bca2de Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 25 Jul 2017 14:15:52 -0300 Subject: [PATCH 4/5] Adding react touch events --- .../client/components/Tag.js | 28 +++++-------------- 1 file changed, 7 insertions(+), 21 deletions(-) diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.js b/plugins/talk-plugin-featured-comments/client/components/Tag.js index 129e07851..ee2d13b19 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tag.js +++ b/plugins/talk-plugin-featured-comments/client/components/Tag.js @@ -4,7 +4,6 @@ import styles from './Tag.css'; import Tooltip from './Tooltip'; import {t} from 'plugin-api/beta/client/services'; import {isTagged} from 'plugin-api/beta/client/utils'; -import bowser from 'bowser'; export default class Tag extends React.Component { constructor() { @@ -16,27 +15,15 @@ export default class Tag extends React.Component { } - componentDidMount() { - if (bowser.mobile) { - this.tagEl.addEventListener('touchstart', this.showTooltip); - this.tagEl.addEventListener('touchend', this.hideTooltip); - } - } - - componentWillUnmount() { - if (bowser.mobile) { - this.tagEl.removeEventListener('touchstart', this.showTooltip); - this.tagEl.removeEventListener('touchend', this.hideTooltip); - } - } - - showTooltip = () => { + showTooltip = e => { + e.preventDefault(); this.setState({ tooltip: true }); } - hideTooltip = () => { + hideTooltip = (e) => { + e.preventDefault(); this.setState({ tooltip: false }); @@ -45,10 +32,9 @@ export default class Tag extends React.Component { render() { const {tooltip} = this.state; return( -
this.tagEl = ref} - onMouseEnter={this.showTooltip} - onMouseLeave={this.hideTooltip} - className={styles.noSelect }> +
{ isTagged(this.props.comment.tags, 'FEATURED') ? ( Date: Tue, 25 Jul 2017 14:18:40 -0300 Subject: [PATCH 5/5] deleting unused utils --- plugins/talk-plugin-featured-comments/client/utils/index.js | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 plugins/talk-plugin-featured-comments/client/utils/index.js diff --git a/plugins/talk-plugin-featured-comments/client/utils/index.js b/plugins/talk-plugin-featured-comments/client/utils/index.js deleted file mode 100644 index 7d7d80969..000000000 --- a/plugins/talk-plugin-featured-comments/client/utils/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export const isTouchDevice = () => { - return (('ontouchstart' in window) - || (navigator.MaxTouchPoints > 0) - || (navigator.msMaxTouchPoints > 0)); -};