diff --git a/docs/developer-guide/mapstore-migration-guide.md b/docs/developer-guide/mapstore-migration-guide.md index b10cc94953e..898793f026a 100644 --- a/docs/developer-guide/mapstore-migration-guide.md +++ b/docs/developer-guide/mapstore-migration-guide.md @@ -79,6 +79,16 @@ As part of improving the authentication rules to make dynamic request configurat | `header` | `headers: { ... }` | | `browserWithCredentials` | `withCredentials: true` | +### Replace square-button-md and square-button-sm with square-button class + +The CSS classes `square-button-md` and `square-button-sm` have been deprecated and replaced by the unified `square-button` class. Update your custom components and themes to use the new class name. + +```diff +- +- ++ +``` + ### Replace filterAllowedCRS and additionalCRS with availableProjections As part of extending the functionalities of the CRS selector, we have deprecated the use of `filterAllowedCRS` and `additionalCRS` in favor of new configuration `availableProjections`. The new configuration provides the support to add both filterAllowedCRS and additionalCRS in a single configuration. The configuration in `localConfig.json` should be updated as follow: diff --git a/web/client/components/I18N/LangBar.jsx b/web/client/components/I18N/LangBar.jsx index ec1c67f3b07..b0a2b662630 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 b1f9c1ebd60..b466dc07837 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 d0fcd36c15c..dce79b55794 100644 --- a/web/client/components/TOC/fragments/settings/Display.jsx +++ b/web/client/components/TOC/fragments/settings/Display.jsx @@ -174,7 +174,7 @@ export default class extends React.Component { diff --git a/web/client/components/background/BackgroundDialog.jsx b/web/client/components/background/BackgroundDialog.jsx index 0dfc041dfb0..9d4930318d5 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 5cfeff225f8..80872690a2f 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 f9cf8ec8583..e76fd4b8949 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 b2e08f110cb..5b5990d7ee8 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 504eeaa0ccd..149a6f2207d 100644 --- a/web/client/components/contextcreator/ConfigurePluginsStep.jsx +++ b/web/client/components/contextcreator/ConfigurePluginsStep.jsx @@ -179,7 +179,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/dashboard/ViewSwitcher.jsx b/web/client/components/dashboard/ViewSwitcher.jsx index e3d442a0065..4420fb96a6e 100644 --- a/web/client/components/dashboard/ViewSwitcher.jsx +++ b/web/client/components/dashboard/ViewSwitcher.jsx @@ -102,7 +102,7 @@ const ViewSwitcher = ({ layouts = [], selectedLayoutId, onSelect, onAdd, onRemov {canEdit && ( } diff --git a/web/client/components/data/featuregrid/toolbars/TButton.jsx b/web/client/components/data/featuregrid/toolbars/TButton.jsx index 8de27b09d47..028c0bbe29d 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 ( : - {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 24b24e9b290..a2df73d4a8a 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 e9e7aa64ad5..a7c054c751f 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 20f701154d3..c1e31994f16 100644 --- a/web/client/components/data/query/QueryPanelHeader.jsx +++ b/web/client/components/data/query/QueryPanelHeader.jsx @@ -15,13 +15,13 @@ export default ({loadingError, onToggleQuery = () => {}, buttonStyle = "default" placement="right" /> ) : ( -
+
)} ||
} @@ -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 37584e2d8c4..34d7ed5deb4 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 bbdc2756cf6..88926ce9f01 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 afee9f6e1fb..1680eca12e9 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 d5764a06b30..fa3425055e0 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 b6cc2f28e8e..d1f447a29b7 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/AlertPopover/index.jsx b/web/client/components/misc/AlertPopover/index.jsx index f672044dd4d..f4bcefd57ca 100644 --- a/web/client/components/misc/AlertPopover/index.jsx +++ b/web/client/components/misc/AlertPopover/index.jsx @@ -240,7 +240,7 @@ export default function AlertPopover({
- + {this.props.loading ?
: icon} diff --git a/web/client/components/misc/Thumbnail.jsx b/web/client/components/misc/Thumbnail.jsx index 42aa9226298..f47b649b74f 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 0053e96988d..7b31bf1d0b1 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 7a05c5e1ff4..9b925ba4749 100644 --- a/web/client/components/misc/panels/PanelHeader.jsx +++ b/web/client/components/misc/panels/PanelHeader.jsx @@ -63,20 +63,20 @@ export default ({ hideCloseButton = false }) => { const closeButton = hideCloseButton || !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 c0ae5ae9ba7..32ba722f6a7 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 dc1e05b2875..54ca3d953c4 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/spinners/GlobalSpinner/GlobalSpinner.jsx b/web/client/components/misc/spinners/GlobalSpinner/GlobalSpinner.jsx index 1ac115312f2..48a969185da 100644 --- a/web/client/components/misc/spinners/GlobalSpinner/GlobalSpinner.jsx +++ b/web/client/components/misc/spinners/GlobalSpinner/GlobalSpinner.jsx @@ -8,9 +8,7 @@ import PropTypes from 'prop-types'; import React from 'react'; -import Spinner from 'react-spinkit'; - -import('./css/GlobalSpinner.css'); +import Spinner from '../../../layout/Spinner'; class GlobalSpinner extends React.Component { static propTypes = { @@ -23,14 +21,16 @@ class GlobalSpinner extends React.Component { static defaultProps = { id: "mapstore-globalspinner", loading: false, - className: "ms2-loading", + className: "ms2-loading square-button btn-primary", spinner: "circle" }; render() { if (this.props.loading) { return ( -
+
+ +
); } return null; diff --git a/web/client/components/misc/spinners/GlobalSpinner/css/GlobalSpinner.css b/web/client/components/misc/spinners/GlobalSpinner/css/GlobalSpinner.css deleted file mode 100644 index fd4f1eff550..00000000000 --- a/web/client/components/misc/spinners/GlobalSpinner/css/GlobalSpinner.css +++ /dev/null @@ -1,12 +0,0 @@ -#mapstore-globalspinner { - margin: 0 !important; - width: 40px !important; - position:static !important; - border-radius: 0 !important; - display: flex; - justify-content: center; - align-items: center; -} -#mapstore-globalspinner > .spinner { - margin: 0; -} diff --git a/web/client/components/misc/switch/SwitchPanel.jsx b/web/client/components/misc/switch/SwitchPanel.jsx index b6c9f91434d..91263d8d32a 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 317dec7b669..c59032ce9b8 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 4a8280453e9..523e69d781f 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) => ( @@ -225,9 +226,9 @@ class PermissionEditor extends React.Component { + onClick={this.onAddPermission} > diff --git a/web/client/components/search/SearchBar.jsx b/web/client/components/search/SearchBar.jsx index 78f9dc1f917..42d98147196 100644 --- a/web/client/components/search/SearchBar.jsx +++ b/web/client/components/search/SearchBar.jsx @@ -48,14 +48,14 @@ export default ({ splitTools={false} toolbarButtons={[{ glyph: removeIcon, - className: "square-button-md no-border", + className: "square-button no-border", bsStyle: "default", pullRight: true, visible: searchText !== "", onClick: () => onSearchReset() }, { glyph: searchIcon, - className: "square-button-md no-border " + + className: "square-button no-border " + (isSearchClickable ? "magnifying-glass clickable" : "magnifying-glass"), bsStyle: "default", pullRight: true, diff --git a/web/client/components/search/SearchBarToolbar.jsx b/web/client/components/search/SearchBarToolbar.jsx index 21007db458f..0b6e024571a 100644 --- a/web/client/components/search/SearchBarToolbar.jsx +++ b/web/client/components/search/SearchBarToolbar.jsx @@ -36,7 +36,7 @@ export default ({ {children} diff --git a/web/client/components/share/ShareCopyToClipboard.jsx b/web/client/components/share/ShareCopyToClipboard.jsx index d7c72a3a2d4..8cb300b973b 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/style/ThemaClassesEditor.jsx b/web/client/components/style/ThemaClassesEditor.jsx index 407bff5cb81..a96b68a0c97 100644 --- a/web/client/components/style/ThemaClassesEditor.jsx +++ b/web/client/components/style/ThemaClassesEditor.jsx @@ -131,7 +131,7 @@ class ThemaClassesEditor extends React.Component { } } diff --git a/web/client/components/styleeditor/ClassificationLayerSettings.jsx b/web/client/components/styleeditor/ClassificationLayerSettings.jsx index f598591f29e..1cf2af3f150 100644 --- a/web/client/components/styleeditor/ClassificationLayerSettings.jsx +++ b/web/client/components/styleeditor/ClassificationLayerSettings.jsx @@ -98,7 +98,7 @@ function ClassificationLayerSettings({
diff --git a/web/client/components/widgets/builder/wizard/chart/ChartClassification.jsx b/web/client/components/widgets/builder/wizard/chart/ChartClassification.jsx index 7f5e4cf0d23..61e4f08ccb8 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 ac5f79763ef..c7c905a1a67 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 41098771e7c..6004cf4869c 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/filter/FilterDataTab/components/FilterAttributesSection.jsx b/web/client/components/widgets/builder/wizard/filter/FilterDataTab/components/FilterAttributesSection.jsx index fe519ec41ed..231797fa5e2 100644 --- a/web/client/components/widgets/builder/wizard/filter/FilterDataTab/components/FilterAttributesSection.jsx +++ b/web/client/components/widgets/builder/wizard/filter/FilterDataTab/components/FilterAttributesSection.jsx @@ -20,7 +20,7 @@ const TButtonWithTooltip = tooltip(({ children, active, ...props }) => ( {children} diff --git a/web/client/components/widgets/builder/wizard/filter/FilterLayerSelector.jsx b/web/client/components/widgets/builder/wizard/filter/FilterLayerSelector.jsx index 7963afe0b72..e31556bd18a 100644 --- a/web/client/components/widgets/builder/wizard/filter/FilterLayerSelector.jsx +++ b/web/client/components/widgets/builder/wizard/filter/FilterLayerSelector.jsx @@ -64,13 +64,13 @@ const FilterLayerSelectorComponent = ({ 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/filter/Toolbar.jsx b/web/client/components/widgets/builder/wizard/filter/Toolbar.jsx index db74b46f80a..d7b11befb4e 100644 --- a/web/client/components/widgets/builder/wizard/filter/Toolbar.jsx +++ b/web/client/components/widgets/builder/wizard/filter/Toolbar.jsx @@ -43,7 +43,7 @@ export default ({ 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 17c344dcc72..9f0a3c48a20 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 432d550db6d..fe6a33fe5fa 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 c45906048f9..7f40c0064cb 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 f56c2ac29f3..a2aaf01911b 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 88e625e504e..a5f733c4575 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 e07ca3f9a3a..ae167e8850b 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/components/widgets/view/WidgetsBar.jsx b/web/client/components/widgets/view/WidgetsBar.jsx index a33e6056246..d5debb1f521 100644 --- a/web/client/components/widgets/view/WidgetsBar.jsx +++ b/web/client/components/widgets/view/WidgetsBar.jsx @@ -61,7 +61,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/plugins/AddWidgetDashboard.jsx b/web/client/plugins/AddWidgetDashboard.jsx index d126d761f29..ddf1d8e6e47 100644 --- a/web/client/plugins/AddWidgetDashboard.jsx +++ b/web/client/plugins/AddWidgetDashboard.jsx @@ -48,7 +48,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 461992ffb64..678560ec01d 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({
); diff --git a/web/client/plugins/TOC/utils/TOCUtils.js b/web/client/plugins/TOC/utils/TOCUtils.js index 060b1278a3d..487a8818617 100644 --- a/web/client/plugins/TOC/utils/TOCUtils.js +++ b/web/client/plugins/TOC/utils/TOCUtils.js @@ -189,3 +189,21 @@ export const selectedNodesIdsToObject = (selectedNodesIds, layers, tree) => { return null; }).filter(selectedNode => !!selectedNode); }; + +/** + * Marks the first and last visible button elements within the given element + * by adding 'is-first' and 'is-last' CSS classes, respectively. + * Removes these classes from all buttons before marking. + * + * @param {HTMLElement} el - The container element to search for button elements. + */ +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 f5be73f5481..e9caa1a2dd7 100644 --- a/web/client/plugins/TOC/utils/__tests__/TOCUtils-test.js +++ b/web/client/plugins/TOC/utils/__tests__/TOCUtils-test.js @@ -15,7 +15,8 @@ import { getLabelName, getLayerErrorMessage, selectedNodesIdsToObject, - isSingleDefaultGroup + isSingleDefaultGroup, + getEdgesIndexForToolbar } from '../TOCUtils'; import { DEFAULT_GROUP_ID, NodeTypes } from '../../../../utils/LayersUtils'; @@ -143,4 +144,73 @@ describe('TOCUtils', () => { { id: 'group01', node: { id: 'group01', nodes: layers }, type: NodeTypes.GROUP } ]); }); + + describe('getEdgesIndexForToolbar', () => { + function createButton(visible = true) { + 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('returns empty array if all children are hidden', () => { + const child1 = document.createElement('div'); + child1.appendChild(createButton(true)); + child1.style.visibility = 'hidden'; + + const child2 = document.createElement('div'); + child2.appendChild(createButton(true)); + child2.style.visibility = 'hidden'; + + const el = createToolbar([child1, child2]); + expect(getEdgesIndexForToolbar(el)).toEqual([]); + }); + + it('returns correct indices when some children have no children and are hidden', () => { + const child1 = document.createElement('div'); + child1.style.visibility = 'hidden'; + + const child2 = document.createElement('div'); + child2.appendChild(createButton(true)); + child2.style.visibility = ''; + + const child3 = document.createElement('div'); + child3.style.visibility = ''; + + const child4 = document.createElement('div'); + child4.appendChild(createButton(true)); + child4.style.visibility = ''; + + const el = createToolbar([child1, child2, child3, child4]); + expect(getEdgesIndexForToolbar(el)).toEqual([1, 3]); + }); + + it('returns correct indices when eligible children are not contiguous', () => { + const child1 = document.createElement('div'); + child1.appendChild(createButton(true)); + child1.style.visibility = ''; + + const child2 = document.createElement('div'); + child2.style.visibility = ''; + + 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 = ''; + + const el = createToolbar([child1, child2, child3, child4, child5]); + expect(getEdgesIndexForToolbar(el)).toEqual([0, 4]); + }); + }); }); diff --git a/web/client/plugins/Timeline.jsx b/web/client/plugins/Timeline.jsx index e413488bb76..fdea71e9e12 100644 --- a/web/client/plugins/Timeline.jsx +++ b/web/client/plugins/Timeline.jsx @@ -312,7 +312,7 @@ const TimelinePlugin = compose(
setOptions({ ...options, collapsed: !collapsed })} - className="square-button-sm ms-timeline-expand" + className="square-button ms-timeline-expand" bsStyle="primary" tooltip={}> diff --git a/web/client/plugins/__tests__/Share-test.jsx b/web/client/plugins/__tests__/Share-test.jsx index e33f9033d93..c3de0b3203d 100644 --- a/web/client/plugins/__tests__/Share-test.jsx +++ b/web/client/plugins/__tests__/Share-test.jsx @@ -75,7 +75,7 @@ describe('Share Plugin', () => { const { Plugin, actions } = getPluginForTest(SharePlugin, { controls }); ReactDOM.render(, document.getElementById("container")); expect(document.getElementsByClassName('share-panel-modal-body')[0]).toExist(); - const closeButton = document.querySelector('.square-button-md:has(.glyphicon-1-close)'); + const closeButton = document.querySelector('.square-button:has(.glyphicon-1-close)'); ReactTestUtils.Simulate.click(closeButton); expect(actions[0].type).toBe(TOGGLE_CONTROL); expect(actions[1].type).toBe(HIDE_MAPINFO_MARKER); diff --git a/web/client/plugins/drawer/Menu.jsx b/web/client/plugins/drawer/Menu.jsx index 765ef222b6d..3b20b46461f 100644 --- a/web/client/plugins/drawer/Menu.jsx +++ b/web/client/plugins/drawer/Menu.jsx @@ -75,7 +75,7 @@ class Menu extends React.Component { renderButtons = () => { return this.props.children.map((child) => { - const button = (); 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 ebdc52cf431..c3eab40efdb 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/maploading/maploading.css b/web/client/plugins/maploading/maploading.css deleted file mode 100644 index d16bf1f56b4..00000000000 --- a/web/client/plugins/maploading/maploading.css +++ /dev/null @@ -1,34 +0,0 @@ -#mapstore-globalspinner { - width: 28px; - height: 28px; - box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); - background-color: white; - background-size: 80px 80px; - background-repeat: no-repeat; - border-radius: 4px; - border: 1px solid #999; - z-index: 10; - top: 90px; - left: 2px; - position: absolute; - margin: 8px; -} - -#mapstore-globalspinner .circle-wrapper { - margin-left: 2px; - margin-top: 1px; -} - -#mapstore-toolbar #mapstore-globalspinner { - position: static; - width: 42px; - margin: 0; - margin-top: 0; - height: 35px; - box-shadow: none; -} - -.ms2-loading .sk-circle-wrapper { - width: 30px; - height: 30px; - } diff --git a/web/client/plugins/playback/Playback.jsx b/web/client/plugins/playback/Playback.jsx index 24ea5346453..2d74adff73c 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 && } .btn-tray, & > .btn, & > .btn-group .btn { @@ -29,7 +37,7 @@ .snapshot-panel { position: absolute; - right: @square-btn-size; + right: @ms-sidebar-width; top: 60px; background: #ffffffab; } diff --git a/web/client/plugins/timeline/TimelineToggle.jsx b/web/client/plugins/timeline/TimelineToggle.jsx index 7af3db1ae40..7723dc5b501 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/userExtensions/ExtensionsPanel.jsx b/web/client/plugins/userExtensions/ExtensionsPanel.jsx index a21942e4055..8cff6587855 100644 --- a/web/client/plugins/userExtensions/ExtensionsPanel.jsx +++ b/web/client/plugins/userExtensions/ExtensionsPanel.jsx @@ -49,7 +49,7 @@ const ExtensionList = emptyState(({ filteredItems, filterText }) => 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/FilterLayerSelector.jsx b/web/client/plugins/widgetbuilder/FilterLayerSelector.jsx index f2662ac48c5..101cac1acfa 100644 --- a/web/client/plugins/widgetbuilder/FilterLayerSelector.jsx +++ b/web/client/plugins/widgetbuilder/FilterLayerSelector.jsx @@ -111,7 +111,7 @@ export default connect((state) => ({ 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 4e8e7e037ca..34b080ad471 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={ { } } = {}) => ()); diff --git a/web/client/themes/default/bootstrap-theme.less b/web/client/themes/default/bootstrap-theme.less index 4cae571edb9..1da6c7b3a9a 100644 --- a/web/client/themes/default/bootstrap-theme.less +++ b/web/client/themes/default/bootstrap-theme.less @@ -61,7 +61,7 @@ // Button button.close { opacity: 1.0; - .square-button-md(); + .square-button(); &:first-child { font-family: "mapstore2"; font-size: 0; @@ -73,7 +73,7 @@ button.close { &:first-child:before { .glyphicon-1-close-content(); - font-size: @icon-size-md; + font-size: @icon-size; } } diff --git a/web/client/themes/default/bootstrap-variables.less b/web/client/themes/default/bootstrap-variables.less index 48eb9495de4..5967b65db77 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/backgroundSelector.less b/web/client/themes/default/less/backgroundSelector.less index 4e8c92e4ea8..2aa0fa3dc9c 100644 --- a/web/client/themes/default/less/backgroundSelector.less +++ b/web/client/themes/default/less/backgroundSelector.less @@ -60,6 +60,8 @@ border-radius: 4px; overflow: hidden; border: 2px solid transparent; + width: 40px; + height: 40px; } .ms-background-selector-list { border-radius: 4px; diff --git a/web/client/themes/default/less/common.less b/web/client/themes/default/less/common.less index 682e91b6214..f7fbf9e9185 100644 --- a/web/client/themes/default/less/common.less +++ b/web/client/themes/default/less/common.less @@ -209,24 +209,24 @@ textarea { &.toolbar-btn-transition-enter-active { .square-btn-size { - width: @square-btn-medium-size; + width: @square-btn-size; } transition: all 0.3s; - padding-left: @padding-left-square-md; - padding-right: @padding-left-square-md; + padding-left: @padding-left-square; + padding-right: @padding-left-square; overflow: hidden; } } .toolbar-btn-transition-leave { .square-btn-size { - width: @square-btn-medium-size; + width: @square-btn-size; } transition: all 0.3s; - padding-left: @padding-left-square-md; - padding-right: @padding-left-square-md; + padding-left: @padding-left-square; + padding-right: @padding-left-square; overflow: hidden; &.toolbar-btn-transition-leave-active { @@ -269,14 +269,14 @@ textarea { } .mapstore-filter { &.form-group { - margin: ((@square-btn-size - @square-btn-medium-size)/2) 0 0 0; + margin: ((@square-btn-size - @button-size-sm)/2) 0 0 0; .input-group { - height: @square-btn-medium-size; + height: @square-btn-size; width: 100%; input { - height: @square-btn-medium-size; + height: @square-btn-size; } .input-group-addon { @@ -488,3 +488,20 @@ div:has(.security-popup-dialog) .modal-backdrop.in { .security-popup-dialog { z-index: 3150; } + +.button-group-with-border-radius() { + button { + border-radius: 0; + } + + button:first-of-type { + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; + } + + button:last-of-type { + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; + } + } + \ No newline at end of file diff --git a/web/client/themes/default/less/context-creator.less b/web/client/themes/default/less/context-creator.less index 063c08eb2af..cd135a0dd71 100644 --- a/web/client/themes/default/less/context-creator.less +++ b/web/client/themes/default/less/context-creator.less @@ -197,6 +197,7 @@ width: 50%; min-width: 200px; margin-right: 18px; + border-radius: @border-radius-base; } } } diff --git a/web/client/themes/default/less/doublecolumntransfer.less b/web/client/themes/default/less/doublecolumntransfer.less index 40b1a810d54..a99195d85cc 100644 --- a/web/client/themes/default/less/doublecolumntransfer.less +++ b/web/client/themes/default/less/doublecolumntransfer.less @@ -41,7 +41,7 @@ .ms2-transfer-title-area h4 { display: flex; overflow-wrap: anywhere; - min-height: @square-btn-medium-size; + min-height: @square-btn-size; span { flex: 1; diff --git a/web/client/themes/default/less/dropdown-menu.less b/web/client/themes/default/less/dropdown-menu.less index b08baf77d06..20c2a928bbe 100644 --- a/web/client/themes/default/less/dropdown-menu.less +++ b/web/client/themes/default/less/dropdown-menu.less @@ -27,7 +27,7 @@ .dropdown-menu .glyphicon, .dropdown-menu .fa { - font-size: @icon-size-md; + font-size: @icon-size; margin-right: 15px; vertical-align: middle; } diff --git a/web/client/themes/default/less/geostory-navigation.less b/web/client/themes/default/less/geostory-navigation.less index 3fc7cb574e2..e2545450fd5 100644 --- a/web/client/themes/default/less/geostory-navigation.less +++ b/web/client/themes/default/less/geostory-navigation.less @@ -111,7 +111,7 @@ background-color: inherit; .ms-geostory-navigation-navigable-items { flex: 1; - min-height: @square-btn-medium-size; + min-height: @square-btn-size; max-width: 50%; background-color: inherit; margin: 4px 0; diff --git a/web/client/themes/default/less/geostory.less b/web/client/themes/default/less/geostory.less index 046cf732271..092930ccdf3 100644 --- a/web/client/themes/default/less/geostory.less +++ b/web/client/themes/default/less/geostory.less @@ -375,13 +375,13 @@ .ms-over:not(.ms-dragging) { &.ms-above { & > 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 5e3433d821c..cd97fed1ceb 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 cea4a3594c0..25ee15929f8 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 c180ff32c34..7c406bc6e5d 100644 --- a/web/client/themes/default/less/loaders.less +++ b/web/client/themes/default/less/loaders.less @@ -37,14 +37,6 @@ } #ms-components-theme(@theme-vars) { - .ms2-loading { - .background-color-var(@theme-vars[primary], true); - .border-bottom-color-var(@theme-vars[primary], true); - } - .ms2-loading .sk-circle-wrapper .sk-circle:before { - .background-color-var(@theme-vars[primary-contrast], true); - } - .mapstore-small-size-loader { .mapstore-circle-loader-with-css-variables(2px, 100%, @theme-vars[loader-primary-color], @theme-vars[loader-primary-fade-color]); } @@ -55,22 +47,18 @@ .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]); } } // ************** // Layout // ************** -div#mapstore-globalspinner { - display: flex; - margin-bottom: 0; - vertical-align: middle; - width: @square-btn-size !important; - height: @square-btn-size !important; - border: none !important; - box-shadow: none !important; + +.ms2-loading { + border-top-left-radius: 4px; + border-top-right-radius: 4px; } @-webkit-keyframes mapstore-circle-load8 { diff --git a/web/client/themes/default/less/map-search-bar.less b/web/client/themes/default/less/map-search-bar.less index 0508cc2cc46..2f94808f483 100644 --- a/web/client/themes/default/less/map-search-bar.less +++ b/web/client/themes/default/less/map-search-bar.less @@ -74,6 +74,7 @@ margin-right: 5px; box-shadow: -1px 1px 5px 1px #5e5e5e; z-index: 1031; + border-radius: 4px; } #mapstore-navbar-container { @@ -116,7 +117,6 @@ } #mapstore-navbar .navbar-dx .MapSearchBar .input-group { - border-radius: 0; position: relative; width: 100%; height: 100%; @@ -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); @@ -149,11 +149,10 @@ div.MapSearchBar .form-control:focus { } #mapstore-navbar .navbar-dx .search-result-list { - top: @square-btn-size + @padding-left-square; + top: @ms-search-height + @padding-left-square; } .navbar-dx .MapSearchBar .input-group { - border-radius: 0; width: 100%; height: 100%; align-items: center; @@ -173,6 +172,8 @@ div.MapSearchBar .form-control:focus { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } +@ms-search-height: 40px; + #mapstore-navbar #helpbadge-null { position: absolute; left: -10px; @@ -186,7 +187,7 @@ div.MapSearchBar .form-control:focus { #mapstore-navbar .toggled .MapSearchBar { width: 400px; - top: @square-btn-size; + top: @ms-search-height; left: auto; } @@ -198,7 +199,7 @@ div.MapSearchBar .form-control:focus { position: fixed; left: 1px; right: 1px; - top: @square-btn-size; + top: @ms-search-height; width: auto; } @@ -238,7 +239,7 @@ div.MapSearchBar .form-control:focus { flex: 1; height: 100%; position: relative; - min-height: @square-btn-size; + min-height: @ms-search-height; align-items: center; } @@ -247,7 +248,7 @@ div.MapSearchBar .form-control:focus { flex: 1; height: 100%; position: relative; - min-height: @square-btn-size; + min-height: @ms-search-height; align-items: center; } diff --git a/web/client/themes/default/less/map-toolbar.less b/web/client/themes/default/less/map-toolbar.less index 25a11d21fff..d3f9dd68a30 100644 --- a/web/client/themes/default/less/map-toolbar.less +++ b/web/client/themes/default/less/map-toolbar.less @@ -15,17 +15,16 @@ // ************** // Layout // ************** -.mapToolbar { - box-shadow: -1px 1px 5px 1px rgba(94, 94, 94, 1); -} .mapToolbar { + .shadow(); position: absolute; bottom: 5px; right: 0; z-index: 1000; margin-bottom: 5px; margin-right: 5px; + border-radius: @border-radius-base; } .toolbarexpand-enter { @@ -55,3 +54,7 @@ bottom: 5px; right: 212px !important; } + +#mapstore-toolbar .mapToolbar.btn-group-horizontal { + .button-group-with-border-radius(); +} \ No newline at end of file diff --git a/web/client/themes/default/less/maps-properties.less b/web/client/themes/default/less/maps-properties.less index 6dca4278d65..25302418bc4 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 582150eb158..a91d21043ed 100644 --- a/web/client/themes/default/less/media-editor.less +++ b/web/client/themes/default/less/media-editor.less @@ -121,6 +121,10 @@ z-index: 1; order: -1; width: 300px; + + .btn-group { + .button-group-with-border-radius(); + } } } // move service selector in top right corner @@ -142,6 +146,9 @@ padding-right: 4px; } } + .btn-group { + .button-group-with-border-radius(); + } } .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 1ea1b1d4b01..3e439db8d07 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/mouse-position.less b/web/client/themes/default/less/mouse-position.less index de0e7075ed0..d1dbc402a94 100644 --- a/web/client/themes/default/less/mouse-position.less +++ b/web/client/themes/default/less/mouse-position.less @@ -110,13 +110,6 @@ } } - button { - float: left; - height: 25px; - width: 25px; - padding: 0; - } - .form-group { height: 25px; padding: 0 0 0 4px; diff --git a/web/client/themes/default/less/navbar.less b/web/client/themes/default/less/navbar.less index 8a5cd2feaf4..cff582c0ad1 100644 --- a/web/client/themes/default/less/navbar.less +++ b/web/client/themes/default/less/navbar.less @@ -15,6 +15,9 @@ // ************** // Layout // ************** +.navbar-dx { + border-radius: @border-radius-base; +} .navbar-dx ul, ol { margin-bottom: 0; @@ -51,7 +54,7 @@ ol { .nav-body { position: absolute; - top: @square-btn-size; + 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 97f9f19cd49..da5c972387a 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 b79d2db046f..9d84d9b30d5 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/resources-catalog/_resource-card.less b/web/client/themes/default/less/resources-catalog/_resource-card.less index 6d948487e97..45701663d42 100644 --- a/web/client/themes/default/less/resources-catalog/_resource-card.less +++ b/web/client/themes/default/less/resources-catalog/_resource-card.less @@ -36,6 +36,11 @@ --tag-color-r: 230; --tag-color-g: 230; --tag-color-b: 230; + border-radius: 4px; + .ms-resource-card-img { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } > div a { position: relative; } diff --git a/web/client/themes/default/less/searchbar.less b/web/client/themes/default/less/searchbar.less index 7c5b416493f..7ef4d854fda 100644 --- a/web/client/themes/default/less/searchbar.less +++ b/web/client/themes/default/less/searchbar.less @@ -50,6 +50,12 @@ position: absolute; right: 55px; top: 10px; + + &, + > .form-group, + > .form-group > .input-group { + border-radius: 4px; + } } .maps-search .input-group-addon{ background-color:white; diff --git a/web/client/themes/default/less/sidegrid.less b/web/client/themes/default/less/sidegrid.less index b3523b765a0..077a08d5896 100644 --- a/web/client/themes/default/less/sidegrid.less +++ b/web/client/themes/default/less/sidegrid.less @@ -223,6 +223,9 @@ .mapstore-side-card-right-container { display: flex; flex-direction: column; + .mapstore-side-card-tool { + .button-group-with-border-radius(); + } } &:hover { diff --git a/web/client/themes/default/less/sliders.less b/web/client/themes/default/less/sliders.less index 5374899af9a..390b3a669e9 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 a064ffef070..776f09eca44 100644 --- a/web/client/themes/default/less/square-button.less +++ b/web/client/themes/default/less/square-button.less @@ -16,57 +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); - - } - } -} - -.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; + 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); } } @@ -74,24 +45,24 @@ display: inline-flex; justify-content: center; align-items: center; - font-size: @icon-size-md; + font-size: @icon-size; } -.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; - } +.btn-group-vertical > .square-button { + width: @square-btn-size; } -.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; } + +#mapstore-map-footer { + .square-button { + width: 22px; + height: 22px; + .glyphicon { + font-size: 12px; + } + } +} \ No newline at end of file diff --git a/web/client/themes/default/less/style-editor.less b/web/client/themes/default/less/style-editor.less index 4fb0e220b51..5eb9402768c 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 187032f7ffd..01f0844992f 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 1ba5f4121da..8a8f84b946c 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,19 @@ 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; + .shadow(); } } @@ -92,7 +94,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 22efe1e1c92..e04d992d7e0 100644 --- a/web/client/themes/default/less/switchpanel.less +++ b/web/client/themes/default/less/switchpanel.less @@ -29,31 +29,31 @@ margin: 0; } .panel-heading { - height: @square-btn-size; + height: @switch-panel-height; border: none; padding: 0; .pull-left { - line-height: @square-btn-size; + line-height: @switch-panel-height; } .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 4bb28b3f6a6..3f97824113c 100644 --- a/web/client/themes/default/less/timeline.less +++ b/web/client/themes/default/less/timeline.less @@ -380,9 +380,11 @@ top: 0; right: 0; transform: translate(-50%, -100%); + border-radius: 0; 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 */ @@ -655,6 +657,7 @@ .shadow-soft; .timeline-plugin-btn-group { display: flex; + .button-group-with-border-radius(); } h4 { margin-left: 8px; @@ -936,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 { @@ -1066,4 +1069,5 @@ } } } + .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 a58cd5fa711..1877d8d1db3 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 e7e74d76fb8..4a5f562f274 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,7 +185,21 @@ } } .ms-toc-toolbar-dropdown { - width: @square-btn-medium-size / 2; + width: @square-btn-size / 2; + } + .ms-toc-toolbar-content { + button { + border-radius: 0; + } + div button { border-radius: 0; } + 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:last-of-type { + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; + } } } @@ -398,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 9de9774879a..b2f9af50238 100644 --- a/web/client/themes/default/less/widget.less +++ b/web/client/themes/default/less/widget.less @@ -68,6 +68,23 @@ .widgets-tray { .background-color-var(@theme-vars[main-bg]); + .ms2-border-layout-body { + .widgets-bar > span > button.btn-tray { + border-radius: 0; + } + 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]); @@ -432,6 +449,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 { /* @@ -539,8 +567,8 @@ padding: 0; .mapstore-switch-panel { - margin-bottom: @square-btn-small-size; - padding: 0 @square-btn-small-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/less/wizard.less b/web/client/themes/default/less/wizard.less index 7d8597181b1..efad4f562b1 100644 --- a/web/client/themes/default/less/wizard.less +++ b/web/client/themes/default/less/wizard.less @@ -167,6 +167,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 9028a5069ae..6dbffb74fea 100644 --- a/web/client/themes/default/ms-variables.less +++ b/web/client/themes/default/ms-variables.less @@ -373,24 +373,18 @@ // ****************************************** @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; -@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; +@button-size-sm: 22px; +@switch-panel-height: 40px; // ******************************************