From b61ad4e88871d42d0458b6545275b3ea2b4e4eb4 Mon Sep 17 00:00:00 2001 From: Sovas Tiwari Date: Tue, 2 Sep 2025 09:44:24 +0100 Subject: [PATCH 1/5] Update the border radius and change the square button layout --- .../themes/default/bootstrap-variables.less | 6 +-- .../themes/default/less/media-editor.less | 27 ++++++++++ web/client/themes/default/less/modal.less | 6 +++ web/client/themes/default/less/navbar.less | 2 +- web/client/themes/default/less/sidegrid.less | 13 +++++ .../themes/default/less/square-button.less | 54 ++++++++++++++----- web/client/themes/default/less/timeline.less | 23 ++++++++ web/client/themes/default/less/toc.less | 23 ++++++++ web/client/themes/default/less/widget.less | 28 ++++++++++ web/client/themes/default/ms-variables.less | 10 ++-- 10 files changed, 172 insertions(+), 20 deletions(-) diff --git a/web/client/themes/default/bootstrap-variables.less b/web/client/themes/default/bootstrap-variables.less index 48eb9495de..5967b65db7 100644 --- a/web/client/themes/default/bootstrap-variables.less +++ b/web/client/themes/default/bootstrap-variables.less @@ -57,9 +57,9 @@ @padding-base-vertical: 4px; @padding-base-horizontal: 8px; -@border-radius-base: 0; -@border-radius-large: 0; -@border-radius-small: 0; +@border-radius-base: 4px; +@border-radius-large: 4px; +@border-radius-small: 4px; @component-active-color: @ms-primary-contrast; //== Tables diff --git a/web/client/themes/default/less/media-editor.less b/web/client/themes/default/less/media-editor.less index 582150eb15..2f055cfb17 100644 --- a/web/client/themes/default/less/media-editor.less +++ b/web/client/themes/default/less/media-editor.less @@ -121,6 +121,20 @@ z-index: 1; order: -1; width: 300px; + + .btn-group { + button { + border-radius: 0; + &:first-child { + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; + } + &:last-child { + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; + } + } + } } } // move service selector in top right corner @@ -142,6 +156,19 @@ padding-right: 4px; } } + .btn-group { + button { + border-radius: 0; + &:first-child { + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; + } + &:last-child { + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; + } + } + } } .ms-mapForm { .dropzone:hover .dropzone-content-image-added { diff --git a/web/client/themes/default/less/modal.less b/web/client/themes/default/less/modal.less index 1ea1b1d4b0..3e439db8d0 100644 --- a/web/client/themes/default/less/modal.less +++ b/web/client/themes/default/less/modal.less @@ -44,6 +44,12 @@ display: block; } +.modal, .modal-dialog { + .modal-header .close { + border-radius: @border-radius-base; + } +} + .ms-resizable-modal { position: absolute; text-align: left; diff --git a/web/client/themes/default/less/navbar.less b/web/client/themes/default/less/navbar.less index 8a5cd2feaf..7d570c2469 100644 --- a/web/client/themes/default/less/navbar.less +++ b/web/client/themes/default/less/navbar.less @@ -51,7 +51,7 @@ ol { .nav-body { position: absolute; - top: @square-btn-size; + top: @nav-toc-top; bottom: 0; overflow: auto; width: 100%; diff --git a/web/client/themes/default/less/sidegrid.less b/web/client/themes/default/less/sidegrid.less index b3523b765a..b0ebd53cc2 100644 --- a/web/client/themes/default/less/sidegrid.less +++ b/web/client/themes/default/less/sidegrid.less @@ -223,6 +223,19 @@ .mapstore-side-card-right-container { display: flex; flex-direction: column; + .mapstore-side-card-tool { + button { + border-radius: 0; + &:first-child { + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; + } + &:last-child { + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; + } + } + } } &:hover { diff --git a/web/client/themes/default/less/square-button.less b/web/client/themes/default/less/square-button.less index a064ffef07..eabc5411dc 100644 --- a/web/client/themes/default/less/square-button.less +++ b/web/client/themes/default/less/square-button.less @@ -16,28 +16,58 @@ // Layout // ************** .square-button { + // // !important due to vertical btn-group eg. dashboard + // height: @square-btn-size; + // width: @square-btn-size; + // display: inline-flex; + // align-items: center; + // justify-content: center; + // outline: 0; + // padding: 0; + // .glyphicon { + // margin: auto; + // font-size: @icon-size; + // } + // .ms-loader { + // height: @icon-size; + // width: @icon-size; + // margin: auto; + // > div { + // margin: auto; + // .mapstore-circle-loader-with-css-variables(@icon-size / 10, @icon-size); + + // } + // } // !important due to vertical btn-group eg. dashboard - height: @square-btn-size; - width: @square-btn-size; - display: inline-flex; - align-items: center; - justify-content: center; - outline: 0; - padding: 0; + &.input-group-addon { + display: flex; + } + &, .btn-group-vertical & { + height: @square-btn-medium-size; + width: @square-btn-medium-size; + padding: 0; + outline: 0; + } + .fa, .glyphicon { margin: auto; - font-size: @icon-size; + font-size: @icon-size-md; } .ms-loader { - height: @icon-size; - width: @icon-size; + height: @icon-size-md; + width: @icon-size-md; margin: auto; > div { margin: auto; - .mapstore-circle-loader-with-css-variables(@icon-size / 10, @icon-size); - + .mapstore-circle-loader-with-css-variables(@icon-size-md/10, @icon-size-md); } } + + // TODO: check and remove all the above rules + display: inline-flex; + justify-content: center; + align-items: center; + font-size: @icon-size-md; } .btn-group-vertical > .square-button { diff --git a/web/client/themes/default/less/timeline.less b/web/client/themes/default/less/timeline.less index 4bb28b3f6a..24f4ee5d0a 100644 --- a/web/client/themes/default/less/timeline.less +++ b/web/client/themes/default/less/timeline.less @@ -380,6 +380,7 @@ top: 0; right: 0; transform: translate(-50%, -100%); + border-radius: 0; border-top-left-radius: 50%; border-top-right-radius: 50%; height: 20px; @@ -655,6 +656,17 @@ .shadow-soft; .timeline-plugin-btn-group { display: flex; + button { + border-radius: 0; + &:first-child { + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; + } + &:last-child { + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; + } + } } h4 { margin-left: 8px; @@ -1066,4 +1078,15 @@ } } } + button { + border-radius: 0; + &:first-child { + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; + } + &:last-child { + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; + } + } } diff --git a/web/client/themes/default/less/toc.less b/web/client/themes/default/less/toc.less index e7e74d76fb..7316d549dd 100644 --- a/web/client/themes/default/less/toc.less +++ b/web/client/themes/default/less/toc.less @@ -187,6 +187,29 @@ .ms-toc-toolbar-dropdown { width: @square-btn-medium-size / 2; } + .ms-toc-toolbar-content { + button { + border-radius: 0; + } + div { + &:first-child { + button { + &:first-child { + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; + } + } + } + &:last-child { + button { + &:last-child { + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; + } + } + } + } + } } .ms-context-menu { diff --git a/web/client/themes/default/less/widget.less b/web/client/themes/default/less/widget.less index 8faa7d9fad..5b5e9b5a4b 100644 --- a/web/client/themes/default/less/widget.less +++ b/web/client/themes/default/less/widget.less @@ -68,10 +68,27 @@ .widgets-tray { .background-color-var(@theme-vars[main-bg]); + .ms2-border-layout-body { + button:not(.widgets-bar button) { + border-radius: 0; + &:first-child { + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; + } + &:last-child { + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; + } + } + } + .widgets-bar { >span { .border-right-color-var(@theme-vars[main-border-color]); } + > span > button { + border-radius: 0; + } } } @@ -414,6 +431,17 @@ padding: 7px; margin-right: 13px; } + span > button { + border-radius: 0; + &:first-child { + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; + } + &:last-child { + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; + } + } } .dashboard-editor { /* diff --git a/web/client/themes/default/ms-variables.less b/web/client/themes/default/ms-variables.less index 9028a5069a..9d90100b1e 100644 --- a/web/client/themes/default/ms-variables.less +++ b/web/client/themes/default/ms-variables.less @@ -373,16 +373,16 @@ // ****************************************** @small-icon-size: 14px; -@icon-size: 24px; -@square-btn-size: 40px; +@icon-size: 15px; +@square-btn-size: 30px; @padding-left-square: floor(((@square-btn-size - @icon-size) / 2)); @icon-size-md: 15px; @square-btn-medium-size: 30px; @padding-left-square-md: floor(((@square-btn-medium-size - @icon-size-md) / 2)); -@icon-size-sm: 14px; -@square-btn-small-size: 22px; +@icon-size-sm: 15px; +@square-btn-small-size: 30px; @padding-left-square-sm: floor(((@square-btn-small-size - @icon-size-sm) / 2)); @grid-icon-size: 16px; @@ -391,6 +391,8 @@ @card-height: 52px; +@nav-toc-top: 40px; + // ****************************************** From b9ab71e85e1486933f85a8075dd470e5a54a0ae7 Mon Sep 17 00:00:00 2001 From: Sovas Tiwari Date: Tue, 2 Sep 2025 15:44:29 +0100 Subject: [PATCH 2/5] Update the overall button size and add border radius to the element --- web/client/components/I18N/LangBar.jsx | 2 +- .../components/TOC/TOCItemsSettings.jsx | 2 +- .../TOC/fragments/LayerFields/Fields.jsx | 4 +- .../TOC/fragments/settings/Display.jsx | 2 +- .../settings/VisibilityLimitsForm.jsx | 2 +- .../fragments/settings/WMSCacheOptions.jsx | 4 +- .../settings/__tests__/ThematicLayer-test.jsx | 6 +- .../__tests__/VisibilityLimitsForm-test.jsx | 2 +- .../fragments/template/MetadataTemplate.jsx | 2 +- .../background/BackgroundDialog.jsx | 4 +- .../components/background/TerrainEditor.jsx | 2 +- web/client/components/catalog/RecordItem.jsx | 6 +- .../components/catalog/SharingLinks.jsx | 2 +- .../RasterAdvancedSettings.js | 2 +- .../contextcreator/ConfigurePluginsStep.jsx | 2 +- .../contextcreator/ConfigureThemes.jsx | 8 +- .../components/data/featuregrid/Header.jsx | 2 +- .../data/featuregrid/toolbars/TButton.jsx | 2 +- .../featuregrid/toolbars/TSplitButton.jsx | 2 +- .../data/featuregrid/toolbars/Toolbar.jsx | 4 +- .../toolbars/__tests__/Toolbar-test.jsx | 6 +- .../data/identify/IdentifyContainer.jsx | 4 +- .../components/data/identify/SwipeHeader.jsx | 8 +- .../identify/__tests__/GeocodeViewer-test.jsx | 2 +- .../__tests__/IdentifyContainer-test.jsx | 2 +- .../data/query/QueryPanelHeader.jsx | 6 +- .../components/data/query/QueryToolbar.jsx | 4 +- .../components/data/query/SpatialFilter.jsx | 2 +- .../components/geostory/builder/Builder.jsx | 6 +- .../geostory/builder/SectionsPreview.jsx | 8 +- .../geostory/common/CustomThemePicker.jsx | 4 +- .../components/geostory/common/MapEditor.jsx | 2 +- .../geostory/common/ToolbarDropdownButton.jsx | 2 +- .../__tests__/ToolbarDropdownButton-test.jsx | 8 +- .../geostory/common/enhancers/map.jsx | 2 +- .../geostory/contents/ContentToolbar.jsx | 2 +- .../geostory/contents/ToolbarButtons.jsx | 2 +- .../geostory/contents/carousel/Carousel.jsx | 4 +- .../components/geostory/layouts/Cascade.jsx | 2 +- .../geostory/navigation/Navigation.jsx | 2 +- .../geostory/navigation/ScrollMenu.jsx | 4 +- web/client/components/layout/Button.jsx | 2 +- .../layout/__tests__/Button-test.jsx | 2 +- .../ruleseditor/GSInstance/Header.jsx | 2 +- .../rulesmanager/ruleseditor/Header.jsx | 2 +- .../rulesmanager/ruleseditor/StylesEditor.jsx | 4 +- .../map/cesium/MeasurementSupport.jsx | 8 +- .../components/mapcatalog/MapCatalogPanel.jsx | 4 +- .../annotations/CoordinatesEditor.jsx | 4 +- .../mapcontrols/measure/MeasureComponent.jsx | 6 +- .../mapcontrols/measure/MeasureToolbar.jsx | 2 +- .../mapcontrols/search/SearchBar.jsx | 6 +- .../mapcontrols/search/SearchBarMenu.jsx | 4 +- .../mapcontrols/search/SearchResult.jsx | 2 +- .../searchbookmarkconfig/AddNewBookmark.jsx | 4 +- .../searchbookmarkconfig/BookmarkList.js | 2 +- .../searchcoordinates/CoordinatesSearch.js | 2 +- .../maptemplates/MapTemplatesPanel.jsx | 4 +- .../components/mapviews/MapViewItem.jsx | 2 +- .../components/mapviews/MapViewsSupport.jsx | 28 +++--- .../mapviews/settings/LayersSection.jsx | 4 +- .../components/mapviews/settings/Section.jsx | 2 +- .../components/mediaEditor/MediaList.jsx | 2 +- .../mediaEditor/image/ImageForm.jsx | 2 +- .../components/mediaEditor/map/MapForm.jsx | 4 +- .../mediaEditor/video/VideoForm.jsx | 2 +- web/client/components/misc/Filter.jsx | 2 +- web/client/components/misc/Thumbnail.jsx | 2 +- .../misc/__tests__/ResizableModal-test.jsx | 8 +- .../misc/coordinateeditors/CoordinatesRow.jsx | 6 +- .../components/misc/panels/PanelHeader.jsx | 6 +- .../misc/panels/__tests__/DockPanel-test.jsx | 2 +- .../panels/__tests__/PanelHeader-test.jsx | 6 +- .../components/misc/switch/SwitchPanel.jsx | 4 +- .../components/misc/switch/SwitchToolbar.jsx | 2 +- .../misc/toolbar/DropdownToolbarOptions.jsx | 4 +- .../components/misc/transfer/Transfer.jsx | 4 +- .../misc/transfer/TransferColumnCardList.jsx | 2 +- .../misc/transfer/__tests__/Transfer-test.jsx | 6 +- .../resources/modals/fragments/DetailsRow.jsx | 2 +- web/client/components/search/SearchBar.jsx | 4 +- .../components/search/SearchBarToolbar.jsx | 2 +- .../components/style/ThemaClassesEditor.jsx | 2 +- .../ClassificationLayerSettings.jsx | 4 +- .../components/styleeditor/FilterBuilder.jsx | 2 +- .../components/styleeditor/RulesEditor.jsx | 4 +- .../styleeditor/ScaleDenominator.jsx | 2 +- .../components/styleeditor/StyleToolbar.jsx | 2 +- .../styleeditor/VisualStyleEditor.jsx | 6 +- .../widgets/builder/BuilderHeader.jsx | 4 +- .../wizard/chart/ChartClassification.jsx | 2 +- .../builder/wizard/chart/ChartSwitcher.jsx | 2 +- .../widgets/builder/wizard/chart/Toolbar.jsx | 2 +- .../wizard/common/layerselector/Toolbar.jsx | 2 +- .../builder/wizard/counter/Toolbar.jsx | 2 +- .../widgets/builder/wizard/legend/Toolbar.jsx | 2 +- .../widgets/builder/wizard/map/MapCatalog.jsx | 2 +- .../builder/wizard/map/MapSwitcher.jsx | 2 +- .../widgets/builder/wizard/map/Toolbar.jsx | 2 +- .../widgets/builder/wizard/table/Toolbar.jsx | 2 +- .../widgets/builder/wizard/text/Toolbar.jsx | 2 +- web/client/epics/maplayout.js | 2 +- web/client/plugins/AddWidgetDashboard.jsx | 2 +- .../Annotations/components/FeaturesEditor.jsx | 18 ++-- .../containers/AnnotationsPanel.jsx | 12 +-- web/client/plugins/BurgerMenu.jsx | 2 +- web/client/plugins/GeoStoryEditor.jsx | 2 +- web/client/plugins/Login.jsx | 4 +- web/client/plugins/MapConnectionDashboard.jsx | 2 +- .../__tests__/ResourcesSearch-test.jsx | 6 +- .../components/__tests__/MenuItem-test.jsx | 4 +- web/client/plugins/RulesEditor.jsx | 4 +- web/client/plugins/SearchByBookmark.jsx | 2 +- web/client/plugins/SearchServicesConfig.jsx | 2 +- web/client/plugins/TOC/components/Toolbar.jsx | 3 +- web/client/plugins/TOC/utils/TOCUtils.js | 32 +++++++ .../TOC/utils/__tests__/TOCUtils-test.js | 87 ++++++++++++++++++- web/client/plugins/Timeline.jsx | 4 +- web/client/plugins/__tests__/Share-test.jsx | 2 +- web/client/plugins/drawer/Menu.jsx | 6 +- web/client/plugins/manager/ManagerMenu.jsx | 2 +- web/client/plugins/playback/Playback.jsx | 2 +- .../userExtensions/ExtensionsPanel.jsx | 2 +- .../widgetbuilder/ChartLayerSelector.jsx | 2 +- .../widgetbuilder/MapLayerSelector.jsx | 2 +- .../themes/default/bootstrap-theme.less | 4 +- web/client/themes/default/less/common.less | 32 +++++-- .../themes/default/less/context-creator.less | 1 + .../default/less/doublecolumntransfer.less | 2 +- .../themes/default/less/dropdown-menu.less | 2 +- .../default/less/geostory-navigation.less | 2 +- web/client/themes/default/less/geostory.less | 44 +++++----- .../themes/default/less/get-feature.less | 2 +- .../default/less/legacy-annotations.less | 6 +- web/client/themes/default/less/loaders.less | 4 +- .../themes/default/less/map-search-bar.less | 2 +- .../themes/default/less/map-toolbar.less | 1 + .../themes/default/less/maps-properties.less | 16 ++-- .../themes/default/less/media-editor.less | 24 +---- web/client/themes/default/less/navbar.less | 2 +- .../themes/default/less/query-panel.less | 14 ++- .../themes/default/less/react-select.less | 4 +- web/client/themes/default/less/sidegrid.less | 12 +-- web/client/themes/default/less/sliders.less | 6 +- .../themes/default/less/square-button.less | 87 ++----------------- .../themes/default/less/style-editor.less | 3 +- web/client/themes/default/less/swipe.less | 4 +- web/client/themes/default/less/switch.less | 13 +-- .../themes/default/less/switchpanel.less | 26 +++--- web/client/themes/default/less/timeline.less | 27 +----- .../themes/default/less/toc-settings.less | 8 +- web/client/themes/default/less/toc.less | 37 +++----- web/client/themes/default/less/widget.less | 6 +- web/client/themes/default/less/wizard.less | 18 ++++ web/client/themes/default/ms-variables.less | 11 +-- 155 files changed, 507 insertions(+), 479 deletions(-) diff --git a/web/client/components/I18N/LangBar.jsx b/web/client/components/I18N/LangBar.jsx index ec1c67f3b0..b0a2b66263 100644 --- a/web/client/components/I18N/LangBar.jsx +++ b/web/client/components/I18N/LangBar.jsx @@ -42,7 +42,7 @@ class LangBar extends React.Component { pullRight noCaret id={this.props.id} - className="square-button-md _border-transparent" + className="square-button _border-transparent" title={ { {ToolbarComponent ? : } , diff --git a/web/client/components/TOC/fragments/LayerFields/Fields.jsx b/web/client/components/TOC/fragments/LayerFields/Fields.jsx index b1f9c1ebd6..b466dc0783 100644 --- a/web/client/components/TOC/fragments/LayerFields/Fields.jsx +++ b/web/client/components/TOC/fragments/LayerFields/Fields.jsx @@ -40,7 +40,7 @@ const Fields = ({fields = [], onLoadFields = () => {}, onChange = () => {}, onCl className="layer-fields" header={
- {}, onChange = () => {}, onCl disabled={loading} bsStyle="primary" confirmContent={} - className="square-button-md" + className="square-button" onClick={() => onClear()}> diff --git a/web/client/components/TOC/fragments/settings/Display.jsx b/web/client/components/TOC/fragments/settings/Display.jsx index a4b617188a..3a328b88cf 100644 --- a/web/client/components/TOC/fragments/settings/Display.jsx +++ b/web/client/components/TOC/fragments/settings/Display.jsx @@ -173,7 +173,7 @@ export default class extends React.Component { diff --git a/web/client/components/background/BackgroundDialog.jsx b/web/client/components/background/BackgroundDialog.jsx index 0dfc041dfb..9d4930318d 100644 --- a/web/client/components/background/BackgroundDialog.jsx +++ b/web/client/components/background/BackgroundDialog.jsx @@ -189,7 +189,7 @@ export default class BackgroundDialog extends React.Component {
diff --git a/web/client/components/background/TerrainEditor.jsx b/web/client/components/background/TerrainEditor.jsx index 5cfeff225f..80872690a2 100644 --- a/web/client/components/background/TerrainEditor.jsx +++ b/web/client/components/background/TerrainEditor.jsx @@ -101,7 +101,7 @@ function TerrainEditor({ {getMessageById(messages, "backgroundSelector.terrain.title")} - diff --git a/web/client/components/catalog/RecordItem.jsx b/web/client/components/catalog/RecordItem.jsx index f9cf8ec858..e76fd4b894 100644 --- a/web/client/components/catalog/RecordItem.jsx +++ b/web/client/components/catalog/RecordItem.jsx @@ -189,7 +189,7 @@ class RecordItem extends React.Component { : } onClick={() => this.onAddToMap(record)} @@ -212,7 +212,7 @@ class RecordItem extends React.Component { ) }] : [{ tooltipId: 'catalog.addToMap', - className: 'square-button-md', + className: 'square-button', bsStyle: 'primary', disabled: this.state.loading, loading: this.state.loading, @@ -282,7 +282,7 @@ class RecordItem extends React.Component { tools={ ); return ( - diff --git a/web/client/components/catalog/editor/AdvancedSettings/RasterAdvancedSettings.js b/web/client/components/catalog/editor/AdvancedSettings/RasterAdvancedSettings.js index b2e08f110c..5b5990d7ee 100644 --- a/web/client/components/catalog/editor/AdvancedSettings/RasterAdvancedSettings.js +++ b/web/client/components/catalog/editor/AdvancedSettings/RasterAdvancedSettings.js @@ -191,7 +191,7 @@ export default ({ disabled={props.formatsLoading || !canLoadInfo } tooltipId="catalog.format.refresh" - className="square-button-md no-border" + className="square-button no-border" onClick={() => onFormatOptionsFetch(service.url, true)} key="format-refresh"> diff --git a/web/client/components/contextcreator/ConfigurePluginsStep.jsx b/web/client/components/contextcreator/ConfigurePluginsStep.jsx index 93e28bcb16..fb758231bc 100644 --- a/web/client/components/contextcreator/ConfigurePluginsStep.jsx +++ b/web/client/components/contextcreator/ConfigurePluginsStep.jsx @@ -167,7 +167,7 @@ const pluginsToItems = ({ {!isRoot && parentIsEnabled && !isMandatory &&
}> @@ -319,7 +319,7 @@ function ConfigureThemes({
}> @@ -436,7 +436,7 @@ function ConfigureThemes({
}> @@ -516,7 +516,7 @@ function ConfigureThemes({ }> diff --git a/web/client/components/data/featuregrid/Header.jsx b/web/client/components/data/featuregrid/Header.jsx index e9e427f5fc..8d83dde446 100644 --- a/web/client/components/data/featuregrid/Header.jsx +++ b/web/client/components/data/featuregrid/Header.jsx @@ -29,7 +29,7 @@ export default (props = {
{!props.hideCloseButton && } diff --git a/web/client/components/data/featuregrid/toolbars/TButton.jsx b/web/client/components/data/featuregrid/toolbars/TButton.jsx index 8de27b09d4..028c0bbe29 100644 --- a/web/client/components/data/featuregrid/toolbars/TButton.jsx +++ b/web/client/components/data/featuregrid/toolbars/TButton.jsx @@ -17,7 +17,7 @@ const hideStyle = { }; const normalStyle = {}; const getStyle = (visible) => visible ? normalStyle : hideStyle; -export const SimpleTButton = forwardRef(({ disabled, id, visible, onClick, glyph, active, className = "square-button-md", ...props }, ref) => { +export const SimpleTButton = forwardRef(({ disabled, id, visible, onClick, glyph, active, className = "square-button", ...props }, ref) => { return (
{ const isDisabled = this.props.index === 0 ? true : false; return this.props.useButtons ? - : - {this.props.onPrevious(); }}>; + : + {this.props.onPrevious(); }}>; }; renderRightButton = () => { const isDisabled = this.props.index === this.props.size - 1 ? true : false; return this.props.useButtons ? - : - {this.props.onNext(); }}>; + : + {this.props.onNext(); }}>; }; render() { diff --git a/web/client/components/data/identify/__tests__/GeocodeViewer-test.jsx b/web/client/components/data/identify/__tests__/GeocodeViewer-test.jsx index 24b24e9b29..a2df73d4a8 100644 --- a/web/client/components/data/identify/__tests__/GeocodeViewer-test.jsx +++ b/web/client/components/data/identify/__tests__/GeocodeViewer-test.jsx @@ -50,7 +50,7 @@ describe('GeocodeViewer', () => { lngCorrected={10}/>, document.getElementById("container")); const modalEditor = document.getElementsByClassName('ms-resizable-modal'); expect(modalEditor.length).toBe(1); - const close = document.querySelector('button.square-button-md'); + const close = document.querySelector('button.square-button'); expect(close).toBeTruthy(); TestUtils.Simulate.click(close); expect(spyHideRevGeocode).toHaveBeenCalled(); diff --git a/web/client/components/data/identify/__tests__/IdentifyContainer-test.jsx b/web/client/components/data/identify/__tests__/IdentifyContainer-test.jsx index e9e7aa64ad..a7c054c751 100644 --- a/web/client/components/data/identify/__tests__/IdentifyContainer-test.jsx +++ b/web/client/components/data/identify/__tests__/IdentifyContainer-test.jsx @@ -106,7 +106,7 @@ describe("test IdentifyContainer", () => { const alertModal = document.getElementsByClassName('ms-resizable-modal'); expect(alertModal.length).toBe(1); - const btns = alertModal[0].querySelectorAll('button.square-button-md'); + const btns = alertModal[0].querySelectorAll('button.square-button'); expect(btns.length).toBe(1); TestUtils.Simulate.click(btns[0]); diff --git a/web/client/components/data/query/QueryPanelHeader.jsx b/web/client/components/data/query/QueryPanelHeader.jsx index 7394a8c638..215ee200e6 100644 --- a/web/client/components/data/query/QueryPanelHeader.jsx +++ b/web/client/components/data/query/QueryPanelHeader.jsx @@ -6,16 +6,16 @@ import popoverTooltip from '../../misc/enhancers/popover'; import Button from '../../misc/Button'; import FlexBox from '../../layout/FlexBox'; -const AlertIcon = popoverTooltip((props) => (
)); +const AlertIcon = popoverTooltip((props) => (
)); export default ({loadingError, onToggleQuery = () => {}, buttonStyle = "default"} = {}) => ( {loadingError && ()}}/>) || ( -
)} +
)} ||
} @@ -214,7 +214,7 @@ export function CustomThemePickerMenuItem({
{isStartControlActive && } {isEndControlActive && } {isEndControlActive && , document.getElementById('container')); const button = document.querySelector('.btn'); expect(button).toBeTruthy(); - expect(button.getAttribute('class')).toBe('square-button-md btn btn-default'); + expect(button.getAttribute('class')).toBe('square-button btn btn-default'); }); }); diff --git a/web/client/components/manager/rulesmanager/ruleseditor/GSInstance/Header.jsx b/web/client/components/manager/rulesmanager/ruleseditor/GSInstance/Header.jsx index 37584e2d8c..34d7ed5deb 100644 --- a/web/client/components/manager/rulesmanager/ruleseditor/GSInstance/Header.jsx +++ b/web/client/components/manager/rulesmanager/ruleseditor/GSInstance/Header.jsx @@ -33,7 +33,7 @@ export default ({ }]; return (
- +
, tools: { e.stopPropagation(); diff --git a/web/client/components/mapviews/MapViewItem.jsx b/web/client/components/mapviews/MapViewItem.jsx index bbdc2756cf..88926ce9f0 100644 --- a/web/client/components/mapviews/MapViewItem.jsx +++ b/web/client/components/mapviews/MapViewItem.jsx @@ -56,7 +56,7 @@ function MapViewItem({ select {title} item {onRemove && }
diff --git a/web/client/components/mediaEditor/image/ImageForm.jsx b/web/client/components/mediaEditor/image/ImageForm.jsx index afee9f6e1f..1680eca12e 100644 --- a/web/client/components/mediaEditor/image/ImageForm.jsx +++ b/web/client/components/mediaEditor/image/ImageForm.jsx @@ -124,7 +124,7 @@ export default enhance(({ }} btnDefaultProps={{ bsStyle: "primary", - className: "square-button-md" + className: "square-button" }} buttons={[{ glyph: "arrow-left", diff --git a/web/client/components/mediaEditor/map/MapForm.jsx b/web/client/components/mediaEditor/map/MapForm.jsx index d5764a06b3..fa3425055e 100644 --- a/web/client/components/mediaEditor/map/MapForm.jsx +++ b/web/client/components/mediaEditor/map/MapForm.jsx @@ -129,7 +129,7 @@ export const MapForm = ({ }} btnDefaultProps={{ bsStyle: "primary", - className: "square-button-md" + className: "square-button" }} buttons={[{ glyph: "arrow-left", @@ -142,7 +142,7 @@ export const MapForm = ({ disabled={!properties.name || !saveEnabled} onClick={onSave} bsStyle="primary" - className="square-button-md" + className="square-button" confirmPredicate={saveEnabled && isResourceUsed} /> }, diff --git a/web/client/components/mediaEditor/video/VideoForm.jsx b/web/client/components/mediaEditor/video/VideoForm.jsx index b6cc2f28e8..d1f447a29b 100644 --- a/web/client/components/mediaEditor/video/VideoForm.jsx +++ b/web/client/components/mediaEditor/video/VideoForm.jsx @@ -175,7 +175,7 @@ const VideoForm = ({ }} btnDefaultProps={{ bsStyle: "primary", - className: "square-button-md" + className: "square-button" }} buttons={[{ glyph: "arrow-left", diff --git a/web/client/components/misc/Filter.jsx b/web/client/components/misc/Filter.jsx index 81081a7dc6..229d88dffc 100644 --- a/web/client/components/misc/Filter.jsx +++ b/web/client/components/misc/Filter.jsx @@ -58,7 +58,7 @@ class Filter extends React.Component { onChange={this.onFilter} onFocus={this.props.onFocus} type="text"/> - + {this.props.loading ?
: icon} diff --git a/web/client/components/misc/Thumbnail.jsx b/web/client/components/misc/Thumbnail.jsx index 42aa922629..f47b649b74 100644 --- a/web/client/components/misc/Thumbnail.jsx +++ b/web/client/components/misc/Thumbnail.jsx @@ -137,7 +137,7 @@ const Thumbnail = forwardRef(({ const toolbar = ( { const modalEl = document.getElementById('ms-resizable-modal'); expect(modalEl).toExist(); expect(modalEl.style.display).toBe('flex'); - let headButtons = document.getElementsByClassName('square-button-md'); + let headButtons = document.getElementsByClassName('square-button'); expect(headButtons.length).toBe(1); ReactTestUtils.Simulate.click(headButtons[0]); expect(spyonClose).toHaveBeenCalled(); @@ -58,7 +58,7 @@ describe('ResizableModal component', () => { const modalEl = document.getElementById('ms-resizable-modal'); expect(modalEl).toExist(); expect(modalEl.style.display).toBe('flex'); - let headButtons = document.getElementsByClassName('square-button-md'); + let headButtons = document.getElementsByClassName('square-button'); expect(headButtons.length).toBe(2); expect(headButtons[0].querySelector('.glyphicon').getAttribute('class')).toBe('glyphicon glyphicon-resize-full'); @@ -67,12 +67,12 @@ describe('ResizableModal component', () => { expect(document.querySelector('.ms-fullscreen')).toExist(); ReactDOM.render(, document.getElementById("container")); - headButtons = document.getElementsByClassName('square-button-md'); + headButtons = document.getElementsByClassName('square-button'); expect(headButtons.length).toBe(2); expect(headButtons[0].querySelector('.glyphicon').getAttribute('class')).toBe('glyphicon glyphicon-resize-vertical'); ReactDOM.render(, document.getElementById("container")); - headButtons = document.getElementsByClassName('square-button-md'); + headButtons = document.getElementsByClassName('square-button'); expect(headButtons.length).toBe(2); expect(headButtons[0].querySelector('.glyphicon').getAttribute('class')).toBe('glyphicon glyphicon-resize-horizontal'); diff --git a/web/client/components/misc/coordinateeditors/CoordinatesRow.jsx b/web/client/components/misc/coordinateeditors/CoordinatesRow.jsx index 0053e96988..7b31bf1d0b 100644 --- a/web/client/components/misc/coordinateeditors/CoordinatesRow.jsx +++ b/web/client/components/misc/coordinateeditors/CoordinatesRow.jsx @@ -117,7 +117,7 @@ class CoordinatesRow extends React.Component { { buttonConfig: { title: , - className: "square-button-md no-border", + className: "square-button no-border", pullRight: true, tooltipId: "identifyChangeCoordinateFormat" }, @@ -147,7 +147,7 @@ class CoordinatesRow extends React.Component { // drag button cannot be a button since IE/Edge doesn't support drag operation on button const dragButton = ( -
} diff --git a/web/client/components/misc/panels/PanelHeader.jsx b/web/client/components/misc/panels/PanelHeader.jsx index a3c15319ef..0baabcd6c4 100644 --- a/web/client/components/misc/panels/PanelHeader.jsx +++ b/web/client/components/misc/panels/PanelHeader.jsx @@ -62,20 +62,20 @@ export default ({ onFullscreen = () => {} }) => { const closeButton = !onClose ? null : ( - ); const glyphButton = showFullscreen ? ( ) : glyph ? (
+ className={`square-button _border-transparent`}>
) : null; diff --git a/web/client/components/misc/panels/__tests__/DockPanel-test.jsx b/web/client/components/misc/panels/__tests__/DockPanel-test.jsx index c0ae5ae9ba..32ba722f6a 100644 --- a/web/client/components/misc/panels/__tests__/DockPanel-test.jsx +++ b/web/client/components/misc/panels/__tests__/DockPanel-test.jsx @@ -77,7 +77,7 @@ describe("test DockPanel", () => { it('test fullscreen', () => { ReactDOM.render( {}}/>, document.getElementById("container")); - const buttons = document.getElementsByClassName('square-button-md'); + const buttons = document.getElementsByClassName('square-button'); expect(buttons.length).toBe(2); expect(buttons[0].children[0].getAttribute('class')).toBe('glyphicon glyphicon-chevron-left'); TestUtils.Simulate.click(buttons[0]); diff --git a/web/client/components/misc/panels/__tests__/PanelHeader-test.jsx b/web/client/components/misc/panels/__tests__/PanelHeader-test.jsx index 5f709cd9a7..b18bdac479 100644 --- a/web/client/components/misc/panels/__tests__/PanelHeader-test.jsx +++ b/web/client/components/misc/panels/__tests__/PanelHeader-test.jsx @@ -28,7 +28,7 @@ describe("test PanelHeader", () => { ReactDOM.render( {}}/>, document.getElementById("container")); const domComp = document.getElementsByClassName('ms-header')[0]; expect(domComp).toExist(); - const buttons = document.getElementsByClassName('square-button-md'); + const buttons = document.getElementsByClassName('square-button'); expect(buttons.length).toBe(2); expect(buttons[1].children[0].getAttribute('class')).toBe('glyphicon glyphicon-1-close'); }); @@ -37,7 +37,7 @@ describe("test PanelHeader", () => { ReactDOM.render(} onClose={() => {}}/>, document.getElementById("container")); const domComp = document.getElementsByClassName('ms-header')[0]; expect(domComp).toExist(); - const buttons = document.getElementsByClassName('square-button-md'); + const buttons = document.getElementsByClassName('square-button'); expect(buttons.length).toBe(2); expect(buttons[1].children[0].getAttribute('class')).toBe('glyphicon glyphicon-1-close'); const customRow = document.getElementsByClassName('custom-header-row'); @@ -79,7 +79,7 @@ describe("test PanelHeader", () => { ReactDOM.render( {}}/>, document.getElementById("container")); const domComp = document.getElementsByClassName('ms-header')[0]; expect(domComp).toExist(); - const icon = document.querySelectorAll('div.square-button-md'); + const icon = document.querySelectorAll('div.square-button'); expect(icon.length).toBe(1); expect(icon[0].tagName.toLowerCase()).toBe('div'); }); diff --git a/web/client/components/misc/switch/SwitchPanel.jsx b/web/client/components/misc/switch/SwitchPanel.jsx index b6c9f91434..91263d8d32 100644 --- a/web/client/components/misc/switch/SwitchPanel.jsx +++ b/web/client/components/misc/switch/SwitchPanel.jsx @@ -15,7 +15,7 @@ import Button from '../../misc/Button'; import LoadingView from '../LoadingView'; import Toolbar from '../toolbar/Toolbar'; -const ErrorIcon = () => ; +const ErrorIcon = () => ; const LoadingIcon = () =>
; class SwitchPanel extends React.Component { @@ -61,7 +61,7 @@ class SwitchPanel extends React.Component { }}/> : null} {this.props.error ? : null} {this.props.loading ? : null} - {this.props.buttons.length > 0 && this.props.expanded && } + {this.props.buttons.length > 0 && this.props.expanded && } ); } diff --git a/web/client/components/misc/switch/SwitchToolbar.jsx b/web/client/components/misc/switch/SwitchToolbar.jsx index 317dec7b66..c59032ce9b 100644 --- a/web/client/components/misc/switch/SwitchToolbar.jsx +++ b/web/client/components/misc/switch/SwitchToolbar.jsx @@ -35,7 +35,7 @@ class SwitchToolbar extends React.Component { render() { return (, @@ -28,7 +28,7 @@ const DropdownButtonT = tooltip(DropdownButton); const defaultButtonConfig = { disabled: false, - className: "square-button-md", + className: "square-button", noCaret: true, idDropDown: uuidv1() }; diff --git a/web/client/components/misc/transfer/Transfer.jsx b/web/client/components/misc/transfer/Transfer.jsx index 4a8280453e..523e69d781 100644 --- a/web/client/components/misc/transfer/Transfer.jsx +++ b/web/client/components/misc/transfer/Transfer.jsx @@ -20,7 +20,7 @@ import CardList from './TransferColumnCardList'; const renderTools = (tools) => ( @@ -32,7 +32,7 @@ const renderMoveButtons = (moveButtons) => ( diff --git a/web/client/components/widgets/builder/wizard/chart/ChartClassification.jsx b/web/client/components/widgets/builder/wizard/chart/ChartClassification.jsx index 4d0d48f73e..36fc51e59e 100644 --- a/web/client/components/widgets/builder/wizard/chart/ChartClassification.jsx +++ b/web/client/components/widgets/builder/wizard/chart/ChartClassification.jsx @@ -161,7 +161,7 @@ const CustomClassification = ({
); diff --git a/web/client/components/widgets/builder/wizard/chart/Toolbar.jsx b/web/client/components/widgets/builder/wizard/chart/Toolbar.jsx index ac5f79763e..c7c905a1a6 100644 --- a/web/client/components/widgets/builder/wizard/chart/Toolbar.jsx +++ b/web/client/components/widgets/builder/wizard/chart/Toolbar.jsx @@ -43,7 +43,7 @@ export default ({ setPage(Math.max(0, step - 1)), diff --git a/web/client/components/widgets/builder/wizard/common/layerselector/Toolbar.jsx b/web/client/components/widgets/builder/wizard/common/layerselector/Toolbar.jsx index 41098771e7..6004cf4869 100644 --- a/web/client/components/widgets/builder/wizard/common/layerselector/Toolbar.jsx +++ b/web/client/components/widgets/builder/wizard/common/layerselector/Toolbar.jsx @@ -11,7 +11,7 @@ import React from 'react'; import Toolbar from '../../../../../misc/toolbar/Toolbar'; export default ({ canProceed, selected, stepButtons = [], onProceed = () => {}} = {}) => ( { export default ({openFilterEditor = () => {}, step = 0, stepButtons = [], editorData = {}, valid, setPage = () => {}, onFinish = () => {}} = {}) => ( setPage(Math.max(0, step - 1)), diff --git a/web/client/components/widgets/builder/wizard/legend/Toolbar.jsx b/web/client/components/widgets/builder/wizard/legend/Toolbar.jsx index 17c344dcc7..9f0a3c48a2 100644 --- a/web/client/components/widgets/builder/wizard/legend/Toolbar.jsx +++ b/web/client/components/widgets/builder/wizard/legend/Toolbar.jsx @@ -36,7 +36,7 @@ const getSaveTooltipId = (step, {id} = {}) => { export default ({ step = 0, editorData = {}, valid, stepButtons = [], onFinish = () => { }, setPage = () => { }} = {}) => ( setPage(Math.max(0, step - 1)), diff --git a/web/client/components/widgets/builder/wizard/map/MapCatalog.jsx b/web/client/components/widgets/builder/wizard/map/MapCatalog.jsx index 432d550db6..fe6a33fe5f 100644 --- a/web/client/components/widgets/builder/wizard/map/MapCatalog.jsx +++ b/web/client/components/widgets/builder/wizard/map/MapCatalog.jsx @@ -39,7 +39,7 @@ const Title = ({title = ''}) => (<>{title} style={{marginLeft: 4}} tooltipPosition={"right"} tooltip={} - className="maps-subtitle square-button-md no-border" + className="maps-subtitle square-button no-border" key="info-sign"> diff --git a/web/client/components/widgets/builder/wizard/map/MapSwitcher.jsx b/web/client/components/widgets/builder/wizard/map/MapSwitcher.jsx index c45906048f..7f40c0064c 100644 --- a/web/client/components/widgets/builder/wizard/map/MapSwitcher.jsx +++ b/web/client/components/widgets/builder/wizard/map/MapSwitcher.jsx @@ -45,7 +45,7 @@ export default ({ // Show info icon when widget width cannot contain Map Switcher return (); diff --git a/web/client/components/widgets/builder/wizard/map/Toolbar.jsx b/web/client/components/widgets/builder/wizard/map/Toolbar.jsx index f56c2ac29f..a2aaf01911 100644 --- a/web/client/components/widgets/builder/wizard/map/Toolbar.jsx +++ b/web/client/components/widgets/builder/wizard/map/Toolbar.jsx @@ -26,7 +26,7 @@ export default ({ step = 0, buttons, tocButtons = [], stepButtons = [], dashBoar return ( setPage(Math.max(step - 1, 0)), diff --git a/web/client/components/widgets/builder/wizard/table/Toolbar.jsx b/web/client/components/widgets/builder/wizard/table/Toolbar.jsx index 88e625e504..a5f733c457 100644 --- a/web/client/components/widgets/builder/wizard/table/Toolbar.jsx +++ b/web/client/components/widgets/builder/wizard/table/Toolbar.jsx @@ -36,7 +36,7 @@ const getSaveTooltipId = (step, {id} = {}) => { export default ({ openFilterEditor = () => { }, step = 0, stepButtons = [], editorData = {}, setPage = () => {}, onFinish = () => {}} = {}) => ( setPage(Math.max(0, step - 1)), diff --git a/web/client/components/widgets/builder/wizard/text/Toolbar.jsx b/web/client/components/widgets/builder/wizard/text/Toolbar.jsx index e07ca3f9a3..ae167e8850 100644 --- a/web/client/components/widgets/builder/wizard/text/Toolbar.jsx +++ b/web/client/components/widgets/builder/wizard/text/Toolbar.jsx @@ -20,7 +20,7 @@ const getSaveTooltipId = (step, {id} = {}) => { export default ({ step = 0, editorData = {}, stepButtons = [], onFinish = () => {}} = {}) => ( onFinish(Math.min(step + 1, 1)), diff --git a/web/client/epics/maplayout.js b/web/client/epics/maplayout.js index 05b9067e44..54e9877c03 100644 --- a/web/client/epics/maplayout.js +++ b/web/client/epics/maplayout.js @@ -78,7 +78,7 @@ export const updateMapLayoutEpic = (action$, store) => // Calculating sidebar's rectangle to be used by dock panels const rightSidebars = head([ - get(state, "controls.sidebarMenu.enabled") && {right: 40} || null + get(state, "controls.sidebarMenu.enabled") && {right: 30} || null ]) || {right: 0}; const leftSidebars = head([ null diff --git a/web/client/plugins/AddWidgetDashboard.jsx b/web/client/plugins/AddWidgetDashboard.jsx index ada8b63621..50f83f4ed7 100644 --- a/web/client/plugins/AddWidgetDashboard.jsx +++ b/web/client/plugins/AddWidgetDashboard.jsx @@ -45,7 +45,7 @@ class AddWidgetDashboard extends React.Component { }} id={'ms-add-card-dashboard'} tooltipPosition={'left'} - btnDefaultProps={{ tooltipPosition: 'right', className: 'square-button-md', bsStyle: this.props.editing ? 'primary' : 'tray' }}/>); + btnDefaultProps={{ tooltipPosition: 'right', className: 'square-button', bsStyle: this.props.editing ? 'primary' : 'tray' }}/>); } } diff --git a/web/client/plugins/Annotations/components/FeaturesEditor.jsx b/web/client/plugins/Annotations/components/FeaturesEditor.jsx index 461992ffb6..678560ec01 100644 --- a/web/client/plugins/Annotations/components/FeaturesEditor.jsx +++ b/web/client/plugins/Annotations/components/FeaturesEditor.jsx @@ -333,7 +333,7 @@ export function FeaturesEditor({
- - - - - @@ -408,7 +408,7 @@ export function FeaturesEditor({ @@ -248,7 +248,7 @@ function AnnotationsPanel({ ); if (child.props.buttonConfig && child.props.buttonConfig.tooltip) { @@ -97,13 +97,13 @@ class Menu extends React.Component { {this.renderButtons()} - ) : ( {this.props.title} - ); diff --git a/web/client/plugins/manager/ManagerMenu.jsx b/web/client/plugins/manager/ManagerMenu.jsx index ebdc52cf43..c3eab40efd 100644 --- a/web/client/plugins/manager/ManagerMenu.jsx +++ b/web/client/plugins/manager/ManagerMenu.jsx @@ -81,7 +81,7 @@ function ManagerMenu({ title={} tooltipId="manager.managerMenu" tooltipPosition="bottom" - className="square-button-md" + className="square-button" > {title} {defaultItems.map((entry, key) => { diff --git a/web/client/plugins/playback/Playback.jsx b/web/client/plugins/playback/Playback.jsx index 24ea534645..2d74adff73 100644 --- a/web/client/plugins/playback/Playback.jsx +++ b/web/client/plugins/playback/Playback.jsx @@ -82,7 +82,7 @@ export default playbackEnhancer(({ { (status !== statusMap.PLAY && status !== statusMap.PAUSE) && showSettings && } filterText & tools: ( ({ style={{marginLeft: 4}} tooltipPosition={"right"} tooltip={} - className="maps-subtitle square-button-md no-border" + className="maps-subtitle square-button no-border" key="info-sign"> diff --git a/web/client/plugins/widgetbuilder/MapLayerSelector.jsx b/web/client/plugins/widgetbuilder/MapLayerSelector.jsx index 4e8e7e037c..34b080ad47 100644 --- a/web/client/plugins/widgetbuilder/MapLayerSelector.jsx +++ b/web/client/plugins/widgetbuilder/MapLayerSelector.jsx @@ -35,7 +35,7 @@ export default ({ onClose = () => { }, setSelected = () => { }, onLayerChoice = className="bg-body layer-selector" header={ div { - padding-bottom: @square-btn-medium-size; + padding-bottom: @square-btn-size; border-bottom: 2px solid @ms-primary; } } &.ms-below { & > div { - padding-top: @square-btn-medium-size; + padding-top: @square-btn-size; border-top: 2px solid @ms-primary; } } @@ -428,7 +428,7 @@ } .ms-sections-container-small-screen { - @ms-story-padding-small-screen: (@square-btn-medium-size / 2 + 8px); + @ms-story-padding-small-screen: (@square-btn-size / 2 + 8px); .ms-section .ms-section-background .ms-section-background-container .ms-media { /* alignment of content */ .ms-story-align-center(); @@ -492,12 +492,12 @@ &.ms-section-title .ms-content-text, &.ms-section-immersive .ms-content-column, &.ms-section-carousel .ms-content-column { - padding-right: (@square-btn-medium-size + 8px); + padding-right: (@square-btn-size + 8px); } } } .ms-sections-container-medium-screen { - @ms-story-padding-medium-screen: (@square-btn-medium-size * 1.5); + @ms-story-padding-medium-screen: (@square-btn-size * 1.5); .ms-section .ms-section-background .ms-section-background-container { /* size of content */ &.ms-size-full .ms-media { width: @ms-story-size-full; } @@ -665,7 +665,7 @@ .ms-content-toolbar { display: flex; padding: 0 16px; - padding-top: (@square-btn-medium-size / 2); + padding-top: (@square-btn-size / 2); .btn-group { margin-right: 0; margin-left: auto; @@ -707,7 +707,7 @@ width: 550px; height: 50px; bottom: 220px; - left: -(@square-btn-medium-size / 2); + left: -(@square-btn-size / 2); font-weight: bold; &:before { content: ""; @@ -829,15 +829,15 @@ border-top: 1px solid @ms-story-bg-grey; border-right: 1px solid @ms-story-bg-grey; border-left: 1px solid @ms-story-bg-grey; - width: (@square-btn-medium-size + 2); + width: (@square-btn-size + 2); border-top-left-radius: 50%; margin-left: 50%; transform: translateX(-50%); border-top-right-radius: 50%; .btn { /* override default style of bootstrap */ - height: @square-btn-medium-size; - width: @square-btn-medium-size; + height: @square-btn-size; + width: @square-btn-size; padding: 0; outline: 0; .no-border(); @@ -884,8 +884,8 @@ /* render the toolbar has a floating container at top left corner of title container */ .ms-content-toolbar { position: absolute; - margin-left: (-@square-btn-medium-size / 2); - margin-top: (-@square-btn-medium-size * 0.6); + margin-left: (-@square-btn-size / 2); + margin-top: (-@square-btn-size * 0.6); padding: 0; z-index: 2; .shadow-soft(); @@ -897,8 +897,8 @@ where the alignment effect is not visible without this improvement */ &.ms-align-center .ms-content-body { margin-left: auto; margin-right: auto; } - &.ms-align-left .ms-content-body { margin-left: (@square-btn-medium-size + 8px); margin-right: auto; } - &.ms-align-right .ms-content-body { margin-left: auto; margin-right: (@square-btn-medium-size + 8px); } + &.ms-align-left .ms-content-body { margin-left: (@square-btn-size + 8px); margin-right: auto; } + &.ms-align-right .ms-content-body { margin-left: auto; margin-right: (@square-btn-size + 8px); } /* text on full size should fill all the width of container */ &.ms-size-full { width: 100%; @@ -1055,8 +1055,8 @@ &>.ms-content-toolbar { position: absolute; z-index: 2; - margin-left: (-@square-btn-medium-size / 2); - margin-top: (-@square-btn-medium-size * 0.6); + margin-left: (-@square-btn-size / 2); + margin-top: (-@square-btn-size * 0.6); padding: 0; .shadow-soft(); } @@ -1560,8 +1560,8 @@ height: 180px; .ms-content-toolbar { position: absolute; - margin-left: (-@square-btn-medium-size / 2); - margin-top: (-@square-btn-medium-size * 0.6); + margin-left: (-@square-btn-size / 2); + margin-top: (-@square-btn-size * 0.6); padding: 0; z-index: 2; border-top: none; @@ -1653,8 +1653,8 @@ } .ms-expand-media-button { - height: @square-btn-medium-size; - width: @square-btn-medium-size; + height: @square-btn-size; + width: @square-btn-size; padding: 0; outline: 0; .shadow-soft(); @@ -1685,7 +1685,7 @@ display: flex; align-items: center; margin: 4px 0; - min-height: @square-btn-medium-size; + min-height: @square-btn-size; & > div { display: flex; position: relative; @@ -1780,7 +1780,7 @@ display: flex; align-items: center; margin: 4px 0; - min-height: @square-btn-medium-size; + min-height: @square-btn-size; & > div { position: relative; align-items: center; diff --git a/web/client/themes/default/less/get-feature.less b/web/client/themes/default/less/get-feature.less index 5e3433d821..cd97fed1ce 100644 --- a/web/client/themes/default/less/get-feature.less +++ b/web/client/themes/default/less/get-feature.less @@ -234,7 +234,7 @@ padding: 0 8px; } .ms-identify-swipe-header-arrow { - min-width: @square-btn-medium-size; + min-width: @square-btn-size; } } diff --git a/web/client/themes/default/less/legacy-annotations.less b/web/client/themes/default/less/legacy-annotations.less index cea4a3594c..25ee15929f 100644 --- a/web/client/themes/default/less/legacy-annotations.less +++ b/web/client/themes/default/less/legacy-annotations.less @@ -439,15 +439,15 @@ } .geometry-card-preview { - width: @square-btn-medium-size; - height: @square-btn-medium-size; + width: @square-btn-size; + height: @square-btn-size; margin: 8px; display: flex; align-items: center; justify-content: center; .glyphicon { - font-size: (@square-btn-medium-size * 2 / 3); + font-size: (@square-btn-size * 2 / 3); } } diff --git a/web/client/themes/default/less/loaders.less b/web/client/themes/default/less/loaders.less index c180ff32c3..e0d0c51598 100644 --- a/web/client/themes/default/less/loaders.less +++ b/web/client/themes/default/less/loaders.less @@ -55,8 +55,8 @@ .mapstore-circle-loader-with-css-variables(12px, 100%, @theme-vars[loader-primary-color], @theme-vars[loader-primary-fade-color]); } .mapstore-inline-loader { - margin: @padding-left-square-md; - .mapstore-circle-loader-with-css-variables((@icon-size-md/10), @icon-size-md, @theme-vars[loader-primary-color], @theme-vars[loader-primary-fade-color]); + margin: @padding-left-square; + .mapstore-circle-loader-with-css-variables((@icon-size/10), @icon-size, @theme-vars[loader-primary-color], @theme-vars[loader-primary-fade-color]); } } diff --git a/web/client/themes/default/less/map-search-bar.less b/web/client/themes/default/less/map-search-bar.less index 0508cc2cc4..31fe43df22 100644 --- a/web/client/themes/default/less/map-search-bar.less +++ b/web/client/themes/default/less/map-search-bar.less @@ -136,7 +136,7 @@ div.MapSearchBar .form-control:focus { -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - .square-button-md { + .square-button { .ms-loader { >div { border-top-color: rgba(7, 138, 163, 0.2); diff --git a/web/client/themes/default/less/map-toolbar.less b/web/client/themes/default/less/map-toolbar.less index f561c475fe..3ebff25f60 100644 --- a/web/client/themes/default/less/map-toolbar.less +++ b/web/client/themes/default/less/map-toolbar.less @@ -17,6 +17,7 @@ // ************** .mapToolbar { box-shadow: -1px 1px 5px 1px rgba(94, 94, 94, 1); + border-radius: @border-radius-base; } .mapToolbar { diff --git a/web/client/themes/default/less/maps-properties.less b/web/client/themes/default/less/maps-properties.less index 6dca4278d6..25302418bc 100644 --- a/web/client/themes/default/less/maps-properties.less +++ b/web/client/themes/default/less/maps-properties.less @@ -259,7 +259,7 @@ margin-right: 20px; } .Select { - width: ~"calc(50% - @{square-btn-medium-size} - 5px)"; + width: ~"calc(50% - @{square-btn-size} - 5px)"; margin-right: 5px; margin-top: (@square-btn-size - 34px) / 2; .Select-control { @@ -276,7 +276,7 @@ } button { float: right; - margin-top: ((@square-btn-size - @square-btn-medium-size) / 2); + margin-top: ((@square-btn-size - @square-btn-size) / 2); } .ms-permission-title { width: ~"calc(50% - 20px)"; @@ -299,13 +299,13 @@ margin: 0; .m-label { - margin-top:(( @square-btn-size - @square-btn-medium-size) / 2); - height: @square-btn-medium-size; - line-height: @square-btn-medium-size; + margin-top:(( @square-btn-size - @square-btn-size) / 2); + height: @square-btn-size; + line-height: @square-btn-size; } .btn-group { - margin-top:(( @square-btn-size - @square-btn-medium-size) / 2); + margin-top:(( @square-btn-size - @square-btn-size) / 2); } .ms-details-sheet { @@ -316,8 +316,8 @@ margin-top: 0; } strong { - height: @square-btn-medium-size; - line-height: @square-btn-medium-size; + height: @square-btn-size; + line-height: @square-btn-size; font-weight: normal; } img { diff --git a/web/client/themes/default/less/media-editor.less b/web/client/themes/default/less/media-editor.less index 2f055cfb17..a91d21043e 100644 --- a/web/client/themes/default/less/media-editor.less +++ b/web/client/themes/default/less/media-editor.less @@ -123,17 +123,7 @@ width: 300px; .btn-group { - button { - border-radius: 0; - &:first-child { - border-top-left-radius: @border-radius-base; - border-bottom-left-radius: @border-radius-base; - } - &:last-child { - border-top-right-radius: @border-radius-base; - border-bottom-right-radius: @border-radius-base; - } - } + .button-group-with-border-radius(); } } } @@ -157,17 +147,7 @@ } } .btn-group { - button { - border-radius: 0; - &:first-child { - border-top-left-radius: @border-radius-base; - border-bottom-left-radius: @border-radius-base; - } - &:last-child { - border-top-right-radius: @border-radius-base; - border-bottom-right-radius: @border-radius-base; - } - } + .button-group-with-border-radius(); } } .ms-mapForm { diff --git a/web/client/themes/default/less/navbar.less b/web/client/themes/default/less/navbar.less index 7d570c2469..6bbf1890c7 100644 --- a/web/client/themes/default/less/navbar.less +++ b/web/client/themes/default/less/navbar.less @@ -51,7 +51,7 @@ ol { .nav-body { position: absolute; - top: @nav-toc-top; + top: 40px; bottom: 0; overflow: auto; width: 100%; diff --git a/web/client/themes/default/less/query-panel.less b/web/client/themes/default/less/query-panel.less index 97f9f19cd4..da5c972387 100644 --- a/web/client/themes/default/less/query-panel.less +++ b/web/client/themes/default/less/query-panel.less @@ -31,6 +31,12 @@ .ms2-border-layout-body { .background-color-var(@theme-vars[main-bg]); } + + .query-toolbar { + span { + .button-group-with-border-radius(); + } + } } .mapstore-conditions-group { @@ -134,11 +140,11 @@ } .ms2-border-layout-body { - padding: @square-btn-small-size; + padding: @square-btn-size; .mapstore-switch-panel { - margin-bottom: @square-btn-small-size; - padding: 0 (@square-btn-small-size / 2); + margin-bottom: @square-btn-size; + padding: 0 (@square-btn-size / 2); border: none; .shadow-soft; @@ -181,7 +187,7 @@ } .mapstore-conditions-group { - padding-left: @square-btn-small-size; + padding-left: @square-btn-size; padding-right: 0; border-left-width: 1px; border-left-style: solid; diff --git a/web/client/themes/default/less/react-select.less b/web/client/themes/default/less/react-select.less index b79d2db046..9d84d9b30d 100644 --- a/web/client/themes/default/less/react-select.less +++ b/web/client/themes/default/less/react-select.less @@ -184,8 +184,8 @@ // ************** @import '~react-select/less/select.less'; @select-input-height: 30; // reduced height to align it to other inputs -@select-input-border-radius: 0; -@select-item-border-radius: 0; +@select-input-border-radius: @border-radius-base; +@select-item-border-radius: @border-radius-base; .Select { * { diff --git a/web/client/themes/default/less/sidegrid.less b/web/client/themes/default/less/sidegrid.less index b0ebd53cc2..077a08d589 100644 --- a/web/client/themes/default/less/sidegrid.less +++ b/web/client/themes/default/less/sidegrid.less @@ -224,17 +224,7 @@ display: flex; flex-direction: column; .mapstore-side-card-tool { - button { - border-radius: 0; - &:first-child { - border-top-left-radius: @border-radius-base; - border-bottom-left-radius: @border-radius-base; - } - &:last-child { - border-top-right-radius: @border-radius-base; - border-bottom-right-radius: @border-radius-base; - } - } + .button-group-with-border-radius(); } } diff --git a/web/client/themes/default/less/sliders.less b/web/client/themes/default/less/sliders.less index 5374899af9..390b3a669e 100644 --- a/web/client/themes/default/less/sliders.less +++ b/web/client/themes/default/less/sliders.less @@ -114,8 +114,8 @@ &:before, &:after { - height: @square-btn-small-size; - width: @square-btn-small-size; + height: @square-btn-size; + width: @square-btn-size; background: transparent; left: 0; top: 0; @@ -220,7 +220,7 @@ display: flex; align-items: center; justify-content: center; - line-height: @square-btn-small-size; + line-height: @square-btn-size; } } } diff --git a/web/client/themes/default/less/square-button.less b/web/client/themes/default/less/square-button.less index eabc5411dc..41b017af3b 100644 --- a/web/client/themes/default/less/square-button.less +++ b/web/client/themes/default/less/square-button.less @@ -16,50 +16,28 @@ // Layout // ************** .square-button { - // // !important due to vertical btn-group eg. dashboard - // height: @square-btn-size; - // width: @square-btn-size; - // display: inline-flex; - // align-items: center; - // justify-content: center; - // outline: 0; - // padding: 0; - // .glyphicon { - // margin: auto; - // font-size: @icon-size; - // } - // .ms-loader { - // height: @icon-size; - // width: @icon-size; - // margin: auto; - // > div { - // margin: auto; - // .mapstore-circle-loader-with-css-variables(@icon-size / 10, @icon-size); - - // } - // } // !important due to vertical btn-group eg. dashboard &.input-group-addon { display: flex; } &, .btn-group-vertical & { - height: @square-btn-medium-size; - width: @square-btn-medium-size; + height: @square-btn-size; + width: @square-btn-size; padding: 0; outline: 0; } .fa, .glyphicon { margin: auto; - font-size: @icon-size-md; + font-size: @icon-size; } .ms-loader { - height: @icon-size-md; - width: @icon-size-md; + height: @icon-size; + width: @icon-size; margin: auto; > div { margin: auto; - .mapstore-circle-loader-with-css-variables(@icon-size-md/10, @icon-size-md); + .mapstore-circle-loader-with-css-variables(@icon-size/10, @icon-size); } } @@ -67,61 +45,14 @@ display: inline-flex; justify-content: center; align-items: center; - font-size: @icon-size-md; + font-size: @icon-size; } .btn-group-vertical > .square-button { width: @square-btn-size; } -.square-button-md { - // !important due to vertical btn-group eg. dashboard - &.input-group-addon { - display: flex; - } - &, .btn-group-vertical & { - height: @square-btn-medium-size; - width: @square-btn-medium-size; - padding: 0; - outline: 0; - } - .fa, - .glyphicon { - margin: auto; - font-size: @icon-size-md; - } - .ms-loader { - height: @icon-size-md; - width: @icon-size-md; - margin: auto; - > div { - margin: auto; - .mapstore-circle-loader-with-css-variables(@icon-size-md/10, @icon-size-md); - } - } - - // TODO: check and remove all the above rules - display: inline-flex; - justify-content: center; - align-items: center; - font-size: @icon-size-md; -} - -.square-button-sm { - &, .btn-group-vertical & { - height: @square-btn-small-size; - width: @square-btn-small-size ; - padding: 0; - outline: 0 ; - } - .fa, - .glyphicon { - margin: auto; - font-size: @icon-size-sm; - } -} - -.dropdown.btn-group > .square-button-md+button.dropdown-toggle { - height: @square-btn-medium-size; +.dropdown.btn-group > .square-button+button.dropdown-toggle { + height: @square-btn-size; padding: 2px; } diff --git a/web/client/themes/default/less/style-editor.less b/web/client/themes/default/less/style-editor.less index 4fb0e220b5..5eb9402768 100644 --- a/web/client/themes/default/less/style-editor.less +++ b/web/client/themes/default/less/style-editor.less @@ -439,10 +439,11 @@ Ported to CodeMirror by Peter Kroon .ms-color-selector { position: relative; display: flex; - height: @square-btn-medium-size; + height: @square-btn-size; width: 100%; border: 1px solid @ms-main-border-color; padding: 4px; + border-radius: @border-radius-base; .ms-popover { position: relative; display: flex; diff --git a/web/client/themes/default/less/swipe.less b/web/client/themes/default/less/swipe.less index 187032f7ff..01f0844992 100644 --- a/web/client/themes/default/less/swipe.less +++ b/web/client/themes/default/less/swipe.less @@ -63,8 +63,8 @@ } .ms-slider-arrows { - height: @square-btn-medium-size; - width: @square-btn-medium-size; + height: @square-btn-size; + width: @square-btn-size; padding: 0; border-width: 1px; border-style: solid; diff --git a/web/client/themes/default/less/switch.less b/web/client/themes/default/less/switch.less index 1ba5f4121d..119260e040 100644 --- a/web/client/themes/default/less/switch.less +++ b/web/client/themes/default/less/switch.less @@ -58,8 +58,8 @@ .mapstore-switch-btn { position: relative; display: inline-block; - width: ((@square-btn-small-size * 2) - 8px); /* 60 */ - height: @square-btn-small-size; /* 34 */ + width: ((@button-size-sm * 2) - 8px); /* 60 */ + height: @button-size-sm; /* 34 */ .m-slider { position: absolute; @@ -71,17 +71,18 @@ opacity: 0.4; -webkit-transition: 0.4s; transition: 0.4s; + border-radius: 9999px; &:before { position: absolute; content: " "; - height: @square-btn-small-size - 8px; - width: @square-btn-small-size - 8px; + height: @button-size-sm - 8px; + width: @button-size-sm - 8px; left: 4px; bottom: 4px; -webkit-transition: 0.4s; transition: 0.4s; - + border-radius: 9999px; } } @@ -92,7 +93,7 @@ + .m-slider { opacity: 1.0; &:before { - transform: translateX(@square-btn-small-size - 8px); + transform: translateX(@button-size-sm - 8px); } } } diff --git a/web/client/themes/default/less/switchpanel.less b/web/client/themes/default/less/switchpanel.less index 22efe1e1c9..b5bacc8939 100644 --- a/web/client/themes/default/less/switchpanel.less +++ b/web/client/themes/default/less/switchpanel.less @@ -37,23 +37,23 @@ } .mapstore-switch-btn, .switch-error, .switch-loading { float: right; - margin: ((@square-btn-size - @square-btn-small-size) / 2) 0; + margin: ((@square-btn-size - @button-size-sm) / 2) 0; } .switch-loading { - width: @square-btn-small-size; - height: @square-btn-small-size; + width: @square-btn-size; + height: @square-btn-size; } .btn-group { float: right; - margin: (((@square-btn-size - @square-btn-small-size) / 2) - 2) 0; - margin-right: ((((@square-btn-size - @square-btn-small-size) / 2) - 2) / 2); - .square-button-sm { + margin: (((@square-btn-size - @button-size-sm) / 2) - 2) 0; + margin-right: ((((@square-btn-size - @button-size-sm) / 2) - 2) / 2); + .square-button { padding: 0; text-align: center; - padding-top: (@icon-size-md / 8); - margin-left: ((((@square-btn-size - @square-btn-small-size) / 2) - 2) / 2); + padding-top: (@icon-size / 8); + margin-left: ((((@square-btn-size - @button-size-sm) / 2) - 2) / 2); span { - font-size: @icon-size-md; + font-size: @icon-size; } } } @@ -62,18 +62,18 @@ .panel-body { .mapstore-block-width { .m-label { - height: @square-btn-medium-size; - line-height: @square-btn-medium-size; + height: @square-btn-size; + line-height: @square-btn-size; width: 100%; text-overflow: ellipsis; - margin-top: ((@square-btn-size - @square-btn-medium-size) / 2); + margin-top: ((@square-btn-size - @button-size-sm) / 2); } .rw-combobox { margin-top: ((@square-btn-size - 34) / 2); } .btn-group { - margin-top: ((@square-btn-size - @square-btn-medium-size) / 2); + margin-top: ((@square-btn-size - @button-size-sm) / 2); } } padding: 0; diff --git a/web/client/themes/default/less/timeline.less b/web/client/themes/default/less/timeline.less index 24f4ee5d0a..3f97824113 100644 --- a/web/client/themes/default/less/timeline.less +++ b/web/client/themes/default/less/timeline.less @@ -384,6 +384,7 @@ border-top-left-radius: 50%; border-top-right-radius: 50%; height: 20px; + width: 22px; } /* local mixin to highlight handlers on timeline, used on active and over */ @@ -656,17 +657,7 @@ .shadow-soft; .timeline-plugin-btn-group { display: flex; - button { - border-radius: 0; - &:first-child { - border-top-left-radius: @border-radius-base; - border-bottom-left-radius: @border-radius-base; - } - &:last-child { - border-top-right-radius: @border-radius-base; - border-bottom-right-radius: @border-radius-base; - } - } + .button-group-with-border-radius(); } h4 { margin-left: 8px; @@ -948,7 +939,7 @@ padding-right: 8px; border-right: 1px solid @ms-main-border-color; background-color: @ms-main-bg; - min-height: @square-btn-medium-size; + min-height: @square-btn-size; display: flex; align-items: center; .form-group { @@ -1078,15 +1069,5 @@ } } } - button { - border-radius: 0; - &:first-child { - border-top-left-radius: @border-radius-base; - border-bottom-left-radius: @border-radius-base; - } - &:last-child { - border-top-right-radius: @border-radius-base; - border-bottom-right-radius: @border-radius-base; - } - } + .button-group-with-border-radius(); } diff --git a/web/client/themes/default/less/toc-settings.less b/web/client/themes/default/less/toc-settings.less index a58cd5fa71..1877d8d1db 100644 --- a/web/client/themes/default/less/toc-settings.less +++ b/web/client/themes/default/less/toc-settings.less @@ -12,7 +12,7 @@ #ms-components-theme(@theme-vars) { .thematic_layer { - .square-button-sm.no-border[disabled] { + .square-button.no-border[disabled] { .color-var(@theme-vars[primary]); .background-color-var(@theme-vars[primary-contrast]); } @@ -83,7 +83,7 @@ margin-top: -338px; } - .square-button-sm.no-border[disabled] { + .square-button.no-border[disabled] { background-color: #FFFFFF; color: #5C9FB4; opacity: 0.5; @@ -166,6 +166,10 @@ .layer-fields-toolbar { text-align: center; margin: 15px; + + span { + .button-group-with-border-radius(); + } } .layer-fields-row-header { height: 25px; diff --git a/web/client/themes/default/less/toc.less b/web/client/themes/default/less/toc.less index 7316d549dd..d7df1d199f 100644 --- a/web/client/themes/default/less/toc.less +++ b/web/client/themes/default/less/toc.less @@ -158,8 +158,8 @@ margin: 0; } .toc-toolbar-button { - width: @square-btn-medium-size; - height: @square-btn-medium-size; + width: @square-btn-size; + height: @square-btn-size; display: inline-flex; align-items: center; justify-content: center; @@ -168,8 +168,8 @@ .dropdown-toggle { padding: 0; border: transparent; - height: @square-btn-medium-size; - width: @square-btn-medium-size; + height: @square-btn-size; + width: @square-btn-size; display: flex; align-items: center; justify-content: center; @@ -185,29 +185,20 @@ } } .ms-toc-toolbar-dropdown { - width: @square-btn-medium-size / 2; + width: @square-btn-size / 2; } .ms-toc-toolbar-content { button { border-radius: 0; } - div { - &:first-child { - button { - &:first-child { - border-top-left-radius: @border-radius-base; - border-bottom-left-radius: @border-radius-base; - } - } - } - &:last-child { - button { - &:last-child { - border-top-right-radius: @border-radius-base; - border-bottom-right-radius: @border-radius-base; - } - } - } + div button { border-radius: 0; } + div button.is-first { + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; + } + div button.is-last { + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; } } } @@ -421,7 +412,7 @@ .wms-legend { .wms-json-legend-rule { display: flex; - margin-bottom: @padding-left-square-md; + margin-bottom: @padding-left-square; .ms-legend-icon { margin-right: 8px; } diff --git a/web/client/themes/default/less/widget.less b/web/client/themes/default/less/widget.less index 5b5e9b5a4b..265ea16f55 100644 --- a/web/client/themes/default/less/widget.less +++ b/web/client/themes/default/less/widget.less @@ -86,7 +86,7 @@ >span { .border-right-color-var(@theme-vars[main-border-color]); } - > span > button { + > span > button.btn-tray { border-radius: 0; } } @@ -547,8 +547,8 @@ padding: 0; .mapstore-switch-panel { - margin-bottom: @square-btn-small-size; - padding: 0 @square-btn-small-size / 2; + margin-bottom: @square-btn-size; + padding: 0 @square-btn-size / 2; border: none; .shadow-soft; .panel-title { diff --git a/web/client/themes/default/less/wizard.less b/web/client/themes/default/less/wizard.less index 1076afc5dc..e10b0bcc68 100644 --- a/web/client/themes/default/less/wizard.less +++ b/web/client/themes/default/less/wizard.less @@ -151,6 +151,24 @@ } } +.ms-wizard-chart-selector, +.ms-wizard.chart-options { + span:first-child > button { + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; + } + span:last-child > button { + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; + } + span > button { + border-radius: 0; + } + .input-group input.form-control { + border-radius: @border-radius-base !important; + } +} + .ms-wizard-chart-custom-classification { .shadow-soft(); width: 450px; diff --git a/web/client/themes/default/ms-variables.less b/web/client/themes/default/ms-variables.less index 9d90100b1e..2721e4aa3b 100644 --- a/web/client/themes/default/ms-variables.less +++ b/web/client/themes/default/ms-variables.less @@ -377,22 +377,13 @@ @square-btn-size: 30px; @padding-left-square: floor(((@square-btn-size - @icon-size) / 2)); -@icon-size-md: 15px; -@square-btn-medium-size: 30px; -@padding-left-square-md: floor(((@square-btn-medium-size - @icon-size-md) / 2)); - -@icon-size-sm: 15px; -@square-btn-small-size: 30px; -@padding-left-square-sm: floor(((@square-btn-small-size - @icon-size-sm) / 2)); - @grid-icon-size: 16px; @grid-btn-size: 32px; @grid-btn-padding-left: floor(((@grid-btn-size - @grid-icon-size) / 2)); @card-height: 52px; -@nav-toc-top: 40px; - +@button-size-sm: 22px; // ****************************************** From 2218f739794cc2945ea1f12c2099a1d6b799c398 Mon Sep 17 00:00:00 2001 From: Sovas Tiwari Date: Wed, 3 Sep 2025 07:58:53 +0100 Subject: [PATCH 3/5] Fix the button, and accordion layout and add square-button in the widget tray --- .../resources/modals/fragments/PermissionEditor.jsx | 5 +++-- web/client/components/share/ShareCopyToClipboard.jsx | 1 + web/client/components/widgets/view/WidgetsBar.jsx | 2 +- web/client/epics/__tests__/maplayout-test.js | 6 +++--- web/client/plugins/Login.jsx | 1 - web/client/plugins/timeline/TimelineToggle.jsx | 2 +- web/client/plugins/widgets/WidgetsTray.jsx | 7 +++---- web/client/themes/default/less/map-toolbar.less | 6 +++++- web/client/themes/default/less/switchpanel.less | 4 ++-- web/client/themes/default/less/widget.less | 12 ++++++------ web/client/themes/default/ms-variables.less | 1 + 11 files changed, 26 insertions(+), 21 deletions(-) diff --git a/web/client/components/resources/modals/fragments/PermissionEditor.jsx b/web/client/components/resources/modals/fragments/PermissionEditor.jsx index fae5dbfc46..73921145e0 100644 --- a/web/client/components/resources/modals/fragments/PermissionEditor.jsx +++ b/web/client/components/resources/modals/fragments/PermissionEditor.jsx @@ -174,6 +174,7 @@ class PermissionEditor extends React.Component { key={"deleteButton" + index} ref="deleteButton" bsStyle="danger" + className="square-button" disabled={this.props.disabled} onClick={this.onChangePermission.bind(this, group.groupName, "delete")}> @@ -225,9 +226,9 @@ class PermissionEditor extends React.Component { + onClick={this.onAddPermission} > diff --git a/web/client/components/share/ShareCopyToClipboard.jsx b/web/client/components/share/ShareCopyToClipboard.jsx index d7c72a3a2d..8cb300b973 100644 --- a/web/client/components/share/ShareCopyToClipboard.jsx +++ b/web/client/components/share/ShareCopyToClipboard.jsx @@ -29,6 +29,7 @@ const ShareCopyToClipboard = ({ onCopy={ () => onCopy(shareUrl) } > diff --git a/web/client/components/widgets/view/WidgetsBar.jsx b/web/client/components/widgets/view/WidgetsBar.jsx index b39bdc6668..4d8d30941a 100644 --- a/web/client/components/widgets/view/WidgetsBar.jsx +++ b/web/client/components/widgets/view/WidgetsBar.jsx @@ -50,7 +50,7 @@ export default compose( buttons: widgets.map(w => ({ glyph: getWidgetIcon(w), tooltip: w.title, - className: w.collapsed ? "btn-tray" : "btn-tray active", + className: `square-button ${w.collapsed ? "btn-tray" : "btn-tray active"}`, onClick: () => onClick(w) })) }) diff --git a/web/client/epics/__tests__/maplayout-test.js b/web/client/epics/__tests__/maplayout-test.js index 39d7d29a8b..30e9ab8b9d 100644 --- a/web/client/epics/__tests__/maplayout-test.js +++ b/web/client/epics/__tests__/maplayout-test.js @@ -56,13 +56,13 @@ describe('map layout epics', () => { actions.map((action) => { expect(action.type).toBe(UPDATE_MAP_LAYOUT); expect(action.layout).toEqual( - { left: 600, right: DEFAULT_PANEL_WIDTH + 40, bottom: 0, transform: 'none', height: 'calc(100% - 30px)', + { left: 600, right: DEFAULT_PANEL_WIDTH + 30, bottom: 0, transform: 'none', height: 'calc(100% - 30px)', boundingMapRect: { bottom: 0, left: 600, - right: DEFAULT_PANEL_WIDTH + 40 + right: DEFAULT_PANEL_WIDTH + 30 }, - boundingSidebarRect: { right: 40, left: 0, bottom: 0 }, + boundingSidebarRect: { right: 30, left: 0, bottom: 0 }, leftPanel: true, rightPanel: true } diff --git a/web/client/plugins/Login.jsx b/web/client/plugins/Login.jsx index 9a938139d1..25925cafc5 100644 --- a/web/client/plugins/Login.jsx +++ b/web/client/plugins/Login.jsx @@ -254,7 +254,6 @@ export default createPlugin('Login', { target: 'right-menu', position: 9, priority: 3, - // TODO: remove square-button as soon all square button size are aligned Component: connect(() => ({ className: 'square-button' }))(ConnectedLoginPlugin) }, SidebarMenu: { diff --git a/web/client/plugins/timeline/TimelineToggle.jsx b/web/client/plugins/timeline/TimelineToggle.jsx index 7af3db1ae4..7723dc5b50 100644 --- a/web/client/plugins/timeline/TimelineToggle.jsx +++ b/web/client/plugins/timeline/TimelineToggle.jsx @@ -72,7 +72,7 @@ const withTempHintPopover = () => const Button = withTempHintPopover()(RButton); const ToggleButton = (props) => (); /** diff --git a/web/client/plugins/widgets/WidgetsTray.jsx b/web/client/plugins/widgets/WidgetsTray.jsx index f7cb79a639..411384bf90 100644 --- a/web/client/plugins/widgets/WidgetsTray.jsx +++ b/web/client/plugins/widgets/WidgetsTray.jsx @@ -33,7 +33,7 @@ const Button = tooltip(BButton); const CollapseTrayButton = ({ expanded, onClick = () => { } } = {}) => ()); @@ -98,7 +97,7 @@ class WidgetsTray extends React.Component { ? (
span > button.btn-tray { + border-radius: 0; + } + button { border-radius: 0; &:first-child { border-top-left-radius: @border-radius-base; @@ -86,9 +89,6 @@ >span { .border-right-color-var(@theme-vars[main-border-color]); } - > span > button.btn-tray { - border-radius: 0; - } } } @@ -547,8 +547,8 @@ padding: 0; .mapstore-switch-panel { - margin-bottom: @square-btn-size; - padding: 0 @square-btn-size / 2; + margin-bottom: @switch-panel-height; + padding: 0 @switch-panel-height / 2; border: none; .shadow-soft; .panel-title { diff --git a/web/client/themes/default/ms-variables.less b/web/client/themes/default/ms-variables.less index 2721e4aa3b..6dbffb74fe 100644 --- a/web/client/themes/default/ms-variables.less +++ b/web/client/themes/default/ms-variables.less @@ -384,6 +384,7 @@ @card-height: 52px; @button-size-sm: 22px; +@switch-panel-height: 40px; // ****************************************** From 95cbb6e6c7403aa509bbd255fe748150df1e129a Mon Sep 17 00:00:00 2001 From: Sovas Tiwari Date: Tue, 9 Sep 2025 10:23:28 +0100 Subject: [PATCH 4/5] Fix the button style in toolbar using state rather that direct dom manipulation --- web/client/plugins/TOC/components/Toolbar.jsx | 8 +- web/client/plugins/TOC/utils/TOCUtils.js | 30 ++--- .../TOC/utils/__tests__/TOCUtils-test.js | 117 ++++++++---------- 3 files changed, 63 insertions(+), 92 deletions(-) diff --git a/web/client/plugins/TOC/components/Toolbar.jsx b/web/client/plugins/TOC/components/Toolbar.jsx index c9edd78274..3b20064387 100644 --- a/web/client/plugins/TOC/components/Toolbar.jsx +++ b/web/client/plugins/TOC/components/Toolbar.jsx @@ -10,7 +10,7 @@ import React, { useRef, useEffect, useState } from 'react'; import { Glyphicon, Dropdown } from 'react-bootstrap'; import TableOfContentItemButton from './TableOfContentItemButton'; import { NodeTypes, ROOT_GROUP_ID, DEFAULT_GROUP_ID } from '../../../utils/LayersUtils'; -import { markEdgesForToolbar, StatusTypes } from '../utils/TOCUtils'; +import { getEdgesIndexForToolbar, StatusTypes } from '../utils/TOCUtils'; /** * Toolbar component for the TOC @@ -38,7 +38,8 @@ function Toolbar({ config = {} }) { const ref = useRef(); - const [breakpointData, setBreakpoint ] = useState(); + const [breakpointData, setBreakpoint] = useState(); + const [edgeIndices, setEdgeIndices] = useState([]); const selectedGroups = selectedNodes.filter((node) => node.type === nodeTypes.GROUP).map(({ node }) => node); const selectedLayers = selectedNodes.filter((node) => node.type === nodeTypes.LAYER).map(({ node }) => node); function getSelectedNodesStatus() { @@ -74,7 +75,7 @@ function Toolbar({ const width = ref.current.clientWidth; const scrollWidth = ref.current.scrollWidth; const overflow = width < scrollWidth; - markEdgesForToolbar(ref.current); + setEdgeIndices(getEdgesIndexForToolbar(ref.current)); if (overflow) { const sumUntilIndex = (arr, index) => arr.filter((val, idx) => idx <= index).reduce((acc, val) => acc + val, 0); const newBreakpoint = [...ref.current.children] @@ -107,6 +108,7 @@ function Toolbar({ }}>
); diff --git a/web/client/plugins/TOC/utils/TOCUtils.js b/web/client/plugins/TOC/utils/TOCUtils.js index ad6c38d0ad..2f8aec8be8 100644 --- a/web/client/plugins/TOC/utils/TOCUtils.js +++ b/web/client/plugins/TOC/utils/TOCUtils.js @@ -190,17 +190,6 @@ export const selectedNodesIdsToObject = (selectedNodesIds, layers, tree) => { }).filter(selectedNode => !!selectedNode); }; -/** - * Determines if a DOM element is visible based on its computed style. - * - * @param {HTMLElement} btn - The DOM element to check for visibility. - * @returns {boolean} True if the element is visible; otherwise, false. - */ -const isVisible = (btn) => { - const style = window.getComputedStyle(btn); - return style.display !== 'none' && style.visibility !== 'hidden'; -}; - /** * Marks the first and last visible button elements within the given element * by adding 'is-first' and 'is-last' CSS classes, respectively. @@ -208,16 +197,11 @@ const isVisible = (btn) => { * * @param {HTMLElement} el - The container element to search for button elements. */ -export const markEdgesForToolbar = (el) => { - if (!el) return; - const buttons = Array.from(el.querySelectorAll('button')); - // filter out excluded + invisible - const eligible = buttons.filter((btn) => isVisible(btn)); - // remove old markers - buttons.forEach((btn) => btn.classList.remove('is-first', 'is-last')); - // mark new first/last - if (eligible.length > 0) { - eligible[0].classList.add('is-first'); - eligible[eligible.length - 1].classList.add('is-last'); - } +export const getEdgesIndexForToolbar = (el) => { + if (!el) return []; + const eligible = [...(el.children || [])].map((child, idx) => [idx, child]).filter((entry) => entry[1].children.length > 0 && entry[1].style.visibility !== 'hidden'); + const [firstIndex] = eligible[0] || []; + const [lastIndex] = eligible[eligible.length - 1] || []; + if (firstIndex !== undefined && lastIndex !== undefined) return [firstIndex, lastIndex]; + return []; }; diff --git a/web/client/plugins/TOC/utils/__tests__/TOCUtils-test.js b/web/client/plugins/TOC/utils/__tests__/TOCUtils-test.js index 1c0a8ba912..e9caa1a2dd 100644 --- a/web/client/plugins/TOC/utils/__tests__/TOCUtils-test.js +++ b/web/client/plugins/TOC/utils/__tests__/TOCUtils-test.js @@ -16,7 +16,7 @@ import { getLayerErrorMessage, selectedNodesIdsToObject, isSingleDefaultGroup, - markEdgesForToolbar + getEdgesIndexForToolbar } from '../TOCUtils'; import { DEFAULT_GROUP_ID, NodeTypes } from '../../../../utils/LayersUtils'; @@ -145,87 +145,72 @@ describe('TOCUtils', () => { ]); }); - describe('markEdgesForToolbar', () => { - let container; - beforeEach(() => { - container = document.createElement('div'); - document.body.appendChild(container); - }); - - afterEach(() => { - document.body.removeChild(container); - container = null; - }); - + describe('getEdgesIndexForToolbar', () => { function createButton(visible = true) { - const btn = document.createElement('button'); - if (!visible) { - btn.style.display = 'none'; - } - return btn; + const button = document.createElement('button'); + button.style.display = visible ? '' : 'none'; + return button; + } + function createToolbar(children = []) { + const toolbar = document.createElement('div'); + children.forEach(child => toolbar.appendChild(child)); + return toolbar; } - it('marks first and last visible buttons', () => { - const btn1 = createButton(); - const btn2 = createButton(); - const btn3 = createButton(); - container.append(btn1, btn2, btn3); + it('returns empty array if all children are hidden', () => { + const child1 = document.createElement('div'); + child1.appendChild(createButton(true)); + child1.style.visibility = 'hidden'; - markEdgesForToolbar(container); + const child2 = document.createElement('div'); + child2.appendChild(createButton(true)); + child2.style.visibility = 'hidden'; - expect(btn1.classList.contains('is-first')).toBe(true); - expect(btn3.classList.contains('is-last')).toBe(true); - expect(btn2.classList.contains('is-first')).toBe(false); - expect(btn2.classList.contains('is-last')).toBe(false); + const el = createToolbar([child1, child2]); + expect(getEdgesIndexForToolbar(el)).toEqual([]); }); - it('removes previous markers before marking new ones', () => { - const btn1 = createButton(); - const btn2 = createButton(); - btn1.classList.add('is-first', 'is-last'); - btn2.classList.add('is-first', 'is-last'); - container.append(btn1, btn2); + it('returns correct indices when some children have no children and are hidden', () => { + const child1 = document.createElement('div'); + child1.style.visibility = 'hidden'; - markEdgesForToolbar(container); + const child2 = document.createElement('div'); + child2.appendChild(createButton(true)); + child2.style.visibility = ''; - expect(btn1.classList.contains('is-first')).toBe(true); - expect(btn1.classList.contains('is-last')).toBe(false); - expect(btn2.classList.contains('is-first')).toBe(false); - expect(btn2.classList.contains('is-last')).toBe(true); - }); - - it('ignores invisible buttons', () => { - const btn1 = createButton(false); // invisible - const btn2 = createButton(); - const btn3 = createButton(false); // invisible - container.append(btn1, btn2, btn3); + const child3 = document.createElement('div'); + child3.style.visibility = ''; - markEdgesForToolbar(container); + const child4 = document.createElement('div'); + child4.appendChild(createButton(true)); + child4.style.visibility = ''; - expect(btn2.classList.contains('is-first')).toBe(true); - expect(btn2.classList.contains('is-last')).toBe(true); - expect(btn1.classList.contains('is-first')).toBe(false); - expect(btn1.classList.contains('is-last')).toBe(false); - expect(btn3.classList.contains('is-first')).toBe(false); - expect(btn3.classList.contains('is-last')).toBe(false); + const el = createToolbar([child1, child2, child3, child4]); + expect(getEdgesIndexForToolbar(el)).toEqual([1, 3]); }); - it('does nothing if no visible buttons', () => { - const btn1 = createButton(false); - container.append(btn1); + it('returns correct indices when eligible children are not contiguous', () => { + const child1 = document.createElement('div'); + child1.appendChild(createButton(true)); + child1.style.visibility = ''; - markEdgesForToolbar(container); + const child2 = document.createElement('div'); + child2.style.visibility = ''; - expect(btn1.classList.contains('is-first')).toBe(false); - expect(btn1.classList.contains('is-last')).toBe(false); - }); + const child3 = document.createElement('div'); + child3.appendChild(createButton(true)); + child3.style.visibility = ''; + + const child4 = document.createElement('div'); + child4.appendChild(createButton(true)); + child4.style.visibility = 'hidden'; + + const child5 = document.createElement('div'); + child5.appendChild(createButton(true)); + child5.style.visibility = ''; - it('returns early if no element provided', () => { - const spy = expect.spyOn(document, 'querySelectorAll'); - markEdgesForToolbar(null); - markEdgesForToolbar(undefined); - expect(spy.calls.length).toBe(0); - spy.restore(); + const el = createToolbar([child1, child2, child3, child4, child5]); + expect(getEdgesIndexForToolbar(el)).toEqual([0, 4]); }); }); }); From 52555401838050c05407bc8ac16326ae219ba7f4 Mon Sep 17 00:00:00 2001 From: Sovas Tiwari Date: Tue, 9 Sep 2025 10:53:03 +0100 Subject: [PATCH 5/5] Fix the button radius issue when multiple element present in last element --- web/client/plugins/TOC/utils/TOCUtils.js | 4 +++- web/client/themes/default/less/toc.less | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/web/client/plugins/TOC/utils/TOCUtils.js b/web/client/plugins/TOC/utils/TOCUtils.js index 2f8aec8be8..487a881861 100644 --- a/web/client/plugins/TOC/utils/TOCUtils.js +++ b/web/client/plugins/TOC/utils/TOCUtils.js @@ -199,7 +199,9 @@ export const selectedNodesIdsToObject = (selectedNodesIds, layers, tree) => { */ export const getEdgesIndexForToolbar = (el) => { if (!el) return []; - const eligible = [...(el.children || [])].map((child, idx) => [idx, child]).filter((entry) => entry[1].children.length > 0 && entry[1].style.visibility !== 'hidden'); + const eligible = [...(el.children || [])] + .map((child, idx) => [idx, child]) + .filter((entry) => entry[1].children.length > 0 && entry[1].style.visibility !== 'hidden'); const [firstIndex] = eligible[0] || []; const [lastIndex] = eligible[eligible.length - 1] || []; if (firstIndex !== undefined && lastIndex !== undefined) return [firstIndex, lastIndex]; diff --git a/web/client/themes/default/less/toc.less b/web/client/themes/default/less/toc.less index d7df1d199f..4a5f562f27 100644 --- a/web/client/themes/default/less/toc.less +++ b/web/client/themes/default/less/toc.less @@ -192,11 +192,11 @@ border-radius: 0; } div button { border-radius: 0; } - div button.is-first { + div button.is-first:first-of-type { border-top-left-radius: @border-radius-base; border-bottom-left-radius: @border-radius-base; } - div button.is-last { + div button.is-last:last-of-type { border-top-right-radius: @border-radius-base; border-bottom-right-radius: @border-radius-base; }