From caa86d0367e33dd71c76285183597363d601e139 Mon Sep 17 00:00:00 2001 From: okauppinen Date: Tue, 25 Jul 2023 17:20:30 +0300 Subject: [PATCH 01/10] add colors --- src/react/components/buttons/IconButton.jsx | 52 ++++++++++++++------- 1 file changed, 34 insertions(+), 18 deletions(-) diff --git a/src/react/components/buttons/IconButton.jsx b/src/react/components/buttons/IconButton.jsx index 7a3784b2a6..c9f289af0c 100644 --- a/src/react/components/buttons/IconButton.jsx +++ b/src/react/components/buttons/IconButton.jsx @@ -5,21 +5,35 @@ import { ThemeConsumer } from '../../util'; import { getColorEffect, EFFECT } from '../../theme'; import styled from 'styled-components'; import { PlusOutlined, EditOutlined, QuestionCircleOutlined, DeleteOutlined, CheckOutlined, StopOutlined} from '@ant-design/icons'; -import { red, green } from '@ant-design/colors' import { Forward } from '../icons/Forward' import { Backward } from '../icons/Backward' +const COLORS = { + red: '#f5222d', + green: '#52c41a', + blue: '#0290ff', + hover: '#ffd400' +}; + +const TYPE_COLORS = { + accept: COLORS.green, + reject: COLORS.red, + delete: COLORS.red, + info: COLORS.blue +}; + // Note! AntD buttons default at 32x32px // If the font-size of the icon is > 32px it will be clipped by at least Safari // Let the user of this component define the size of the button instead of doing it here. const BorderlessButton = styled(Button)` + color: ${props => props.$color}; border: none; background: none; padding: 0px; pointer-events: ${props => props.disabled ? 'none' : 'auto'}; font-size: ${props => props.$iconSize}px; &:hover { - color: ${props => props.color}; + color: ${props => props.$hover}; background: none; } &:disabled { @@ -27,11 +41,12 @@ const BorderlessButton = styled(Button)` } `; const BorderedButton = styled(Button)` + color: ${props => props.$color}; pointer-events: ${props => props.disabled ? 'none' : 'auto'}; font-size: ${props => props.$iconSize}px; &:hover { - color: ${props => props.color}; - border-color: ${props => props.color}; + color: ${props => props.$hover}; + border-color: ${props => props.$hover}; } `; @@ -45,10 +60,10 @@ const DisabledWrapper = styled('div')` const getPredefinedIcon = (type) => { if (type === 'accept') { - return ; + return ; } if (type === 'reject') { - return ; + return ; } if (type === 'add') { return ; @@ -57,7 +72,7 @@ const getPredefinedIcon = (type) => { return ; } if (type === 'info') { - return ; + return ; } if (type === 'next') { return ; @@ -66,7 +81,7 @@ const getPredefinedIcon = (type) => { return ; } if (type === 'delete') { - return + return } return null; } @@ -87,27 +102,28 @@ const getConfirmProps = (type) => { }; }; -const ThemeButton = ThemeConsumer(({ theme, bordered, iconSize, ...rest }) => { - let color = theme?.color?.accent; - if (color && Oskari.util.isDarkColor(color)) { - color = theme?.color?.primary; +const ThemeButton = ThemeConsumer(({ theme, bordered, iconSize, color, ...rest }) => { + let hover = theme?.color?.accent; + if (hover && Oskari.util.isDarkColor(hover)) { + hover = theme?.color?.primary; } - if (!color) { - color = '#ffd400'; - } else if (Oskari.util.isDarkColor(color)) { - color = getColorEffect(color, EFFECT.LIGHTEN); + if (!hover) { + hover = COLORS.hover; + } else if (Oskari.util.isDarkColor(hover)) { + hover = getColorEffect(hover, EFFECT.LIGHTEN); } if (bordered) { - return + return } // default - return + return }); export const IconButton = ({ type, title = type ? : '', icon = type ? getPredefinedIcon(type) : null, + color = TYPE_COLORS[type], onClick, onConfirm, disabled = false, From d458dc3c47fac65a1e6b65374198a7062827c179 Mon Sep 17 00:00:00 2001 From: okauppinen Date: Tue, 25 Jul 2023 17:22:31 +0300 Subject: [PATCH 02/10] more props validation --- src/react/components/buttons/IconButton.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/react/components/buttons/IconButton.jsx b/src/react/components/buttons/IconButton.jsx index c9f289af0c..ca4aec5ba4 100644 --- a/src/react/components/buttons/IconButton.jsx +++ b/src/react/components/buttons/IconButton.jsx @@ -174,5 +174,8 @@ IconButton.propTypes = { title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), icon: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), onClick: PropTypes.func, - onConfirm: PropTypes.func + onConfirm: PropTypes.func, + disabled: PropTypes.bool, + color: PropTypes.string, + iconSize: PropTypes.number }; From 394b1ebd1f643c8b6572bfa89683085e41646c7b Mon Sep 17 00:00:00 2001 From: okauppinen Date: Tue, 25 Jul 2023 17:46:18 +0300 Subject: [PATCH 03/10] render whole button in themebutton --- src/react/components/buttons/IconButton.jsx | 50 +++++++++------------ 1 file changed, 22 insertions(+), 28 deletions(-) diff --git a/src/react/components/buttons/IconButton.jsx b/src/react/components/buttons/IconButton.jsx index ca4aec5ba4..c925d27c1d 100644 --- a/src/react/components/buttons/IconButton.jsx +++ b/src/react/components/buttons/IconButton.jsx @@ -102,7 +102,16 @@ const getConfirmProps = (type) => { }; }; -const ThemeButton = ThemeConsumer(({ theme, bordered, iconSize, color, ...rest }) => { +const ThemeButton = ThemeConsumer(({ + theme, + type, + bordered = false, + disabled = false, + icon = type ? getPredefinedIcon(type) : null, + iconSize = 16, + color = TYPE_COLORS[type], + ...rest +}) => { let hover = theme?.color?.accent; if (hover && Oskari.util.isDarkColor(hover)) { hover = theme?.color?.primary; @@ -112,22 +121,20 @@ const ThemeButton = ThemeConsumer(({ theme, bordered, iconSize, color, ...rest } } else if (Oskari.util.isDarkColor(hover)) { hover = getColorEffect(hover, EFFECT.LIGHTEN); } - if (bordered) { - return - } - // default - return + const ButtonNode = bordered ? BorderedButton : BorderlessButton; + return ( + + + {icon} + + + ); }); export const IconButton = ({ type, title = type ? : '', - icon = type ? getPredefinedIcon(type) : null, - color = TYPE_COLORS[type], - onClick, onConfirm, - disabled = false, - iconSize = 16, ...rest }) => { if (onConfirm) { @@ -137,15 +144,11 @@ export const IconButton = ({ onConfirm={onConfirm} okButtonProps={{className: `t_button t_${type || 'ok'}`}} cancelButtonProps={{className: 't_button t_cancel'}} - disabled={disabled} + disabled={rest.disabled === true} placement={title ? 'bottom' : 'top'} { ...getConfirmProps(type) }> - - - {icon} - - + ); @@ -153,20 +156,11 @@ export const IconButton = ({ if (title) { return ( - - - {icon} - - + ); } - return ( - - {icon} - - ); - + return ; }; IconButton.propTypes = { From a89591277423dbff8ca614ab042f2621d4de4ed6 Mon Sep 17 00:00:00 2001 From: okauppinen Date: Tue, 25 Jul 2023 17:49:57 +0300 Subject: [PATCH 04/10] add type related test class --- src/react/components/buttons/IconButton.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/react/components/buttons/IconButton.jsx b/src/react/components/buttons/IconButton.jsx index c925d27c1d..9921cea7a1 100644 --- a/src/react/components/buttons/IconButton.jsx +++ b/src/react/components/buttons/IconButton.jsx @@ -110,8 +110,12 @@ const ThemeButton = ThemeConsumer(({ icon = type ? getPredefinedIcon(type) : null, iconSize = 16, color = TYPE_COLORS[type], + className = '', ...rest }) => { + if (type && !className.includes(`t_${type}`)) { + className = `${className} t_${type}`; + } let hover = theme?.color?.accent; if (hover && Oskari.util.isDarkColor(hover)) { hover = theme?.color?.primary; @@ -124,7 +128,7 @@ const ThemeButton = ThemeConsumer(({ const ButtonNode = bordered ? BorderedButton : BorderlessButton; return ( - + {icon} From a56452e4f5b11995e8f74d9d30a1f3909455611d Mon Sep 17 00:00:00 2001 From: okauppinen Date: Wed, 26 Jul 2023 00:53:15 +0300 Subject: [PATCH 05/10] add localization --- bundles/framework/oskariui/resources/locale/en.js | 5 ++++- bundles/framework/oskariui/resources/locale/fi.js | 5 ++++- bundles/framework/oskariui/resources/locale/fr.js | 10 +++++++++- bundles/framework/oskariui/resources/locale/is.js | 10 +++++++++- bundles/framework/oskariui/resources/locale/ru.js | 10 +++++++++- bundles/framework/oskariui/resources/locale/sv.js | 5 ++++- 6 files changed, 39 insertions(+), 6 deletions(-) diff --git a/bundles/framework/oskariui/resources/locale/en.js b/bundles/framework/oskariui/resources/locale/en.js index dc0fe460c7..b73b1ca4be 100644 --- a/bundles/framework/oskariui/resources/locale/en.js +++ b/bundles/framework/oskariui/resources/locale/en.js @@ -19,7 +19,10 @@ Oskari.registerLocalization({ search: 'Search', reset: 'Reset', copy: 'Copy to clipboard', - clear: 'Clear' + clear: 'Clear', + accept: 'Accept', + reject: 'Reject', + info: 'Show more information' }, messages: { confirm: 'Are you sure you want to continue?', diff --git a/bundles/framework/oskariui/resources/locale/fi.js b/bundles/framework/oskariui/resources/locale/fi.js index 724e2efc75..7d9d6a0dd8 100644 --- a/bundles/framework/oskariui/resources/locale/fi.js +++ b/bundles/framework/oskariui/resources/locale/fi.js @@ -19,7 +19,10 @@ Oskari.registerLocalization({ search: 'Etsi', reset: 'Tyhjennä', copy: 'Kopioi leikepöydälle', - clear: 'Tyhjennä' + clear: 'Tyhjennä', + accept: 'Hyväksy', + reject: 'Hylkää', + info: 'Näytä lisätietoa' }, messages: { confirm: 'Haluatko varmasti jatkaa?', diff --git a/bundles/framework/oskariui/resources/locale/fr.js b/bundles/framework/oskariui/resources/locale/fr.js index 8f1b429c3e..def3e05c69 100644 --- a/bundles/framework/oskariui/resources/locale/fr.js +++ b/bundles/framework/oskariui/resources/locale/fr.js @@ -13,7 +13,15 @@ Oskari.registerLocalization({ yes: 'Oui', no: 'Non', next: 'Suivant', - previous: 'Précédent' + previous: 'Précédent', + print: 'Imprimer', + search: 'Recherche', + reset: 'Effacer', + copy: 'Copier dans le presse-papier', + clear: 'Effacer', + accept: 'Accepter', + reject: 'Refuser', + info: 'Afficher plus d\'informations' }, table: { sort: { diff --git a/bundles/framework/oskariui/resources/locale/is.js b/bundles/framework/oskariui/resources/locale/is.js index c6f07bf82f..79fb0b84b6 100644 --- a/bundles/framework/oskariui/resources/locale/is.js +++ b/bundles/framework/oskariui/resources/locale/is.js @@ -13,7 +13,15 @@ Oskari.registerLocalization({ yes: 'Já', no: 'Nei', next: 'Næst', - previous: 'Fyrri' + previous: 'Fyrri', + print: 'Prenta', + search: 'Leita', + reset: 'Hreinsa', + copy: 'Afrita á klemmuspjald', + clear: 'Hreinsa', + accept: 'Samþykkja', + reject: 'Hafna', + info: 'Sýna frekari upplýsingar' }, messages: { confirmDelete: 'Viss um að eyða?' diff --git a/bundles/framework/oskariui/resources/locale/ru.js b/bundles/framework/oskariui/resources/locale/ru.js index 15a9e184bd..07c5038ced 100644 --- a/bundles/framework/oskariui/resources/locale/ru.js +++ b/bundles/framework/oskariui/resources/locale/ru.js @@ -12,7 +12,15 @@ Oskari.registerLocalization({ yes: 'Да', no: 'Нет', next: 'Следующий', - previous: 'Предыдущий' + previous: 'Предыдущий', + print: 'Распечатать', + search: 'Поиск', + reset: 'Очистить', + copy: 'Скопировать в буфер обмена', + clear: 'Очистить', + accept: 'Принять', + reject: 'Отклонить', + info: 'Показать больше информации' }, table: { sort: { diff --git a/bundles/framework/oskariui/resources/locale/sv.js b/bundles/framework/oskariui/resources/locale/sv.js index fb4c2dcb21..61e9b3c328 100644 --- a/bundles/framework/oskariui/resources/locale/sv.js +++ b/bundles/framework/oskariui/resources/locale/sv.js @@ -19,7 +19,10 @@ Oskari.registerLocalization({ search: 'Sök', reset: 'Återställa', copy: 'Kopiera till klippbordet', - clear: 'Rensa' + clear: 'Rensa', + accept: 'Acceptera', + reject: 'Avvisa', + info: 'Visa mera information' }, messages: { confirm: 'Är du säker på att du vill fortsätta?', From 6a805cc9cd19bca8ec3a012763b6546e206cae29 Mon Sep 17 00:00:00 2001 From: okauppinen Date: Wed, 26 Jul 2023 00:54:32 +0300 Subject: [PATCH 06/10] use color for add category --- bundles/framework/myplaces3/MyPlacesLayerControls.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/bundles/framework/myplaces3/MyPlacesLayerControls.jsx b/bundles/framework/myplaces3/MyPlacesLayerControls.jsx index 7d4bcecc0c..0a655c91de 100644 --- a/bundles/framework/myplaces3/MyPlacesLayerControls.jsx +++ b/bundles/framework/myplaces3/MyPlacesLayerControls.jsx @@ -7,9 +7,6 @@ import { SecondaryButton, ButtonContainer, DeleteButton, IconButton } from 'oska import { PlusCircleOutlined, ExportOutlined } from '@ant-design/icons'; import { green } from '@ant-design/colors'; -const AddIcon = styled(PlusCircleOutlined)` - color: ${green.primary} -`; const StyledControls = styled('div')` display: flex; width: 100%; @@ -122,7 +119,8 @@ export const MyPlacesLayerControls = (props) => { } + icon={} + color={green.primary} title={} className='t_add' onClick={() => controller.openLayerDialog()} From cde7712fdf69546ac191de1ce4b7d12baa898d75 Mon Sep 17 00:00:00 2001 From: okauppinen Date: Wed, 26 Jul 2023 13:36:30 +0300 Subject: [PATCH 07/10] use iconbutton --- .../LayerAnalyticsList.jsx | 10 ++++----- .../view/flyout/CollapseTools.jsx | 21 +++++++++++-------- 2 files changed, 17 insertions(+), 14 deletions(-) diff --git a/bundles/admin/admin-layeranalytics/LayerAnalyticsList.jsx b/bundles/admin/admin-layeranalytics/LayerAnalyticsList.jsx index 661bb2250e..be3149a2cd 100644 --- a/bundles/admin/admin-layeranalytics/LayerAnalyticsList.jsx +++ b/bundles/admin/admin-layeranalytics/LayerAnalyticsList.jsx @@ -2,8 +2,8 @@ import React, { Fragment, useRef } from 'react'; import PropTypes from 'prop-types'; import { Table, getSorterFor } from 'oskari-ui/components/Table'; import { Message, Space, Spin, Tooltip, TextInput, Select, Option, Button } from 'oskari-ui'; -import { DeleteButton, SecondaryButton } from 'oskari-ui/components/buttons'; -import { EditOutlined, SearchOutlined } from '@ant-design/icons'; +import { DeleteButton, SecondaryButton, IconButton } from 'oskari-ui/components/buttons'; +import { SearchOutlined } from '@ant-design/icons'; import styled from 'styled-components'; import { ThemeConsumer } from 'oskari-ui/util'; @@ -204,9 +204,9 @@ export const LayerAnalyticsList = ThemeConsumer(({ theme, analyticsData, isLoadi - }> - layerEditorCallback(item.id) } /> - + } + onClick={ () => layerEditorCallback(item.id) } /> } diff --git a/bundles/framework/announcements/view/flyout/CollapseTools.jsx b/bundles/framework/announcements/view/flyout/CollapseTools.jsx index d04cf27b3f..ee0034785f 100644 --- a/bundles/framework/announcements/view/flyout/CollapseTools.jsx +++ b/bundles/framework/announcements/view/flyout/CollapseTools.jsx @@ -1,9 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { DeleteButton } from 'oskari-ui/components/buttons'; -import { Tooltip, Message } from 'oskari-ui'; -import { EditOutlined, EyeOutlined } from '@ant-design/icons'; +import { DeleteButton, IconButton } from 'oskari-ui/components/buttons'; +import { Message } from 'oskari-ui'; +import { EyeOutlined } from '@ant-design/icons'; const ToolRow = styled.div` margin-left: 10px; @@ -22,14 +22,17 @@ export const CollapseTools = ({ announcementId, toolController }) => { return ( event.stopPropagation()}> - }> - toolController.preview(announcementId) }/> - + } + title={} + onClick = { () => toolController.preview(announcementId) }/> - }> - toolController.showEditPopup(announcementId) }/> - + } + onClick = { () => toolController.showEditPopup(announcementId) }/> Date: Wed, 26 Jul 2023 13:38:24 +0300 Subject: [PATCH 08/10] remove delete icon --- src/react/components/icons/Delete.jsx | 13 ------------- src/react/components/icons/index.js | 1 - 2 files changed, 14 deletions(-) delete mode 100644 src/react/components/icons/Delete.jsx diff --git a/src/react/components/icons/Delete.jsx b/src/react/components/icons/Delete.jsx deleted file mode 100644 index 5a9371b081..0000000000 --- a/src/react/components/icons/Delete.jsx +++ /dev/null @@ -1,13 +0,0 @@ - -import styled from 'styled-components'; -import { red } from '@ant-design/colors' -import { getColorEffect, EFFECT } from '../../theme'; -import { DeleteOutlined } from '@ant-design/icons'; - -export const Delete = styled(DeleteOutlined)` - color: ${red.primary}; - cursor: pointer; - &:hover { - color: ${getColorEffect(red.primary, EFFECT.AUTO)}; - } -`; diff --git a/src/react/components/icons/index.js b/src/react/components/icons/index.js index 6df8109e75..2b7ad0ebca 100644 --- a/src/react/components/icons/index.js +++ b/src/react/components/icons/index.js @@ -1,7 +1,6 @@ export { Mandatory as MandatoryIcon } from './Mandatory'; export { Info as InfoIcon } from './Info'; export { Metadata as MetadataIcon } from './Metadata'; -export { Delete as DeleteIcon } from './Delete'; export { Return as ReturnIcon } from './Return'; export { Forward as ForwardIcon } from './Forward'; export { Backward as BackwardIcon } from './Backward'; From 6d42621d0d2e4e549fa93643d2db9dab796d3088 Mon Sep 17 00:00:00 2001 From: okauppinen Date: Wed, 26 Jul 2023 13:40:06 +0300 Subject: [PATCH 09/10] use iconbutton --- src/react/components/buttons/DeleteButton.jsx | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/src/react/components/buttons/DeleteButton.jsx b/src/react/components/buttons/DeleteButton.jsx index b2a61d3450..ad16df840a 100644 --- a/src/react/components/buttons/DeleteButton.jsx +++ b/src/react/components/buttons/DeleteButton.jsx @@ -1,15 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { Message, Confirm, Button,Tooltip } from 'oskari-ui'; -import { IconButton } from 'oskari-ui/components/buttons'; -import { SecondaryButton } from './'; -import { DeleteIcon } from '../icons' +import { Message, Confirm, Tooltip } from 'oskari-ui'; +import { SecondaryButton, IconButton } from './'; -const StyledButton = styled(Button)` - font-size: 16px; - pointer-events: ${props => props.disabled ? 'none' : 'auto'}; -`; /** * This + pointer-events style on button components are used to fix tooltip * not disappearing if the button is disabled. Probably caused by styled-components + antd problem. @@ -21,16 +15,22 @@ const DisabledWrapper = styled('div')` const getButton = (type, disabled) => { const props = { className: 't_button t_delete', - disabled - } + disabled, + type: 'delete', + title: null + }; if (type === 'icon') { - return } {...props}/>; + return ; } if (type === 'button') { - return ; + return ; } if (type === 'label') { - return ; + return ( + + ; + + ); } }; @@ -55,9 +55,7 @@ export const DeleteButton = ({ okType='danger' placement={placement}> - - {getButton(type, disabled)} - + {getButton(type, disabled)} ); From dade78a55aef5185fc3ad43088135cb72fdb7cd4 Mon Sep 17 00:00:00 2001 From: okauppinen Date: Tue, 8 Aug 2023 12:36:47 +0300 Subject: [PATCH 10/10] add active color --- src/react/components/buttons/IconButton.jsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/react/components/buttons/IconButton.jsx b/src/react/components/buttons/IconButton.jsx index 9921cea7a1..a5aa89c036 100644 --- a/src/react/components/buttons/IconButton.jsx +++ b/src/react/components/buttons/IconButton.jsx @@ -26,7 +26,7 @@ const TYPE_COLORS = { // If the font-size of the icon is > 32px it will be clipped by at least Safari // Let the user of this component define the size of the button instead of doing it here. const BorderlessButton = styled(Button)` - color: ${props => props.$color}; + color: ${props => props.$active || props.$color}; border: none; background: none; padding: 0px; @@ -41,9 +41,10 @@ const BorderlessButton = styled(Button)` } `; const BorderedButton = styled(Button)` - color: ${props => props.$color}; + color: ${props => props.$active || props.$color}; pointer-events: ${props => props.disabled ? 'none' : 'auto'}; font-size: ${props => props.$iconSize}px; + border-color: ${props => props.$active}; &:hover { color: ${props => props.$hover}; border-color: ${props => props.$hover}; @@ -111,6 +112,7 @@ const ThemeButton = ThemeConsumer(({ iconSize = 16, color = TYPE_COLORS[type], className = '', + active = false, ...rest }) => { if (type && !className.includes(`t_${type}`)) { @@ -126,9 +128,10 @@ const ThemeButton = ThemeConsumer(({ hover = getColorEffect(hover, EFFECT.LIGHTEN); } const ButtonNode = bordered ? BorderedButton : BorderlessButton; + const activeColor = active ? hover : null; return ( - + {icon} @@ -175,5 +178,6 @@ IconButton.propTypes = { onConfirm: PropTypes.func, disabled: PropTypes.bool, color: PropTypes.string, - iconSize: PropTypes.number + iconSize: PropTypes.number, + active: PropTypes.bool };