From a1bdd02fca413cdc314137dc65e835131c358e72 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Sun, 12 Nov 2017 19:12:29 +0100 Subject: [wip] add icon upload --- src/containers/settings/EditServiceScreen.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'src/containers/settings') diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js index 191ef447b..52a9fa6db 100644 --- a/src/containers/settings/EditServiceScreen.js +++ b/src/containers/settings/EditServiceScreen.js @@ -42,6 +42,10 @@ const messages = defineMessages({ id: 'settings.service.form.indirectMessages', defaultMessage: '!!!Show message badge for all new messages', }, + icon: { + id: 'settings.service.form.icon', + defaultMessage: '!!!Icon', + }, }); @inject('stores', 'actions') @observer @@ -93,6 +97,11 @@ export default class EditServiceScreen extends Component { value: !service.isMuted, default: true, }, + icon: { + label: intl.formatMessage(messages.icon), + value: service.icon, + default: true, + }, }, }; @@ -179,6 +188,12 @@ export default class EditServiceScreen extends Component { return (
Loading...
); } + if (!recipe) { + return ( +
something went wrong
+ ); + } + const form = this.prepareForm(recipe, service); return ( -- cgit v1.2.3-70-g09d2 From b9aacc6184f3ab9c9325dfb91a4669a69d1abe9d Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Thu, 7 Dec 2017 13:51:16 +0100 Subject: Sort languages by name --- src/containers/settings/EditSettingsScreen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/containers/settings') diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js index 45ded9e5c..1a297f41f 100644 --- a/src/containers/settings/EditSettingsScreen.js +++ b/src/containers/settings/EditSettingsScreen.js @@ -109,7 +109,7 @@ export default class EditSettingsScreen extends Component { const { intl } = this.context; const locales = []; - Object.keys(APP_LOCALES).forEach((key) => { + Object.keys(APP_LOCALES).sort(Intl.Collator().compare).forEach((key) => { locales.push({ value: key, label: APP_LOCALES[key], -- cgit v1.2.3-70-g09d2 From 150cfe764aeb9e93341ba2f231fd121fe85472af Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Wed, 27 Dec 2017 13:09:17 +0100 Subject: First working draft of icon upload --- package.json | 2 +- src/api/server/ServerApi.js | 42 ++++++++++++++++++++-- .../settings/services/EditServiceForm.js | 7 +++- src/components/ui/ImageUpload.js | 42 +++++++--------------- src/containers/settings/EditServiceScreen.js | 7 ++-- src/i18n/locales/en-US.json | 1 + src/models/Service.js | 11 +++--- src/stores/ServicesStore.js | 14 +++++++- yarn.lock | 6 ++-- 9 files changed, 86 insertions(+), 46 deletions(-) (limited to 'src/containers/settings') diff --git a/package.json b/package.json index 6c4c65cb8..5dae5bc7c 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "mkdirp": "^0.5.1", "mobx": "^3.1.0", "mobx-react": "^4.1.0", - "mobx-react-form": "1.24.0", + "mobx-react-form": "^1.32.2", "mobx-react-router": "^3.1.2", "moment": "^2.17.1", "normalize-url": "^1.9.1", diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js index 8b3136d27..6b96f709e 100644 --- a/src/api/server/ServerApi.js +++ b/src/api/server/ServerApi.js @@ -167,27 +167,65 @@ export default class ServerApi { throw request; } const serviceData = await request.json(); + + if (data.iconFile) { + const iconUrl = await this.uploadServiceIcon(serviceData.data.id, data.iconFile); + + serviceData.data.iconUrl = iconUrl; + } + const service = Object.assign(serviceData, { data: await this._prepareServiceModel(serviceData.data) }); console.debug('ServerApi::createService resolves', service); return service; } - async updateService(recipeId, data) { - const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${recipeId}`, this._prepareAuthRequest({ + async updateService(serviceId, rawData) { + const data = rawData; + + if (data.iconFile) { + await this.uploadServiceIcon(serviceId, data.iconFile); + } + + const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${serviceId}`, this._prepareAuthRequest({ method: 'PUT', body: JSON.stringify(data), })); + if (!request.ok) { throw request; } + const serviceData = await request.json(); + const service = Object.assign(serviceData, { data: await this._prepareServiceModel(serviceData.data) }); console.debug('ServerApi::updateService resolves', service); return service; } + async uploadServiceIcon(serviceId, icon) { + const formData = new FormData(); + formData.append('icon', icon); + + const requestData = this._prepareAuthRequest({ + method: 'PUT', + body: formData, + }); + + delete requestData.headers['Content-Type']; + + const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${serviceId}`, requestData); + + if (!request.ok) { + throw request; + } + + const serviceData = await request.json(); + + return serviceData.data.iconUrl; + } + async reorderService(data) { const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/reorder`, this._prepareAuthRequest({ method: 'PUT', diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index ee69d53aa..4f2f98a01 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js @@ -127,6 +127,11 @@ export default class EditServiceForm extends Component { const values = form.values(); let isValid = true; + const files = form.$('customIcon').files; + if (files) { + values.iconFile = files[0]; + } + if (recipe.validateUrl && values.customUrl) { this.setState({ isValidatingCustomUrl: true }); try { @@ -224,7 +229,7 @@ export default class EditServiceForm extends Component {
{/* */} - +
{(recipe.hasTeamId || recipe.hasCustomUrl) && ( diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js index d07c3649c..f25d966f4 100644 --- a/src/components/ui/ImageUpload.js +++ b/src/components/ui/ImageUpload.js @@ -12,82 +12,64 @@ export default class ImageUpload extends Component { field: PropTypes.instanceOf(Field).isRequired, className: PropTypes.string, multiple: PropTypes.bool, - // disabled: PropTypes.bool, - // onClick: PropTypes.func, - // type: PropTypes.string, - // buttonType: PropTypes.string, - // loaded: PropTypes.bool, - // htmlForm: PropTypes.string, }; static defaultProps = { className: null, multiple: false, - // disabled: false, - // onClick: () => {}, - // type: 'button', - // buttonType: '', - // loaded: true, - // htmlForm: '', }; - dropzoneRef = null; - state = { path: null, } onDrop(acceptedFiles) { - // const req = request.post('/upload'); acceptedFiles.forEach((file) => { - console.log(file); this.setState({ path: file.path, }); - // req.attach(file.name, file); + this.props.field.onDrop(file); }); - // req.end(callback); } + dropzoneRef = null; + render() { const { field, className, multiple, - // disabled, - // onClick, - // type, - // buttonType, - // loaded, - // htmlForm, } = this.props; const cssClasses = classnames({ 'franz-form__button': true, - // [`franz-form__button--${buttonType}`]: buttonType, [`${className}`]: className, }); return (
{field.label} - {this.state.path ? ( + {(field.value && field.value !== 'delete') || this.state.path ? (
{recipe.message && ( diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js index 3c52152b1..78f043e80 100644 --- a/src/containers/settings/EditServiceScreen.js +++ b/src/containers/settings/EditServiceScreen.js @@ -169,6 +169,14 @@ export default class EditServiceScreen extends Component { } } + clearCache() { + const { clearCache } = this.props.actions.service; + const { activeSettings: service } = this.props.stores.services; + clearCache({ + serviceId: service.id, + }); + } + render() { const { recipes, services, user } = this.props.stores; const { action } = this.props.router.params; @@ -211,8 +219,10 @@ export default class EditServiceScreen extends Component { status={services.actionStatus} isSaving={services.updateServiceRequest.isExecuting || services.createServiceRequest.isExecuting} isDeleting={services.deleteServiceRequest.isExecuting} + isClearingCache={services.clearCacheRequest.isExecuting} onSubmit={d => this.onSubmit(d)} onDelete={() => this.deleteService()} + onClearCache={() => this.clearCache()} /> ); } @@ -234,6 +244,7 @@ EditServiceScreen.wrappedComponent.propTypes = { createService: PropTypes.func.isRequired, updateService: PropTypes.func.isRequired, deleteService: PropTypes.func.isRequired, + clearCache: PropTypes.func.isRequired, }).isRequired, }).isRequired, }; diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 567537d75..2b5a3fc4b 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json @@ -124,6 +124,8 @@ "settings.service.form.indirectMessages": "Show message badge for all new messages", "settings.service.form.enableAudio": "Enable audio", "settings.service.form.isMutedInfo": "When disabled, all notification sounds and audio playback are muted", + "settings.service.form.buttonClearCache": "Clear cache", + "settings.service.form.buttonClearingCache": "Clearing cache...", "settings.service.form.headlineNotifications": "Notifications", "settings.service.form.headlineBadges": "Unread message badges", "settings.service.form.headlineGeneral": "General", diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js index 66f37af26..237264bcc 100644 --- a/src/stores/ServicesStore.js +++ b/src/stores/ServicesStore.js @@ -16,6 +16,7 @@ export default class ServicesStore extends Store { @observable updateServiceRequest = new Request(this.api.services, 'update'); @observable reorderServicesRequest = new Request(this.api.services, 'reorder'); @observable deleteServiceRequest = new Request(this.api.services, 'delete'); + @observable clearCacheRequest = new Request(this.api.services, 'clearCache'); @observable filterNeedle = null; @@ -31,6 +32,7 @@ export default class ServicesStore extends Store { this.actions.service.createFromLegacyService.listen(this._createFromLegacyService.bind(this)); this.actions.service.updateService.listen(this._updateService.bind(this)); this.actions.service.deleteService.listen(this._deleteService.bind(this)); + this.actions.service.clearCache.listen(this._clearCache.bind(this)); this.actions.service.setWebviewReference.listen(this._setWebviewReference.bind(this)); this.actions.service.focusService.listen(this._focusService.bind(this)); this.actions.service.focusActiveService.listen(this._focusActiveService.bind(this)); @@ -205,6 +207,13 @@ export default class ServicesStore extends Store { gaEvent('Service', 'delete', service.recipe.id); } + @action async _clearCache({ serviceId }) { + this.clearCacheRequest.reset(); + const request = this.clearCacheRequest.execute(serviceId); + await request._promise; + gaEvent('Service', 'clear cache'); + } + @action _setActive({ serviceId }) { const service = this.one(serviceId); diff --git a/src/styles/button.scss b/src/styles/button.scss index 75d2cb1d4..8d2adbbcc 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss @@ -48,6 +48,18 @@ } } + &.franz-form__button--warning { + background: $theme-brand-warning; + + &:hover { + background: darken($theme-brand-warning, 5%); + } + + &:active { + background: lighten($theme-brand-warning, 5%); + } + } + &.franz-form__button--inverted { background: none; padding: 10px 20px; -- cgit v1.2.3-70-g09d2 From 33c6e0af4112a927027a2533dea4bea3750e7865 Mon Sep 17 00:00:00 2001 From: Danny Qiu Date: Fri, 29 Dec 2017 01:33:42 -0500 Subject: Add button to clear global cache and all services --- src/actions/app.js | 1 + src/api/server/LocalApi.js | 5 ++++ .../settings/settings/EditSettingsForm.js | 30 ++++++++++++++++++++++ src/containers/settings/EditSettingsScreen.js | 7 +++-- src/i18n/locales/en-US.json | 2 ++ src/stores/AppStore.js | 15 +++++++++++ 6 files changed, 58 insertions(+), 2 deletions(-) (limited to 'src/containers/settings') diff --git a/src/actions/app.js b/src/actions/app.js index e4f648fc9..e6f7f22ba 100644 --- a/src/actions/app.js +++ b/src/actions/app.js @@ -25,4 +25,5 @@ export default { overrideSystemMute: PropTypes.bool, }, toggleMuteApp: {}, + clearAllCache: {}, }; diff --git a/src/api/server/LocalApi.js b/src/api/server/LocalApi.js index fec89f948..d2ce0c9de 100644 --- a/src/api/server/LocalApi.js +++ b/src/api/server/LocalApi.js @@ -41,4 +41,9 @@ export default class LocalApi { const s = session.fromPartition(`persist:service-${serviceId}`); await new Promise(resolve => s.clearCache(resolve)); } + + async clearAppCache() { + const s = session.defaultSession; + await new Promise(resolve => s.clearCache(resolve)); + } } diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index ff398aa33..074a4b731 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js @@ -40,6 +40,14 @@ const messages = defineMessages({ id: 'settings.app.translationHelp', defaultMessage: '!!!Help us to translate Franz into your language.', }, + buttonClearAllCache: { + id: 'settings.app.buttonClearAllCache', + defaultMessage: '!!!Clear global cache for Franz and all services', + }, + buttonClearingAllCache: { + id: 'settings.app.buttonClearingAllCache', + defaultMessage: '!!!Clearing global cache...', + }, buttonSearchForUpdate: { id: 'settings.app.buttonSearchForUpdate', defaultMessage: '!!!Check for updates', @@ -77,6 +85,8 @@ export default class EditSettingsForm extends Component { isUpdateAvailable: PropTypes.bool.isRequired, noUpdateAvailable: PropTypes.bool.isRequired, updateIsReadyToInstall: PropTypes.bool.isRequired, + isClearingAllCache: PropTypes.bool.isRequired, + onClearAllCache: PropTypes.func.isRequired, }; static contextTypes = { @@ -103,6 +113,8 @@ export default class EditSettingsForm extends Component { isUpdateAvailable, noUpdateAvailable, updateIsReadyToInstall, + isClearingAllCache, + onClearAllCache, } = this.props; const { intl } = this.context; @@ -115,6 +127,23 @@ export default class EditSettingsForm extends Component { updateButtonLabelMessage = messages.buttonSearchForUpdate; } + const clearAllCacheButton = isClearingAllCache ? ( + -
+
+ +
+ {(field.value && field.value !== 'delete') || this.state.path ? ( +
+
+
+ +
+
-
- ) : ( - { this.dropzoneRef = node; }} - onDrop={this.onDrop.bind(this)} - className={cssClasses} - multiple={multiple} - accept="image/jpeg, image/png" - > -

Try dropping some files here, or click to select files to upload.

- - )} + ) : ( + { this.dropzoneRef = node; }} + onDrop={this.onDrop.bind(this)} + className={cssClasses} + multiple={multiple} + accept="image/jpeg, image/png" + > + +

+ {textUpload} +

+ + )} +
); } diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js index 8d3a268ad..c26195a1e 100644 --- a/src/containers/settings/EditServiceScreen.js +++ b/src/containers/settings/EditServiceScreen.js @@ -48,7 +48,7 @@ const messages = defineMessages({ }, icon: { id: 'settings.service.form.icon', - defaultMessage: '!!!Icon', + defaultMessage: '!!!Custom icon', }, }); @@ -108,7 +108,7 @@ export default class EditServiceScreen extends Component { }, customIcon: { label: intl.formatMessage(messages.icon), - value: service.hasCustomIcon ? service.icon : false, + value: service.hasCustomUploadedIcon ? service.icon : false, default: null, type: 'file', }, diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index bfb95da04..f3db20aea 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json @@ -127,7 +127,9 @@ "settings.service.form.headlineNotifications": "Notifications", "settings.service.form.headlineBadges": "Unread message badges", "settings.service.form.headlineGeneral": "General", - "settings.service.form.icon": "Icon", + "settings.service.form.icon": "Custom icon", + "settings.service.form.iconDelete": "Delete", + "settings.service.form.iconUpload": "Drop your image, or click here", "settings.service.error.headline": "Error", "settings.service.error.goBack": "Back to services", "settings.service.error.message": "Could not load service recipe.", diff --git a/src/models/Service.js b/src/models/Service.js index 652d2594c..423510c7d 100644 --- a/src/models/Service.js +++ b/src/models/Service.js @@ -25,6 +25,7 @@ export default class Service { @observable isBadgeEnabled = true; @observable isIndirectMessageBadgeEnabled = true; @observable iconUrl = ''; + @observable hasCustomUploadedIcon = false; @observable hasCrashed = false; constructor(data, recipe) { @@ -62,6 +63,8 @@ export default class Service { this.isMuted = data.isMuted !== undefined ? data.isMuted : this.isMuted; + this.hasCustomUploadedIcon = data.hasCustomIcon !== undefined ? data.hasCustomIcon : this.hasCustomUploadedIcon; + this.recipe = recipe; autorun(() => { diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js index 4fb5c9767..f2a8683ba 100644 --- a/src/stores/ServicesStore.js +++ b/src/stores/ServicesStore.js @@ -177,13 +177,21 @@ export default class ServicesStore extends Store { await request._promise; newData.iconUrl = request.result.data.iconUrl; + newData.hasCustomUploadedIcon = true; } this.allServicesRequest.patch((result) => { if (!result) return; + // patch custom icon deletion if (data.customIcon === 'delete') { data.iconUrl = ''; + data.hasCustomUploadedIcon = false; + } + + // patch custom icon url + if (data.customIconUrl) { + data.iconUrl = data.customIconUrl; } Object.assign(result.find(c => c.id === serviceId), newData); @@ -328,7 +336,7 @@ export default class ServicesStore extends Store { } } else if (channel === 'avatar') { const url = args[0]; - if (service.customIconUrl !== url) { + if (service.iconUrl !== url && !service.hasCustomUploadedIcon) { service.customIconUrl = url; this.actions.service.updateService({ diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss index 764bb3158..06176a7af 100644 --- a/src/styles/image-upload.scss +++ b/src/styles/image-upload.scss @@ -1,9 +1,12 @@ .image-upload { position: absolute; - width: 100px; - height: 100px; - border-radius: $theme-border-radius; + width: 140px; + height: 140px; + border: 1px solid $theme-gray-lighter; + border-radius: $theme-border-radius-small; + background: $theme-gray-lightest; overflow: hidden; + margin-top: 5px; &__preview, &__action { @@ -19,7 +22,7 @@ background-size: 100%; background-repeat: no-repeat; background-position: center center; - margin: 5px; + border-radius: 3px; } &__action { @@ -27,6 +30,8 @@ z-index: 10; opacity: 0; transition: opacity 0.5s; + display: flex; + justify-content: center; &-background { position: absolute; @@ -41,6 +46,33 @@ button { position: relative; z-index: 100; + color: #FFF; + + .mdi { + color: #FFF; + } + } + } + + &__dropzone { + text-align: center; + border-radius: 5px; + padding: 10px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + + &__dropzone, + button { + .mdi { + margin-bottom: 5px; + } + + p { + font-size: 10px; + line-height: 10px; } } @@ -49,4 +81,11 @@ opacity: 1; } } +} + +.image-upload-wrapper { + .mdi { + font-size: 40px; + color: $theme-gray-light; + } } \ No newline at end of file diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 283913ab7..cb39717ea 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss @@ -121,9 +121,15 @@ } .service-icon { - width: 30%; - min-width: 100px; + width: 140px; + float: right; + margin-top: 30px; margin-left: 40px; + + label { + font-weight: bold; + letter-spacing: -0.1px; + } } } @@ -167,6 +173,7 @@ &__options { margin-top: 20px; + flex: 1; } &__settings-group { -- cgit v1.2.3-70-g09d2 From 7e784c699554dd85be3e9e219c59578995cadd38 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Wed, 3 Jan 2018 15:22:05 +0100 Subject: feat(Services): Improve user experience of service search --- .../settings/recipes/RecipesDashboard.js | 20 +++++---- .../settings/services/ServicesDashboard.js | 42 +++++++++++++++---- src/components/ui/SearchInput.js | 48 ++++++++-------------- src/containers/settings/ServicesScreen.js | 1 + src/i18n/locales/en-US.json | 1 + src/styles/searchInput.scss | 16 ++++++++ src/styles/settings.scss | 22 +--------- 7 files changed, 85 insertions(+), 65 deletions(-) (limited to 'src/containers/settings') diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js index b6ade5da4..4610c69a5 100644 --- a/src/components/settings/recipes/RecipesDashboard.js +++ b/src/components/settings/recipes/RecipesDashboard.js @@ -16,6 +16,10 @@ const messages = defineMessages({ id: 'settings.recipes.headline', defaultMessage: '!!!Available Services', }, + searchService: { + id: 'settings.searchService', + defaultMessage: '!!!Search service', + }, mostPopularRecipes: { id: 'settings.recipes.mostPopular', defaultMessage: '!!!Most popular', @@ -81,13 +85,7 @@ export default class RecipesDashboard extends Component { return (
- searchRecipes(e)} - onReset={() => resetSearch()} - throttle - /> +

{intl.formatMessage(messages.headline)}

{serviceStatus.length > 0 && serviceStatus.includes('created') && ( @@ -101,7 +99,13 @@ export default class RecipesDashboard extends Component { )} - {/* {!searchNeedle && ( */} + searchRecipes(e)} + onReset={() => resetSearch()} + autoFocus + throttle + />
- filterServices({ needle })} - onReset={() => resetFilter()} - /> +

{intl.formatMessage(messages.headline)}

+ {!isLoading && ( + filterServices({ needle })} + onReset={() => resetFilter()} + autoFocus + /> + )} {!isLoading && servicesRequestFailed && (
)} - {!isLoading && services.length === 0 && ( + {!isLoading && services.length === 0 && !searchNeedle && (

@@ -132,6 +150,16 @@ export default class ServicesDashboard extends Component { {intl.formatMessage(messages.discoverServices)}

)} + {!isLoading && services.length === 0 && searchNeedle && ( +
+

+ + + + {intl.formatMessage(messages.noServiceFound)} +

+
+ )} {isLoading ? ( ) : ( diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js index bca412cef..a94cde201 100644 --- a/src/components/ui/SearchInput.js +++ b/src/components/ui/SearchInput.js @@ -9,36 +9,46 @@ import { debounce } from 'lodash'; export default class SearchInput extends Component { static propTypes = { value: PropTypes.string, - defaultValue: PropTypes.string, + placeholder: PropTypes.string, className: PropTypes.string, onChange: PropTypes.func, onReset: PropTypes.func, name: PropTypes.string, throttle: PropTypes.bool, throttleDelay: PropTypes.number, + autoFocus: PropTypes.bool, }; static defaultProps = { value: '', - defaultValue: '', + placeholder: '', className: '', name: uuidv1(), throttle: false, throttleDelay: 250, onChange: () => null, onReset: () => null, + autoFocus: false, } constructor(props) { super(props); this.state = { - value: props.value || props.defaultValue, + value: props.value, }; this.throttledOnChange = debounce(this.throttledOnChange, this.props.throttleDelay); } + componentDidMount() { + const { autoFocus } = this.props; + + if (autoFocus) { + this.input.focus(); + } + } + onChange(e) { const { throttle, onChange } = this.props; const { value } = e.target; @@ -52,26 +62,6 @@ export default class SearchInput extends Component { } } - onClick() { - const { defaultValue } = this.props; - const { value } = this.state; - - if (value === defaultValue) { - this.setState({ value: '' }); - } - - this.input.focus(); - } - - onBlur() { - const { defaultValue } = this.props; - const { value } = this.state; - - if (value === '') { - this.setState({ value: defaultValue }); - } - } - throttledOnChange(e) { const { onChange } = this.props; @@ -79,8 +69,8 @@ export default class SearchInput extends Component { } reset() { - const { defaultValue, onReset } = this.props; - this.setState({ value: defaultValue }); + const { onReset } = this.props; + this.setState({ value: '' }); onReset(); } @@ -88,7 +78,7 @@ export default class SearchInput extends Component { input = null; render() { - const { className, name, defaultValue } = this.props; + const { className, name, placeholder } = this.props; const { value } = this.state; return ( @@ -101,18 +91,16 @@ export default class SearchInput extends Component {
{recipe.message && ( diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index 074a4b731..4f027638c 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js @@ -40,13 +40,13 @@ const messages = defineMessages({ id: 'settings.app.translationHelp', defaultMessage: '!!!Help us to translate Franz into your language.', }, + cacheInfo: { + id: 'settings.app.cacheInfo', + defaultMessage: '!!!Franz cache is currently using {size} of disk space.', + }, buttonClearAllCache: { id: 'settings.app.buttonClearAllCache', - defaultMessage: '!!!Clear global cache for Franz and all services', - }, - buttonClearingAllCache: { - id: 'settings.app.buttonClearingAllCache', - defaultMessage: '!!!Clearing global cache...', + defaultMessage: '!!!Clear cache', }, buttonSearchForUpdate: { id: 'settings.app.buttonSearchForUpdate', @@ -87,6 +87,7 @@ export default class EditSettingsForm extends Component { updateIsReadyToInstall: PropTypes.bool.isRequired, isClearingAllCache: PropTypes.bool.isRequired, onClearAllCache: PropTypes.func.isRequired, + cacheSize: PropTypes.string.isRequired, }; static contextTypes = { @@ -115,6 +116,7 @@ export default class EditSettingsForm extends Component { updateIsReadyToInstall, isClearingAllCache, onClearAllCache, + cacheSize, } = this.props; const { intl } = this.context; @@ -127,23 +129,6 @@ export default class EditSettingsForm extends Component { updateButtonLabelMessage = messages.buttonSearchForUpdate; } - const clearAllCacheButton = isClearingAllCache ? ( -