Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[GH-190] Add global option to disable randomized card icons #310

Merged
merged 1 commit into from
Apr 26, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions webapp/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@
"Sidebar.logout": "Log out",
"Sidebar.no-views-in-board": "No pages inside",
"Sidebar.occitan": "Occitan",
"Sidebar.random-icons": "Random icons",
"Sidebar.russian": "Russian",
"Sidebar.select-a-template": "Select a template",
"Sidebar.set-language": "Set language",
Expand Down
3 changes: 2 additions & 1 deletion webapp/src/components/centerPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {CardFilter} from '../cardFilter'
import mutator from '../mutator'
import {Utils} from '../utils'
import {BoardTree} from '../viewModel/boardTree'
import {UserSettings} from '../userSettings'

import './centerPanel.scss'
import CardDialog from './cardDialog'
Expand Down Expand Up @@ -217,7 +218,7 @@ class CenterPanel extends React.Component<Props, State> {
}
}
card.properties = {...card.properties, ...propertiesThatMeetFilters}
if (!card.icon) {
if (!card.icon && UserSettings.prefillRandomIcons) {
card.icon = BlockIcons.shared.randomIcon()
}
await mutator.insertBlock(
Expand Down
15 changes: 14 additions & 1 deletion webapp/src/components/sidebar/sidebarSettingsMenu.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useContext} from 'react'
import React, {useContext, useState} from 'react'
import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'

import {Archiver} from '../../archiver'
import {darkTheme, defaultTheme, lightTheme, setTheme, Theme} from '../../theme'
import Menu from '../../widgets/menu'
import MenuWrapper from '../../widgets/menuWrapper'
import {SetLanguageContext} from '../../setLanguageContext'
import {UserSettings} from '../../userSettings'

import './sidebarSettingsMenu.scss'

Expand All @@ -26,6 +27,12 @@ const SidebarSettingsMenu = React.memo((props: Props) => {
props.setWhiteLogo(whiteLogo)
}

const [randomIcons, setRandomIcons] = useState(UserSettings.prefillRandomIcons)
const toggleRandomIcons = () => {
UserSettings.prefillRandomIcons = !UserSettings.prefillRandomIcons
setRandomIcons(!randomIcons)
}
Copy link
Contributor Author

@Johennes Johennes Apr 21, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is admittedly a little odd because the setting state is maintained in two separate spots (UserSettings and randomIcons) but I couldn't find a better way to make the component re-render when changing the setting. Would be happy to hear recommendations on this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, probably we can move this into its own hook and make the concept of "userSettings" something that is properly encapsulated. But for now I think is ok as is now.


return (
<div className='SidebarSettingsMenu'>
<MenuWrapper>
Expand Down Expand Up @@ -128,6 +135,12 @@ const SidebarSettingsMenu = React.memo((props: Props) => {
onClick={async () => updateTheme(null)}
/>
</Menu.SubMenu>
<Menu.Switch
id='random-icons'
name={intl.formatMessage({id: 'Sidebar.random-icons', defaultMessage: 'Random icons'})}
isOn={randomIcons}
onClick={async () => toggleRandomIcons()}
/>
</Menu>
</MenuWrapper>
</div>
Expand Down
14 changes: 14 additions & 0 deletions webapp/src/userSettings.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

class UserSettings {
static get prefillRandomIcons(): boolean {
return localStorage.getItem('randomIcons') !== 'false'
}

static set prefillRandomIcons(newValue: boolean) {
localStorage.setItem('randomIcons', JSON.stringify(newValue))
}
}

export {UserSettings}