Skip to content

Update the style of the square buttons and add border radius in all buttons, inputs, selectors #11425

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Update the style of the square buttons and add border radius in all buttons, inputs, selectors #11425

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b61ad4e
Update the border radius and change the square button layout
subashtiwari1010 Sep 2, 2025
b9ab71e
Update the overall button size and add border radius to the element
subashtiwari1010 Sep 2, 2025
2218f73
Fix the button, and accordion layout and add square-button in the wid…
subashtiwari1010 Sep 3, 2025
95cbb6e
Fix the button style in toolbar using state rather that direct dom ma…
subashtiwari1010 Sep 9, 2025
5255540
Fix the button radius issue when multiple element present in last ele…
subashtiwari1010 Sep 9, 2025
bd2dbd2
Merge branch 'master' of github.com:geosolutions-it/MapStore2 into fe…
subashtiwari1010 Sep 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/client/components/I18N/LangBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={
<FlagButton
componentAsButton={false}
Expand Down
2 changes: 1 addition & 1 deletion web/client/components/TOC/TOCItemsSettings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ const TOCItemSettings = (props) => {
{ToolbarComponent ?
<ToolbarComponent buttons={toolbarButtons}/>
: <Toolbar
btnDefaultProps={{ bsStyle: 'primary', className: 'square-button-md' }}
btnDefaultProps={{ bsStyle: 'primary', className: 'square-button' }}
buttons={toolbarButtons}/>}
</Col>
</Row>,
Expand Down
4 changes: 2 additions & 2 deletions web/client/components/TOC/fragments/LayerFields/Fields.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const Fields = ({fields = [], onLoadFields = () => {}, onChange = () => {}, onCl
className="layer-fields"
header={<div key="row-header" className="layer-fields-header">
<div key="row-toolbar" className="layer-fields-toolbar">
<Toolbar key="toolbar" btnDefaultProps={{ className: 'square-button-md', bsStyle: 'primary', disabled: loading }}
<Toolbar key="toolbar" btnDefaultProps={{ className: 'square-button', bsStyle: 'primary', disabled: loading }}
buttons={[{
glyph: 'refresh',
disabled: loading,
Expand All @@ -53,7 +53,7 @@ const Fields = ({fields = [], onLoadFields = () => {}, onChange = () => {}, onCl
disabled={loading}
bsStyle="primary"
confirmContent={<Message msgId="layerProperties.fields.clearCustomizationConfirm"/>}
className="square-button-md"
className="square-button"
onClick={() => onClear()}>
<Glyphicon
glyph="clear-brush" />
Expand Down
2 changes: 1 addition & 1 deletion web/client/components/TOC/fragments/settings/Display.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export default class extends React.Component {
<Button
disabled={!!this.state.formatLoading}
tooltipId="layerProperties.format.refresh"
className="square-button-md no-border format-refresh"
className="square-button no-border format-refresh"
onClick={() => {this.onFormatOptionsFetch(this.props.element?.url);}}
key="format-refresh">
<Glyphicon glyph="refresh" />
Expand Down
2 changes: 1 addition & 1 deletion web/client/components/TOC/fragments/settings/VisibilityLimitsForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@ function VisibilityLimitsForm({
<div style={{ flex: 1 }}>{title}</div>
<Toolbar
btnDefaultProps={{
className: 'square-button-md no-border'
className: 'square-button no-border'
}}
buttons={[
{
Expand Down
4 changes: 2 additions & 2 deletions web/client/components/TOC/fragments/settings/WMSCacheOptions.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,7 +303,7 @@ function WMSCacheOptions({
? 'layerProperties.updateTileGrids'
: 'layerProperties.checkAvailableTileGridsInfo'
}
className="square-button-md no-border format-refresh"
className="square-button no-border format-refresh"
onClick={() => {
onTileMatrixSetsFetch({ ...layer, force: true }).then((value) => handleOnChange(value, layer.tileGridStrategy !== 'custom'));
}}
Expand All @@ -319,7 +319,7 @@ function WMSCacheOptions({
active={layer.tileGridStrategy === 'custom'}
glyph={layer.tileGridStrategy === 'custom' ? 'grid-custom' : 'grid-regular'}
bsStyle={layer.tileGridStrategy === 'custom' ? 'success' : 'primary'}
className="square-button-md"
className="square-button"
onClick={() => {
const newTileGridStrategy = layer.tileGridStrategy !== 'custom'
? 'custom'
Expand Down
6 changes: 3 additions & 3 deletions web/client/components/TOC/fragments/settings/__tests__/ThematicLayer-test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ describe('test ThematicLayer module component', () => {
expect(domNode).toExist();
expect(document.getElementsByClassName('thematic_layer').length).toBe(1);
expect(document.getElementsByClassName('thematic_layer')[0].childNodes.length).toBe(1);
expect(domNode.getElementsByClassName('mapstore-switch-panel')[0].querySelector('button.square-button-sm')).toExist();
expect(domNode.getElementsByClassName('mapstore-switch-panel')[0].querySelector('button.square-button')).toExist();
});

it('tests ThematicLayer component with configured thematic thema style admin buttons for no admin', () => {
Expand All @@ -238,7 +238,7 @@ describe('test ThematicLayer module component', () => {
expect(domNode).toExist();
expect(document.getElementsByClassName('thematic_layer').length).toBe(1);
expect(document.getElementsByClassName('thematic_layer')[0].childNodes.length).toBe(1);
expect(domNode.getElementsByClassName('mapstore-switch-panel')[0].querySelector('button.square-button-sm')).toNotExist();
expect(domNode.getElementsByClassName('mapstore-switch-panel')[0].querySelector('button.square-button')).toNotExist();
});

it('tests ThematicLayer component with configured thematic thema style toggle configuration', () => {
Expand All @@ -254,7 +254,7 @@ describe('test ThematicLayer module component', () => {
expect(domNode).toExist();
expect(document.getElementsByClassName('thematic_layer').length).toBe(1);
expect(document.getElementsByClassName('thematic_layer')[0].childNodes.length).toBe(1);
const cfgButton = domNode.getElementsByClassName('mapstore-switch-panel')[0].querySelector('button.square-button-sm');
const cfgButton = domNode.getElementsByClassName('mapstore-switch-panel')[0].querySelector('button.square-button');
TestUtils.Simulate.click(cfgButton);
expect(spyConfigurationChange.calls.length).toBe(2);
});
Expand Down
2 changes: 1 addition & 1 deletion web/client/components/TOC/fragments/settings/__tests__/VisibilityLimitsForm-test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ describe('VisibilityLimitsForm', () => {
/>, document.getElementById('container'));
});
expect(document.querySelector('.ms-visibility-limits-form')).toBeTruthy();
const buttons = document.querySelectorAll('.square-button-md');
const buttons = document.querySelectorAll('.square-button');
expect(buttons.length).toBe(1);
});

Expand Down
2 changes: 1 addition & 1 deletion web/client/components/TOC/fragments/template/MetadataTemplate.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ class MetadataTemplate extends React.Component {
{content}
<Button
style={{margin: '4px 0 0 4px'}}
className="square-button-md no-border"
className="square-button no-border"
onClick={() => collapsePanel(id, !this.state.collapsed[id])}>
<Glyphicon glyph={this.state.collapsed[id] ? 'plus' : 'minus'}/>
</Button>
Expand Down
4 changes: 2 additions & 2 deletions web/client/components/background/BackgroundDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ export default class BackgroundDialog extends React.Component {
<div style={{ display: 'flex', alignItems: 'center' }}>
<ControlLabel style={{ flex: 1 }}><Message msgId="backgroundDialog.additionalParameters" /></ControlLabel>
<Button
className="square-button-md"
className="square-button"
tooltipId="backgroundDialog.addAdditionalParameterTooltip"
style={{ borderColor: 'transparent' }}
onClick={() => {
Expand Down Expand Up @@ -238,7 +238,7 @@ export default class BackgroundDialog extends React.Component {
additionalParameters: this.state.additionalParameters.filter((aa) => val.id !== aa.id)
})}
tooltipId="backgroundDialog.removeAdditionalParameterTooltip"
className="square-button-md"
className="square-button"
style={{ borderColor: 'transparent' }}>
<Glyphicon glyph="trash" />
</Button>
Expand Down
2 changes: 1 addition & 1 deletion web/client/components/background/TerrainEditor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ function TerrainEditor({
<FlexBox classNames={['_padding-lr-lg', '_padding-tb-md']} column gap="md">
<FlexBox centerChildrenVertically>
<FlexBox.Fill component={Text} fontSize="md" >{getMessageById(messages, "backgroundSelector.terrain.title")}</FlexBox.Fill>
<Button className="square-button-md" onClick={onHide} borderTransparent gap="sm">
<Button className="square-button" onClick={onHide} borderTransparent gap="sm">
<Glyphicon glyph="1-close" />
</Button>
</FlexBox>
Expand Down
6 changes: 3 additions & 3 deletions web/client/components/catalog/RecordItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ class RecordItem extends React.Component {
<SplitButton
id="add-layer-button"
tooltipId="catalog.addToMap"
className="square-button-md"
className="square-button"
bsStyle="primary"
title={this.state.loading ? <Loader className={'ms-loader ms-loader-primary'}/> : <Glyphicon glyph="plus" />}
onClick={() => this.onAddToMap(record)}
Expand All @@ -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,
Expand Down Expand Up @@ -282,7 +282,7 @@ class RecordItem extends React.Component {
tools={
<Toolbar
btnDefaultProps={{
className: 'square-button-md',
className: 'square-button',
bsStyle: 'primary'
}}
btnGroupProps={{
Expand Down
2 changes: 1 addition & 1 deletion web/client/components/catalog/SharingLinks.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ class SharingLinks extends React.Component {
</Popover>);
return (
<OverlayTrigger container={this.props.popoverContainer} positionLeft={150} placement="top" trigger="click" overlay={popover}>
<Button bsSize={buttonSize} className="square-button-md" bsStyle="primary">
<Button bsSize={buttonSize} className="square-button" bsStyle="primary">
<Glyphicon glyph="link"/>
</Button>
</OverlayTrigger>
Expand Down
2 changes: 1 addition & 1 deletion web/client/components/catalog/editor/AdvancedSettings/RasterAdvancedSettings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
<Glyphicon glyph="refresh" />
Expand Down
2 changes: 1 addition & 1 deletion web/client/components/contextcreator/ConfigurePluginsStep.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ const pluginsToItems = ({
{!isRoot && parentIsEnabled && !isMandatory && <Button
style={{left: '-4px', position: 'relative'}}
key="checkbox"
className="square-button-md no-border"
className="square-button no-border"
onClick={(event) => {
event.stopPropagation();
if (!isMandatory) {
Expand Down
8 changes: 4 additions & 4 deletions web/client/components/contextcreator/ConfigureThemes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ function ConfigureThemes({
</div>
}><Button
disabled={!customVariablesEnabled}
className="square-button-md no-border"
className="square-button no-border"
style={{ display: mostReadableTextColor ? 'block' : 'none' }}>
<Glyphicon glyph="exclamation-mark"/>
</Button>
Expand Down Expand Up @@ -319,7 +319,7 @@ function ConfigureThemes({
</div>
}><Button
disabled={!customVariablesEnabled}
className="square-button-md no-border"
className="square-button no-border"
style={{ display: mostReadablePrimaryContrastColor ? 'block' : 'none' }}>
<Glyphicon glyph="exclamation-mark"/>
</Button>
Expand Down Expand Up @@ -436,7 +436,7 @@ function ConfigureThemes({
</div>
}><Button
disabled={!customVariablesEnabled}
className="square-button-md no-border"
className="square-button no-border"
style={{ display: mostReadableSuccessContrastColor ? 'block' : 'none' }}>
<Glyphicon glyph="exclamation-mark"/>
</Button>
Expand Down Expand Up @@ -516,7 +516,7 @@ function ConfigureThemes({
</div>
}><Button
disabled={!customVariablesEnabled}
className="square-button-md no-border"
className="square-button no-border"
style={{ display: mostReadableSuccessPrimaryColor ? 'block' : 'none' }}>
<Glyphicon glyph="exclamation-mark"/>
</Button>
Expand Down
2 changes: 1 addition & 1 deletion web/client/components/data/featuregrid/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default (props = {
<div className="data-grid-top-toolbar-right">
{!props.hideCloseButton && <Button
onClick={props.onClose}
className="square-button-md no-border featuregrid-top-toolbar-margin"
className="square-button no-border featuregrid-top-toolbar-margin"
>
<Glyphicon glyph="1-close"/>
</Button>}
Expand Down
2 changes: 1 addition & 1 deletion web/client/components/data/featuregrid/toolbars/TButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (<Button ref={ref} {...props} bsStyle={active ? "success" : "primary"} disabled={disabled} id={`fg-${id}`}
style={getStyle(visible)}
className={className}
Expand Down
2 changes: 1 addition & 1 deletion web/client/components/data/featuregrid/toolbars/TSplitButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import ContainerDimensions from 'react-container-dimensions';
import './TSplitButton.less';
import classnames from "classnames";

export const SimpleTButton = forwardRef(({ disabled, id, visible, onClick, active, title, buttonClassName = "square-button-md",
export const SimpleTButton = forwardRef(({ disabled, id, visible, onClick, active, title, buttonClassName = "square-button",
menuStyle = {}, className, children, onMount = () => {}, ...props }, ref) => {
const [isShown, setIsShown] = useState(false);
useEffect(() => {
Expand Down
4 changes: 2 additions & 2 deletions web/client/components/data/featuregrid/toolbars/Toolbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ const standardButtons = {
title={isSnappingLoading ? <Spinner spinnerName="ball-beat" overrideSpinnerClassName="spinner" key="loadingSpinner" noFadeIn /> : <Glyphicon glyph="magnet" />}
tooltipPosition="top"
className="snap-tool"
buttonClassName="square-button-md no-border"
buttonClassName="square-button no-border"
menuStyle={{maxHeight: `calc(${Math.round(editorHeight * 100)}vh - 50px)`, overflowY: 'auto'}}
active={!!snapping}
pullLeft
Expand Down Expand Up @@ -265,7 +265,7 @@ const standardButtons = {
glyph="viewport-filter"
tooltipPosition="top"
className="viewportFilter-tool"
buttonClassName="square-button-md no-border"
buttonClassName="square-button no-border"
active={viewportFilter ?? pluginCfg?.filterByViewport}
pullLeft
/>)
Expand Down
6 changes: 3 additions & 3 deletions web/client/components/data/featuregrid/toolbars/__tests__/Toolbar-test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,13 +306,13 @@ describe('Featuregrid toolbar component', () => {
ReactDOM.render(<Toolbar mode="EDIT" selectedCount={0} hasSupportedGeometry={false} />, document.getElementById("container"));
const el = document.getElementsByClassName("featuregrid-toolbar")[0];
expect(el).toExist();
expect(filter(document.getElementsByClassName("square-button-md"), function(b) { return isVisibleButton(b); }).length).toBe(2);
expect(filter(document.getElementsByClassName("square-button"), function(b) { return isVisibleButton(b); }).length).toBe(2);
expect(isVisibleButton(document.getElementById("fg-add-feature"))).toBe(false);
expect(isVisibleButton(document.getElementById("fg-back-view"))).toBe(true);
expect(isVisibleButton(document.getElementById("fg-grid-map-filter"))).toBe(true);

ReactDOM.render(<Toolbar mode="EDIT" selectedCount={1} hasSupportedGeometry={false} />, document.getElementById("container"));
expect(filter(document.getElementsByClassName("square-button-md"), function(b) { return isVisibleButton(b); }).length).toBe(3);
expect(filter(document.getElementsByClassName("square-button"), function(b) { return isVisibleButton(b); }).length).toBe(3);
expect(isVisibleButton(document.getElementById("fg-add-feature"))).toBe(false);
expect(isVisibleButton(document.getElementById("fg-draw-feature"))).toBe(false);
expect(isVisibleButton(document.getElementById("fg-delete-geometry"))).toBe(false);
Expand All @@ -322,7 +322,7 @@ describe('Featuregrid toolbar component', () => {
ReactDOM.unmountComponentAtNode(document.getElementById("container"));

ReactDOM.render(<Toolbar mode="EDIT" selectedCount={1} hasSupportedGeometry={false} hasChanges/>, document.getElementById("container"));
expect(filter(document.getElementsByClassName("square-button-md"), function(b) { return isVisibleButton(b); }).length).toBe(3);
expect(filter(document.getElementsByClassName("square-button"), function(b) { return isVisibleButton(b); }).length).toBe(3);
expect(isVisibleButton(document.getElementById("fg-draw-feature"))).toBe(false);
expect(isVisibleButton(document.getElementById("fg-delete-geometry"))).toBe(false);
expect(isVisibleButton(document.getElementById("fg-save-feature"))).toBe(true);
Expand Down
4 changes: 2 additions & 2 deletions web/client/components/data/identify/IdentifyContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export default props => {
format={format}
/>
<Toolbar
btnDefaultProps={{ bsStyle: 'primary', className: 'square-button-md' }}
btnDefaultProps={{ bsStyle: 'primary', className: 'square-button' }}
buttons={getFeatureButtons(props)}
transitionProps={null}
/>
Expand All @@ -170,7 +170,7 @@ export default props => {
</div>
<GeocodeViewer latlng={latlng} revGeocodeDisplayName={revGeocodeDisplayName} {...props}/>
<Toolbar
btnDefaultProps={{ bsStyle: 'primary', className: 'square-button-md' }}
btnDefaultProps={{ bsStyle: 'primary', className: 'square-button' }}
buttons={toolButtons}
transitionProps={null
/* transitions was causing a bad rendering of toolbar present in the identify panel
Expand Down
Loading
Loading