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) => ( @@ -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 78f9dc1f91..42d9814719 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 21007db458..0b6e024571 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 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/style/ThemaClassesEditor.jsx b/web/client/components/style/ThemaClassesEditor.jsx index 407bff5cb8..a96b68a0c9 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 f598591f29..1cf2af3f15 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 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/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/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({
); diff --git a/web/client/plugins/TOC/utils/TOCUtils.js b/web/client/plugins/TOC/utils/TOCUtils.js index 060b1278a3..487a881861 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 f5be73f548..e9caa1a2dd 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 c1180b8390..cab93dfc26 100644 --- a/web/client/plugins/Timeline.jsx +++ b/web/client/plugins/Timeline.jsx @@ -311,7 +311,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 ce99b19f44..86ab2c08b6 100644 --- a/web/client/plugins/__tests__/Share-test.jsx +++ b/web/client/plugins/__tests__/Share-test.jsx @@ -74,7 +74,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 765ef222b6..3b20b46461 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 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 && } const Button = withTempHintPopover()(RButton); const ToggleButton = (props) => (); /** diff --git a/web/client/plugins/userExtensions/ExtensionsPanel.jsx b/web/client/plugins/userExtensions/ExtensionsPanel.jsx index a21942e405..8cff658785 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/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={ { } } = {}) => ()); @@ -98,7 +97,7 @@ class WidgetsTray extends React.Component { ? (
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..864632b14f 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: 0; } .mapToolbar { @@ -55,3 +56,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 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 582150eb15..a91d21043e 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 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..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: @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 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 b3523b765a..077a08d589 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 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 a064ffef07..41b017af3b 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,14 @@ 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; } 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..e04d992d7e 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 4bb28b3f6a..3f97824113 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 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 e7e74d76fb..4a5f562f27 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 8faa7d9fad..e3a935b5b4 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]); @@ -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 { /* @@ -519,8 +547,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 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 9028a5069a..6dbffb74fe 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; // ******************************************