diff options
Diffstat (limited to 'src/components/services')
-rw-r--r-- | src/components/services/content/ServiceDisabled.js | 2 | ||||
-rw-r--r-- | src/components/services/content/ServiceWebview.js | 35 | ||||
-rw-r--r-- | src/components/services/content/WebviewCrashHandler.js | 2 | ||||
-rw-r--r-- | src/components/services/tabs/TabBarSortableList.js | 6 | ||||
-rw-r--r-- | src/components/services/tabs/TabItem.js | 37 | ||||
-rw-r--r-- | src/components/services/tabs/Tabbar.js | 9 |
6 files changed, 60 insertions, 31 deletions
diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.js index 732b6c003..b5af3743d 100644 --- a/src/components/services/content/ServiceDisabled.js +++ b/src/components/services/content/ServiceDisabled.js | |||
@@ -35,7 +35,7 @@ export default class ServiceDisabled extends Component { | |||
35 | const { intl } = this.context; | 35 | const { intl } = this.context; |
36 | 36 | ||
37 | return ( | 37 | return ( |
38 | <div className="services__crash-handler"> | 38 | <div className="services__info-layer"> |
39 | <h1>{intl.formatMessage(messages.headline, { name })}</h1> | 39 | <h1>{intl.formatMessage(messages.headline, { name })}</h1> |
40 | <Button | 40 | <Button |
41 | label={intl.formatMessage(messages.action, { name })} | 41 | label={intl.formatMessage(messages.action, { name })} |
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js index abbf21dee..c146abf4e 100644 --- a/src/components/services/content/ServiceWebview.js +++ b/src/components/services/content/ServiceWebview.js | |||
@@ -65,6 +65,7 @@ export default class ServiceWebview extends Component { | |||
65 | 65 | ||
66 | const webviewClasses = classnames({ | 66 | const webviewClasses = classnames({ |
67 | services__webview: true, | 67 | services__webview: true, |
68 | 'services__webview-wrapper': true, | ||
68 | 'is-active': service.isActive, | 69 | 'is-active': service.isActive, |
69 | 'services__webview--force-repaint': this.state.forceRepaint, | 70 | 'services__webview--force-repaint': this.state.forceRepaint, |
70 | }); | 71 | }); |
@@ -85,29 +86,29 @@ export default class ServiceWebview extends Component { | |||
85 | reload={reload} | 86 | reload={reload} |
86 | /> | 87 | /> |
87 | )} | 88 | )} |
88 | {!service.isEnabled && ( | 89 | {!service.isEnabled ? ( |
89 | <ServiceDisabled | 90 | <ServiceDisabled |
90 | name={service.recipe.name} | 91 | name={service.recipe.name} |
91 | webview={service.webview} | 92 | webview={service.webview} |
92 | enable={enable} | 93 | enable={enable} |
93 | /> | 94 | /> |
95 | ) : ( | ||
96 | <Webview | ||
97 | ref={(element) => { this.webview = element; }} | ||
98 | autosize | ||
99 | src={service.url} | ||
100 | preload="./webview/plugin.js" | ||
101 | partition={`persist:service-${service.id}`} | ||
102 | onDidAttach={() => setWebviewReference({ | ||
103 | serviceId: service.id, | ||
104 | webview: this.webview.view, | ||
105 | })} | ||
106 | onUpdateTargetUrl={this.updateTargetUrl} | ||
107 | useragent={service.userAgent} | ||
108 | muted={isAppMuted || service.isMuted} | ||
109 | allowpopups | ||
110 | /> | ||
94 | )} | 111 | )} |
95 | <Webview | ||
96 | ref={(element) => { this.webview = element; }} | ||
97 | autosize | ||
98 | src={service.url} | ||
99 | preload="./webview/plugin.js" | ||
100 | partition={`persist:service-${service.id}`} | ||
101 | onDidAttach={() => setWebviewReference({ | ||
102 | serviceId: service.id, | ||
103 | webview: this.webview.view, | ||
104 | })} | ||
105 | onUpdateTargetUrl={this.updateTargetUrl} | ||
106 | useragent={service.userAgent} | ||
107 | muted={isAppMuted || service.isMuted} | ||
108 | disablewebsecurity | ||
109 | allowpopups | ||
110 | /> | ||
111 | {statusBar} | 112 | {statusBar} |
112 | </div> | 113 | </div> |
113 | ); | 114 | ); |
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js index d48152c18..d3e6951f3 100644 --- a/src/components/services/content/WebviewCrashHandler.js +++ b/src/components/services/content/WebviewCrashHandler.js | |||
@@ -62,7 +62,7 @@ export default class WebviewCrashHandler extends Component { | |||
62 | const { intl } = this.context; | 62 | const { intl } = this.context; |
63 | 63 | ||
64 | return ( | 64 | return ( |
65 | <div className="services__crash-handler"> | 65 | <div className="services__info-layer"> |
66 | <h1>{intl.formatMessage(messages.headline)}</h1> | 66 | <h1>{intl.formatMessage(messages.headline)}</h1> |
67 | <p>{intl.formatMessage(messages.text, { name })}</p> | 67 | <p>{intl.formatMessage(messages.text, { name })}</p> |
68 | <Button | 68 | <Button |
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js index 2daf55676..489027d57 100644 --- a/src/components/services/tabs/TabBarSortableList.js +++ b/src/components/services/tabs/TabBarSortableList.js | |||
@@ -17,6 +17,8 @@ class TabBarSortableList extends Component { | |||
17 | deleteService: PropTypes.func.isRequired, | 17 | deleteService: PropTypes.func.isRequired, |
18 | disableService: PropTypes.func.isRequired, | 18 | disableService: PropTypes.func.isRequired, |
19 | enableService: PropTypes.func.isRequired, | 19 | enableService: PropTypes.func.isRequired, |
20 | showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired, | ||
21 | showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired, | ||
20 | } | 22 | } |
21 | 23 | ||
22 | render() { | 24 | render() { |
@@ -30,6 +32,8 @@ class TabBarSortableList extends Component { | |||
30 | disableService, | 32 | disableService, |
31 | enableService, | 33 | enableService, |
32 | openSettings, | 34 | openSettings, |
35 | showMessageBadgeWhenMutedSetting, | ||
36 | showMessageBadgesEvenWhenMuted, | ||
33 | } = this.props; | 37 | } = this.props; |
34 | 38 | ||
35 | return ( | 39 | return ( |
@@ -50,6 +54,8 @@ class TabBarSortableList extends Component { | |||
50 | disableService={() => disableService({ serviceId: service.id })} | 54 | disableService={() => disableService({ serviceId: service.id })} |
51 | enableService={() => enableService({ serviceId: service.id })} | 55 | enableService={() => enableService({ serviceId: service.id })} |
52 | openSettings={openSettings} | 56 | openSettings={openSettings} |
57 | showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting} | ||
58 | showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted} | ||
53 | /> | 59 | /> |
54 | ))} | 60 | ))} |
55 | {/* <li> | 61 | {/* <li> |
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js index a7136c43f..7aed8fda7 100644 --- a/src/components/services/tabs/TabItem.js +++ b/src/components/services/tabs/TabItem.js | |||
@@ -63,6 +63,8 @@ class TabItem extends Component { | |||
63 | deleteService: PropTypes.func.isRequired, | 63 | deleteService: PropTypes.func.isRequired, |
64 | disableService: PropTypes.func.isRequired, | 64 | disableService: PropTypes.func.isRequired, |
65 | enableService: PropTypes.func.isRequired, | 65 | enableService: PropTypes.func.isRequired, |
66 | showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired, | ||
67 | showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired, | ||
66 | }; | 68 | }; |
67 | 69 | ||
68 | static contextTypes = { | 70 | static contextTypes = { |
@@ -81,6 +83,8 @@ class TabItem extends Component { | |||
81 | disableService, | 83 | disableService, |
82 | enableService, | 84 | enableService, |
83 | openSettings, | 85 | openSettings, |
86 | showMessageBadgeWhenMutedSetting, | ||
87 | showMessageBadgesEvenWhenMuted, | ||
84 | } = this.props; | 88 | } = this.props; |
85 | const { intl } = this.context; | 89 | const { intl } = this.context; |
86 | 90 | ||
@@ -121,6 +125,26 @@ class TabItem extends Component { | |||
121 | }]; | 125 | }]; |
122 | const menu = Menu.buildFromTemplate(menuTemplate); | 126 | const menu = Menu.buildFromTemplate(menuTemplate); |
123 | 127 | ||
128 | let notificationBadge = null; | ||
129 | if ((showMessageBadgeWhenMutedSetting || service.isNotificationEnabled) && showMessageBadgesEvenWhenMuted && service.isBadgeEnabled) { | ||
130 | notificationBadge = ( | ||
131 | <span> | ||
132 | {service.unreadDirectMessageCount > 0 && ( | ||
133 | <span className="tab-item__message-count"> | ||
134 | {service.unreadDirectMessageCount} | ||
135 | </span> | ||
136 | )} | ||
137 | {service.unreadIndirectMessageCount > 0 | ||
138 | && service.unreadDirectMessageCount === 0 | ||
139 | && service.isIndirectMessageBadgeEnabled && ( | ||
140 | <span className="tab-item__message-count is-indirect"> | ||
141 | • | ||
142 | </span> | ||
143 | )} | ||
144 | </span> | ||
145 | ); | ||
146 | } | ||
147 | |||
124 | return ( | 148 | return ( |
125 | <li | 149 | <li |
126 | className={classnames({ | 150 | className={classnames({ |
@@ -138,18 +162,7 @@ class TabItem extends Component { | |||
138 | className="tab-item__icon" | 162 | className="tab-item__icon" |
139 | alt="" | 163 | alt="" |
140 | /> | 164 | /> |
141 | {service.unreadDirectMessageCount > 0 && ( | 165 | {notificationBadge} |
142 | <span className="tab-item__message-count"> | ||
143 | {service.unreadDirectMessageCount} | ||
144 | </span> | ||
145 | )} | ||
146 | {service.unreadIndirectMessageCount > 0 | ||
147 | && service.unreadDirectMessageCount === 0 | ||
148 | && service.isIndirectMessageBadgeEnabled && ( | ||
149 | <span className="tab-item__message-count is-indirect"> | ||
150 | • | ||
151 | </span> | ||
152 | )} | ||
153 | </li> | 166 | </li> |
154 | ); | 167 | ); |
155 | } | 168 | } |
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js index fd4325107..ceb88c51c 100644 --- a/src/components/services/tabs/Tabbar.js +++ b/src/components/services/tabs/Tabbar.js | |||
@@ -18,6 +18,8 @@ export default class TabBar extends Component { | |||
18 | toggleAudio: PropTypes.func.isRequired, | 18 | toggleAudio: PropTypes.func.isRequired, |
19 | deleteService: PropTypes.func.isRequired, | 19 | deleteService: PropTypes.func.isRequired, |
20 | updateService: PropTypes.func.isRequired, | 20 | updateService: PropTypes.func.isRequired, |
21 | showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired, | ||
22 | showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired, | ||
21 | } | 23 | } |
22 | 24 | ||
23 | onSortEnd = ({ oldIndex, newIndex }) => { | 25 | onSortEnd = ({ oldIndex, newIndex }) => { |
@@ -30,6 +32,8 @@ export default class TabBar extends Component { | |||
30 | reorder({ oldIndex, newIndex }); | 32 | reorder({ oldIndex, newIndex }); |
31 | }; | 33 | }; |
32 | 34 | ||
35 | shouldPreventSorting = event => event.target.tagName !== 'LI'; | ||
36 | |||
33 | toggleService = ({ serviceId, isEnabled }) => { | 37 | toggleService = ({ serviceId, isEnabled }) => { |
34 | const { updateService } = this.props; | 38 | const { updateService } = this.props; |
35 | 39 | ||
@@ -62,6 +66,8 @@ export default class TabBar extends Component { | |||
62 | toggleNotifications, | 66 | toggleNotifications, |
63 | toggleAudio, | 67 | toggleAudio, |
64 | deleteService, | 68 | deleteService, |
69 | showMessageBadgeWhenMutedSetting, | ||
70 | showMessageBadgesEvenWhenMuted, | ||
65 | } = this.props; | 71 | } = this.props; |
66 | 72 | ||
67 | return ( | 73 | return ( |
@@ -71,6 +77,7 @@ export default class TabBar extends Component { | |||
71 | setActive={setActive} | 77 | setActive={setActive} |
72 | onSortEnd={this.onSortEnd} | 78 | onSortEnd={this.onSortEnd} |
73 | onSortStart={disableToolTip} | 79 | onSortStart={disableToolTip} |
80 | shouldCancelStart={this.shouldPreventSorting} | ||
74 | reload={reload} | 81 | reload={reload} |
75 | toggleNotifications={toggleNotifications} | 82 | toggleNotifications={toggleNotifications} |
76 | toggleAudio={toggleAudio} | 83 | toggleAudio={toggleAudio} |
@@ -82,6 +89,8 @@ export default class TabBar extends Component { | |||
82 | axis="y" | 89 | axis="y" |
83 | lockAxis="y" | 90 | lockAxis="y" |
84 | helperClass="is-reordering" | 91 | helperClass="is-reordering" |
92 | showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting} | ||
93 | showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted} | ||
85 | /> | 94 | /> |
86 | </div> | 95 | </div> |
87 | ); | 96 | ); |