diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 25 | ||||
-rw-r--r-- | src/containers/settings/EditServiceScreen.js | 11 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 1 | ||||
-rw-r--r-- | src/models/Recipe.js | 2 | ||||
-rw-r--r-- | src/styles/content-tabs.scss | 12 | ||||
-rw-r--r-- | src/styles/input.scss | 4 |
6 files changed, 47 insertions, 8 deletions
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index 32f9d72f0..4458c4c5a 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js | |||
@@ -47,6 +47,10 @@ const messages = defineMessages({ | |||
47 | id: 'settings.service.form.tabOnPremise', | 47 | id: 'settings.service.form.tabOnPremise', |
48 | defaultMessage: '!!!Self hosted ⭐️', | 48 | defaultMessage: '!!!Self hosted ⭐️', |
49 | }, | 49 | }, |
50 | useHostedService: { | ||
51 | id: 'settings.service.form.useHostedService', | ||
52 | defaultMessage: '!!!Use the hosted {name} service.', | ||
53 | }, | ||
50 | customUrlValidationError: { | 54 | customUrlValidationError: { |
51 | id: 'settings.service.form.customUrlValidationError', | 55 | id: 'settings.service.form.customUrlValidationError', |
52 | defaultMessage: '!!!Could not validate custom {name} server.', | 56 | defaultMessage: '!!!Could not validate custom {name} server.', |
@@ -120,7 +124,6 @@ export default class EditServiceForm extends Component { | |||
120 | this.props.form.submit({ | 124 | this.props.form.submit({ |
121 | onSuccess: async (form) => { | 125 | onSuccess: async (form) => { |
122 | const values = form.values(); | 126 | const values = form.values(); |
123 | |||
124 | let isValid = true; | 127 | let isValid = true; |
125 | 128 | ||
126 | if (recipe.validateUrl && values.customUrl) { | 129 | if (recipe.validateUrl && values.customUrl) { |
@@ -178,6 +181,13 @@ export default class EditServiceForm extends Component { | |||
178 | /> | 181 | /> |
179 | ); | 182 | ); |
180 | 183 | ||
184 | let activeTabIndex = 0; | ||
185 | if (recipe.hasHostedOption && service.team) { | ||
186 | activeTabIndex = 1; | ||
187 | } else if (recipe.hasHostedOption && service.customUrl) { | ||
188 | activeTabIndex = 2; | ||
189 | } | ||
190 | |||
181 | return ( | 191 | return ( |
182 | <div className="settings__main"> | 192 | <div className="settings__main"> |
183 | <div className="settings__header"> | 193 | <div className="settings__header"> |
@@ -210,11 +220,20 @@ export default class EditServiceForm extends Component { | |||
210 | <Input field={form.$('name')} focus /> | 220 | <Input field={form.$('name')} focus /> |
211 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( | 221 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( |
212 | <Tabs | 222 | <Tabs |
213 | active={service.customUrl ? 1 : 0} | 223 | active={activeTabIndex} |
214 | > | 224 | > |
225 | {recipe.hasHostedOption && ( | ||
226 | <TabItem title={recipe.name}> | ||
227 | {intl.formatMessage(messages.useHostedService, { name: recipe.name })} | ||
228 | </TabItem> | ||
229 | )} | ||
215 | {recipe.hasTeamId && ( | 230 | {recipe.hasTeamId && ( |
216 | <TabItem title={intl.formatMessage(messages.tabHosted)}> | 231 | <TabItem title={intl.formatMessage(messages.tabHosted)}> |
217 | <Input field={form.$('team')} suffix={recipe.urlInputSuffix} /> | 232 | <Input |
233 | field={form.$('team')} | ||
234 | prefix={recipe.urlInputPrefix} | ||
235 | suffix={recipe.urlInputSuffix} | ||
236 | /> | ||
218 | </TabItem> | 237 | </TabItem> |
219 | )} | 238 | )} |
220 | {recipe.hasCustomUrl && ( | 239 | {recipe.hasCustomUrl && ( |
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js index cdde292b0..3c52152b1 100644 --- a/src/containers/settings/EditServiceScreen.js +++ b/src/containers/settings/EditServiceScreen.js | |||
@@ -127,11 +127,22 @@ export default class EditServiceScreen extends Component { | |||
127 | }); | 127 | }); |
128 | } | 128 | } |
129 | 129 | ||
130 | // More fine grained and use case specific validation rules | ||
130 | if (recipe.hasTeamId && recipe.hasCustomUrl) { | 131 | if (recipe.hasTeamId && recipe.hasCustomUrl) { |
131 | config.fields.team.validate = [oneRequired(['team', 'customUrl'])]; | 132 | config.fields.team.validate = [oneRequired(['team', 'customUrl'])]; |
132 | config.fields.customUrl.validate = [url, oneRequired(['team', 'customUrl'])]; | 133 | config.fields.customUrl.validate = [url, oneRequired(['team', 'customUrl'])]; |
133 | } | 134 | } |
134 | 135 | ||
136 | // If a service can be hosted and has a teamId or customUrl | ||
137 | if (recipe.hasHostedOption && (recipe.hasTeamId || recipe.hasCustomUrl)) { | ||
138 | if (config.fields.team) { | ||
139 | config.fields.team.validate = []; | ||
140 | } | ||
141 | if (config.fields.customUrl) { | ||
142 | config.fields.customUrl.validate = [url]; | ||
143 | } | ||
144 | } | ||
145 | |||
135 | if (recipe.hasIndirectMessages) { | 146 | if (recipe.hasIndirectMessages) { |
136 | Object.assign(config.fields, { | 147 | Object.assign(config.fields, { |
137 | isIndirectMessageBadgeEnabled: { | 148 | isIndirectMessageBadgeEnabled: { |
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index a6da0f61d..567537d75 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -110,6 +110,7 @@ | |||
110 | "settings.service.form.editServiceHeadline": "Edit {name}", | 110 | "settings.service.form.editServiceHeadline": "Edit {name}", |
111 | "settings.service.form.tabHosted": "Hosted", | 111 | "settings.service.form.tabHosted": "Hosted", |
112 | "settings.service.form.tabOnPremise": "Self hosted ⭐️", | 112 | "settings.service.form.tabOnPremise": "Self hosted ⭐️", |
113 | "settings.service.form.useHostedService": "Use the hosted {name} service.", | ||
113 | "settings.service.form.customUrlValidationError": "Could not validate custom {name} server.", | 114 | "settings.service.form.customUrlValidationError": "Could not validate custom {name} server.", |
114 | "settings.service.form.customUrlPremiumInfo": "To add self hosted services, you need a Franz Premium Supporter Account.", | 115 | "settings.service.form.customUrlPremiumInfo": "To add self hosted services, you need a Franz Premium Supporter Account.", |
115 | "settings.service.form.customUrlUpgradeAccount": "Upgrade your account", | 116 | "settings.service.form.customUrlUpgradeAccount": "Upgrade your account", |
diff --git a/src/models/Recipe.js b/src/models/Recipe.js index 9971df77c..036d6d216 100644 --- a/src/models/Recipe.js +++ b/src/models/Recipe.js | |||
@@ -15,6 +15,7 @@ export default class Recipe { | |||
15 | hasTeamId = false; | 15 | hasTeamId = false; |
16 | hasPredefinedUrl = false; | 16 | hasPredefinedUrl = false; |
17 | hasCustomUrl = false; | 17 | hasCustomUrl = false; |
18 | hasHostedOption = false; | ||
18 | urlInputPrefix = ''; | 19 | urlInputPrefix = ''; |
19 | urlInputSuffix = ''; | 20 | urlInputSuffix = ''; |
20 | 21 | ||
@@ -45,6 +46,7 @@ export default class Recipe { | |||
45 | this.hasTeamId = data.config.hasTeamId || this.hasTeamId; | 46 | this.hasTeamId = data.config.hasTeamId || this.hasTeamId; |
46 | this.hasPredefinedUrl = data.config.hasPredefinedUrl || this.hasPredefinedUrl; | 47 | this.hasPredefinedUrl = data.config.hasPredefinedUrl || this.hasPredefinedUrl; |
47 | this.hasCustomUrl = data.config.hasCustomUrl || this.hasCustomUrl; | 48 | this.hasCustomUrl = data.config.hasCustomUrl || this.hasCustomUrl; |
49 | this.hasHostedOption = data.config.hasHostedOption || this.hasHostedOption; | ||
48 | 50 | ||
49 | this.urlInputPrefix = data.config.urlInputPrefix || this.urlInputPrefix; | 51 | this.urlInputPrefix = data.config.urlInputPrefix || this.urlInputPrefix; |
50 | this.urlInputSuffix = data.config.urlInputSuffix || this.urlInputSuffix; | 52 | this.urlInputSuffix = data.config.urlInputSuffix || this.urlInputSuffix; |
diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss index aa3c8594b..47dfea2c4 100644 --- a/src/styles/content-tabs.scss +++ b/src/styles/content-tabs.scss | |||
@@ -12,15 +12,17 @@ | |||
12 | flex: 1; | 12 | flex: 1; |
13 | // border: 1px solid $theme-gray-lightest; | 13 | // border: 1px solid $theme-gray-lightest; |
14 | color: $theme-gray-dark; | 14 | color: $theme-gray-dark; |
15 | background: $theme-gray-lightest; | 15 | background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%)); |
16 | border-bottom: 1px solid $theme-gray-lighter; | 16 | border-right: 1px solid $theme-gray-lighter; |
17 | box-shadow: inset 0px -3px 10px rgba(black, 0.05); | 17 | transition: background $theme-transition-time; |
18 | transition: all $theme-transition-time; | 18 | |
19 | &:last-of-type { | ||
20 | border-right: 0; | ||
21 | } | ||
19 | 22 | ||
20 | &.is-active { | 23 | &.is-active { |
21 | background: $theme-brand-primary; | 24 | background: $theme-brand-primary; |
22 | color: #FFF; | 25 | color: #FFF; |
23 | border-bottom: 1px solid $theme-brand-primary; | ||
24 | box-shadow: none; | 26 | box-shadow: none; |
25 | } | 27 | } |
26 | } | 28 | } |
diff --git a/src/styles/input.scss b/src/styles/input.scss index 814dce5f8..7042f56e8 100644 --- a/src/styles/input.scss +++ b/src/styles/input.scss | |||
@@ -47,6 +47,10 @@ | |||
47 | padding: 8px; | 47 | padding: 8px; |
48 | // font-size: 18px; | 48 | // font-size: 18px; |
49 | color: $theme-gray; | 49 | color: $theme-gray; |
50 | |||
51 | &::placeholder { | ||
52 | color: lighten($theme-gray-light, 10%); | ||
53 | } | ||
50 | } | 54 | } |
51 | 55 | ||
52 | .franz-form__input-prefix, | 56 | .franz-form__input-prefix, |