From d0e5a83a9441cb4c6883f4fb5bc076a15a832a4e Mon Sep 17 00:00:00 2001 From: Leszek Date: Fri, 7 Jun 2024 15:27:18 +0200 Subject: [PATCH 01/19] replace multiple bem.KoboButton with Button --- .../dataAttachments/connect-projects.scss | 2 +- .../dataAttachmentColumnsForm.es6 | 21 ++++--- jsapp/js/components/drawer.es6 | 23 ++++--- jsapp/js/components/header/accountMenu.tsx | 13 ++-- .../js/components/library/librarySidebar.es6 | 18 +++--- jsapp/js/components/map.scss | 2 +- jsapp/js/components/mapSettings.es6 | 32 +++++++--- .../components/modalForms/assetTagsForm.es6 | 26 +++----- .../modalForms/bulkEditSubmissionsForm.es6 | 62 ++++++++++--------- .../js/components/modalForms/languageForm.es6 | 17 ++--- jsapp/scss/components/_kobo.drawer.scss | 4 ++ 11 files changed, 126 insertions(+), 94 deletions(-) diff --git a/jsapp/js/components/dataAttachments/connect-projects.scss b/jsapp/js/components/dataAttachments/connect-projects.scss index 7aaae95d90..c110b224a8 100644 --- a/jsapp/js/components/dataAttachments/connect-projects.scss +++ b/jsapp/js/components/dataAttachments/connect-projects.scss @@ -179,7 +179,7 @@ .modal__footer { text-align: center; - button { + .data-attachment-modal-footer-button { padding-left: sizes.$x60; padding-right: sizes.$x60; } diff --git a/jsapp/js/components/dataAttachments/dataAttachmentColumnsForm.es6 b/jsapp/js/components/dataAttachments/dataAttachmentColumnsForm.es6 index 05d1ee2c7b..431686141a 100644 --- a/jsapp/js/components/dataAttachments/dataAttachmentColumnsForm.es6 +++ b/jsapp/js/components/dataAttachments/dataAttachmentColumnsForm.es6 @@ -5,6 +5,7 @@ import MultiCheckbox from 'js/components/common/multiCheckbox'; import bem from 'js/bem'; import {actions} from 'js/actions'; import LoadingSpinner from 'js/components/common/loadingSpinner'; +import Button from 'js/components/common/button'; /** * Attributes from source needed to generate `columnsToDisplay` @@ -182,7 +183,7 @@ class DataAttachmentColumnsForm extends React.Component { render() { return ( - // TODO: Use BEM elements + // TODO: Don't use BEM elements // See: https://github.com/kobotoolbox/kpi/issues/3912
@@ -234,14 +235,16 @@ class DataAttachmentColumnsForm extends React.Component { }
- - {t('Accept')} - +
diff --git a/jsapp/js/components/drawer.es6 b/jsapp/js/components/drawer.es6 index b29b8a1ae7..63a0e3f8b1 100644 --- a/jsapp/js/components/drawer.es6 +++ b/jsapp/js/components/drawer.es6 @@ -17,6 +17,7 @@ import {ROUTES, PROJECTS_ROUTES} from 'js/router/routerConstants'; import SidebarFormsList from '../lists/sidebarForms'; import envStore from 'js/envStore'; import {router, routerIsActive, withRouter} from '../router/legacy'; +import Button from 'js/components/common/button'; const AccountSidebar = lazy(() => import('js/account/accountSidebar')); @@ -67,16 +68,20 @@ const FormSidebar = observer( } render() { return ( - - - {t('new')} - + <> +
@@ -405,13 +410,22 @@ class MapSettings extends React.Component { {[TABS.get('geoquestion').id, TABS.get('colors').id, TABS.get('querylimit').id].includes(activeTab) && {userCan('change_asset', this.props.asset) && queryLimit !== QUERY_LIMIT_DEFAULT && - - {t('Reset')} - + + /> diff --git a/jsapp/js/components/RESTServices.scss b/jsapp/js/components/RESTServices.scss index 56e18b904b..33de8a3cae 100644 --- a/jsapp/js/components/RESTServices.scss +++ b/jsapp/js/components/RESTServices.scss @@ -53,14 +53,6 @@ } .rest-services-list__header-right {float: right;} - - .rest-services-list__header-back-button { - @extend .mdl-button, .mdl-button--icon; - - i { - vertical-align: middle; - } - } } // custom styles for RESTServicesForm diff --git a/jsapp/js/components/RESTServices/RESTServiceLogs.es6 b/jsapp/js/components/RESTServices/RESTServiceLogs.es6 index 7c5133198d..69f320ced4 100644 --- a/jsapp/js/components/RESTServices/RESTServiceLogs.es6 +++ b/jsapp/js/components/RESTServices/RESTServiceLogs.es6 @@ -15,6 +15,7 @@ import { HOOK_LOG_STATUSES, MODAL_TYPES } from '../../constants'; +import Button from 'js/components/common/button'; export default class RESTServiceLogs extends React.Component { constructor(props){ @@ -203,13 +204,16 @@ export default class RESTServiceLogs extends React.Component { renderHeader() { return (
- - - {t('Back to REST Services')} - + + + - - + + + + /> {userCanSeeEditIcon && userHasPermForSubmission( @@ -588,15 +590,17 @@ export class DataTable extends React.Component { this.props.asset, row.original ) && ( - + /> )} ), diff --git a/jsapp/js/components/submissions/tableBulkOptions.tsx b/jsapp/js/components/submissions/tableBulkOptions.tsx index 1942367e13..c864adae66 100644 --- a/jsapp/js/components/submissions/tableBulkOptions.tsx +++ b/jsapp/js/components/submissions/tableBulkOptions.tsx @@ -27,6 +27,8 @@ import type { ReactTableStateFilteredItem, } from 'js/components/submissions/table.types'; import Button from 'js/components/common/button'; +import Badge from 'js/components/common/badge'; +import Icon from 'js/components/common/icon'; interface TableBulkOptionsProps { asset: AssetResponse; @@ -200,16 +202,37 @@ class TableBulkOptions extends React.Component { return ( {selectedCount > 1 && - - {selectedLabel} - × - + + {selectedLabel} +   + + + } + /> } - {selectedCount > 1 && :} - {Object.keys(this.props.selectedRows).length > 0 && - + + } + > {(userCan(PERMISSIONS_CODENAMES.validate_submissions, this.props.asset) || userCanPartially(PERMISSIONS_CODENAMES.validate_submissions, this.props.asset)) && VALIDATION_STATUS_OPTIONS.map((item, n) => { return ( diff --git a/jsapp/scss/components/_kobo.bem.ui.scss b/jsapp/scss/components/_kobo.bem.ui.scss index b2dd3d28ce..16eb640905 100644 --- a/jsapp/scss/components/_kobo.bem.ui.scss +++ b/jsapp/scss/components/_kobo.bem.ui.scss @@ -211,14 +211,6 @@ &:hover { color: lighten(colors.$kobo-blue, 10%); } - - &::after { - content: '\25BC'; - font-size: 8px; - margin-left: 3px; - display: inline-block; - vertical-align: 1px; - } } .popover-menu__content { From af325887fb60e6f58829a4861d613c269aec9c03 Mon Sep 17 00:00:00 2001 From: Leszek Date: Sat, 22 Jun 2024 10:37:16 +0200 Subject: [PATCH 17/19] replace one shot with Button component --- jsapp/js/components/reports/reports.js | 21 ++++++++++++++++----- jsapp/scss/components/_kobo.bem.ui.scss | 17 ----------------- 2 files changed, 16 insertions(+), 22 deletions(-) diff --git a/jsapp/js/components/reports/reports.js b/jsapp/js/components/reports/reports.js index b816b3fad1..ba91f6ab7c 100644 --- a/jsapp/js/components/reports/reports.js +++ b/jsapp/js/components/reports/reports.js @@ -339,7 +339,18 @@ export default class Reports extends React.Component { return (
- + + } + > Date: Tue, 25 Jun 2024 17:15:38 +0200 Subject: [PATCH 18/19] Add dark-red color option for Button component --- jsapp/js/components/common/button.scss | 20 ++++++++++++++++++++ jsapp/js/components/common/button.tsx | 1 + 2 files changed, 21 insertions(+) diff --git a/jsapp/js/components/common/button.scss b/jsapp/js/components/common/button.scss index 5cc95da431..8ba6550ac3 100644 --- a/jsapp/js/components/common/button.scss +++ b/jsapp/js/components/common/button.scss @@ -294,6 +294,26 @@ $button-border-radius: sizes.$x6; ); } +// dark-red button ↓ + +.k-button.k-button--color-dark-red.k-button--type-bare { + @include button-bare( + colors.$kobo-dark-red, + color.adjust(colors.$kobo-dark-red, $lightness: -5%) + ); +} + +.k-button.k-button--color-dark-red.k-button--type-frame { + @include button-frame(colors.$kobo-dark-red); +} + +.k-button.k-button--color-dark-red.k-button--type-full { + @include button-full( + colors.$kobo-dark-red, + color.adjust(colors.$kobo-dark-red, $lightness: -5%) + ); +} + // storm button ↓ .k-button.k-button--color-storm.k-button--type-bare { diff --git a/jsapp/js/components/common/button.tsx b/jsapp/js/components/common/button.tsx index 507b555270..03cf02087a 100644 --- a/jsapp/js/components/common/button.tsx +++ b/jsapp/js/components/common/button.tsx @@ -25,6 +25,7 @@ export type ButtonColor = | 'blue' | 'light-blue' | 'red' + | 'dark-red' | 'storm' | 'light-storm' | 'dark-blue'; From 2d3a4b4f9ab78758ae0cf6b23f53f776eaadc72f Mon Sep 17 00:00:00 2001 From: Leszek Date: Tue, 25 Jun 2024 17:27:09 +0200 Subject: [PATCH 19/19] better badge overflow handling --- jsapp/js/components/common/badge.module.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/jsapp/js/components/common/badge.module.scss b/jsapp/js/components/common/badge.module.scss index 23bd77e618..6b44281950 100644 --- a/jsapp/js/components/common/badge.module.scss +++ b/jsapp/js/components/common/badge.module.scss @@ -1,4 +1,5 @@ @use 'scss/sizes'; +@use 'scss/mixins'; @use '~kobo-common/src/styles/colors'; $badge-height-s: sizes.$x24; @@ -14,10 +15,8 @@ $badge-font-l: sizes.$x14; display: inline-block; vertical-align: middle; text-align: center; -} - -.label { - white-space: nowrap; + @include mixins.textEllipsis; + max-width: 100%; } .icon {