diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-11-20 17:35:21 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-20 17:35:21 +0530 |
commit | 86f9ab693dcad951271f727046214b03d91ebd69 (patch) | |
tree | 3d32ff4814b5484495b811c5fe0ebea4805f4e55 /src/components/settings | |
parent | 6.2.1-nightly.47 [skip ci] (diff) | |
download | ferdium-app-86f9ab693dcad951271f727046214b03d91ebd69.tar.gz ferdium-app-86f9ab693dcad951271f727046214b03d91ebd69.tar.zst ferdium-app-86f9ab693dcad951271f727046214b03d91ebd69.zip |
Transform Todo feature, ServiceBarTargetUrl, ServiceIcon, TeamDashboard, Slider, Loader & WorkspaceSwitchningIndicator into ts (#782)
Diffstat (limited to 'src/components/settings')
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.tsx | 2 | ||||
-rw-r--r-- | src/components/settings/team/TeamDashboard.tsx (renamed from src/components/settings/team/TeamDashboard.js) | 139 |
2 files changed, 68 insertions, 73 deletions
diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx index 8ccad9e49..0a05cb0e1 100644 --- a/src/components/settings/settings/EditSettingsForm.tsx +++ b/src/components/settings/settings/EditSettingsForm.tsx | |||
@@ -650,7 +650,7 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
650 | <> | 650 | <> |
651 | <Slider | 651 | <Slider |
652 | type="number" | 652 | type="number" |
653 | onChange={e => this.submit(e)} | 653 | onSliderChange={e => this.submit(e)} |
654 | field={form.$('grayscaleServicesDim')} | 654 | field={form.$('grayscaleServicesDim')} |
655 | /> | 655 | /> |
656 | <Hr /> | 656 | <Hr /> |
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.tsx index 538a9a10c..3ef55fac6 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.tsx | |||
@@ -1,11 +1,9 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactElement } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import { defineMessages, injectIntl } from 'react-intl'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
5 | import ReactTooltip from 'react-tooltip'; | 4 | import ReactTooltip from 'react-tooltip'; |
6 | import injectSheet from 'react-jss'; | 5 | import withStyles, { WithStylesProps } from 'react-jss'; |
7 | import classnames from 'classnames'; | 6 | import classnames from 'classnames'; |
8 | |||
9 | import Loader from '../../ui/Loader'; | 7 | import Loader from '../../ui/Loader'; |
10 | import Button from '../../ui/button'; | 8 | import Button from '../../ui/button'; |
11 | import Infobox from '../../ui/Infobox'; | 9 | import Infobox from '../../ui/Infobox'; |
@@ -99,17 +97,17 @@ const styles = { | |||
99 | }, | 97 | }, |
100 | }; | 98 | }; |
101 | 99 | ||
102 | class TeamDashboard extends Component { | 100 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { |
103 | static propTypes = { | 101 | isLoading: boolean; |
104 | isLoading: PropTypes.bool.isRequired, | 102 | userInfoRequestFailed: boolean; |
105 | userInfoRequestFailed: PropTypes.bool.isRequired, | 103 | retryUserInfoRequest: () => void; |
106 | retryUserInfoRequest: PropTypes.func.isRequired, | 104 | openTeamManagement: () => void; |
107 | openTeamManagement: PropTypes.func.isRequired, | 105 | server: string; |
108 | classes: PropTypes.object.isRequired, | 106 | } |
109 | server: PropTypes.string.isRequired, | ||
110 | }; | ||
111 | 107 | ||
112 | render() { | 108 | @observer |
109 | class TeamDashboard extends Component<IProps> { | ||
110 | render(): ReactElement { | ||
113 | const { | 111 | const { |
114 | isLoading, | 112 | isLoading, |
115 | userInfoRequestFailed, | 113 | userInfoRequestFailed, |
@@ -117,68 +115,65 @@ class TeamDashboard extends Component { | |||
117 | openTeamManagement, | 115 | openTeamManagement, |
118 | classes, | 116 | classes, |
119 | server, | 117 | server, |
118 | intl, | ||
120 | } = this.props; | 119 | } = this.props; |
121 | const { intl } = this.props; | ||
122 | 120 | ||
123 | if (server === LIVE_FRANZ_API) { | 121 | return server === LIVE_FRANZ_API ? ( |
124 | return ( | 122 | <div className="settings__main"> |
125 | <div className="settings__main"> | 123 | <div className="settings__header"> |
126 | <div className="settings__header"> | 124 | <span className="settings__header-item"> |
127 | <span className="settings__header-item"> | 125 | {intl.formatMessage(messages.headline)} |
128 | {intl.formatMessage(messages.headline)} | 126 | </span> |
129 | </span> | 127 | </div> |
130 | </div> | 128 | <div className="settings__body"> |
131 | <div className="settings__body"> | 129 | {isLoading && <Loader />} |
132 | {isLoading && <Loader />} | ||
133 | 130 | ||
134 | {!isLoading && userInfoRequestFailed && ( | 131 | {!isLoading && userInfoRequestFailed && ( |
135 | <Infobox | 132 | <Infobox |
136 | icon="alert" | 133 | icon="alert" |
137 | type="danger" | 134 | type="danger" |
138 | ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)} | 135 | ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)} |
139 | ctaLoading={isLoading} | 136 | ctaLoading={isLoading} |
140 | ctaOnClick={retryUserInfoRequest} | 137 | ctaOnClick={retryUserInfoRequest} |
141 | > | 138 | > |
142 | {intl.formatMessage(messages.userInfoRequestFailed)} | 139 | {intl.formatMessage(messages.userInfoRequestFailed)} |
143 | </Infobox> | 140 | </Infobox> |
144 | )} | 141 | )} |
145 | 142 | ||
146 | {!userInfoRequestFailed && !isLoading && ( | 143 | {!userInfoRequestFailed && !isLoading && ( |
147 | <> | 144 | <> |
148 | <H1 | 145 | <H1 |
149 | className={classnames({ | 146 | className={classnames({ |
150 | [classes.headline]: true, | 147 | [classes.headline]: true, |
151 | [classes.headlineWithSpacing]: true, | 148 | [classes.headlineWithSpacing]: true, |
152 | })} | 149 | })} |
153 | > | 150 | > |
154 | {intl.formatMessage(messages.contentHeadline)} | 151 | {intl.formatMessage(messages.contentHeadline)} |
155 | </H1> | 152 | </H1> |
156 | <div className={classes.container}> | 153 | <div className={classes.container}> |
157 | <div className={classes.content}> | 154 | <div className={classes.content}> |
158 | <p>{intl.formatMessage(messages.intro)}</p> | 155 | <p>{intl.formatMessage(messages.intro)}</p> |
159 | <p>{intl.formatMessage(messages.copy)}</p> | 156 | <p>{intl.formatMessage(messages.copy)}</p> |
160 | </div> | ||
161 | <img | ||
162 | className={classes.image} | ||
163 | src="https://cdn.franzinfra.com/announcements/assets/teams.png" | ||
164 | alt="Ferdium for Teams" | ||
165 | /> | ||
166 | </div> | ||
167 | <div className={classes.buttonContainer}> | ||
168 | <Button | ||
169 | label={intl.formatMessage(messages.manageButton)} | ||
170 | onClick={openTeamManagement} | ||
171 | className={classes.cta} | ||
172 | /> | ||
173 | </div> | 157 | </div> |
174 | </> | 158 | <img |
175 | )} | 159 | className={classes.image} |
176 | </div> | 160 | src="https://cdn.franzinfra.com/announcements/assets/teams.png" |
177 | <ReactTooltip place="right" type="dark" effect="solid" /> | 161 | alt="Ferdium for Teams" |
162 | /> | ||
163 | </div> | ||
164 | <div className={classes.buttonContainer}> | ||
165 | <Button | ||
166 | label={intl.formatMessage(messages.manageButton)} | ||
167 | onClick={openTeamManagement} | ||
168 | className={classes.cta} | ||
169 | /> | ||
170 | </div> | ||
171 | </> | ||
172 | )} | ||
178 | </div> | 173 | </div> |
179 | ); | 174 | <ReactTooltip place="right" type="dark" effect="solid" /> |
180 | } | 175 | </div> |
181 | return ( | 176 | ) : ( |
182 | <div className="settings__main"> | 177 | <div className="settings__main"> |
183 | <div className="settings__header"> | 178 | <div className="settings__header"> |
184 | <span className="settings__header-item"> | 179 | <span className="settings__header-item"> |
@@ -205,5 +200,5 @@ class TeamDashboard extends Component { | |||
205 | } | 200 | } |
206 | 201 | ||
207 | export default injectIntl( | 202 | export default injectIntl( |
208 | injectSheet(styles, { injectTheme: true })(observer(TeamDashboard)), | 203 | withStyles(styles, { injectTheme: true })(TeamDashboard), |
209 | ); | 204 | ); |