Skip to content
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

feat: optimize component styles #576

Merged
merged 4 commits into from
Mar 25, 2024
Merged

feat: optimize component styles #576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b16a4e4
feat: optimize component styles
noneAuth Jan 5, 2024
2d5b83b
feat: update code write
noneAuth Mar 25, 2024
4d5e614
feat: update code write
noneAuth Mar 25, 2024
733774c
feat: update code write
noneAuth Mar 25, 2024
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
53 changes: 37 additions & 16 deletions packages/gi-assets-basic/src/components/RichContainer/Component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import Toolbar from './Toolbar';
import './index.less';

const URL_SEARCH_KEY = 'ActiveAssetID';
const MIN_WIDTH = 336;
const MIN_WIDTH = 350;
const MAX_WIDTH = 720;
const visibleStyle: React.CSSProperties = {
visibility: 'visible',
width: '100%',
Expand All @@ -27,7 +28,7 @@ export interface RichContainerState {
viewMode: string;
}
const getDefaultSideWidth = () => {
const defaultWidth = localStorage.getItem('GI_RICH_CONTAINER_SIDE_WIDTH') || '330';
const defaultWidth = localStorage.getItem('GI_RICH_CONTAINER_SIDE_WIDTH') || 350;
return Number(defaultWidth);
};
const RichContainer = props => {
Expand All @@ -36,7 +37,7 @@ const RichContainer = props => {
const { HAS_GRAPH, GISDK_ID } = context;
const Containers = useContainer(context);
const [state, setState] = React.useState<RichContainerState>({
activeKey: localStorage.getItem(URL_SEARCH_KEY) || 'LanguageQuery',
activeKey: localStorage.getItem(URL_SEARCH_KEY) || 'ConfigQuery',
viewMode: 'GISDK_CANVAS',
});
const { activeKey, viewMode } = state;
Expand All @@ -58,7 +59,17 @@ const RichContainer = props => {
useEffect(() => {
if (isExpanded) {
const defaultWidth = getDefaultSideWidth();
setWidth(defaultWidth >= MIN_WIDTH ? defaultWidth : MIN_WIDTH);
const isInRange = defaultWidth <= MAX_WIDTH && defaultWidth >= MIN_WIDTH;
const width = isInRange ? defaultWidth : defaultWidth >= MAX_WIDTH ? MAX_WIDTH : MIN_WIDTH;
setWidth(width);
// const checkAreaWidth = defaultWidth <= MAX_WIDTH && defaultWidth >= MIN_WIDTH;
// if (checkAreaWidth) {
// setWidth(defaultWidth);
// } else if (defaultWidth >= MAX_WIDTH) {
// setWidth(MAX_WIDTH);
// } else if (defaultWidth <= MIN_WIDTH) {
// setWidth(MIN_WIDTH);
// }
} else setWidth(0);
}, [isExpanded]);

Expand Down Expand Up @@ -131,7 +142,14 @@ const RichContainer = props => {
const onResizeStop = (e, direction, ref, d) => {
setWidth(prev => {
const currentWidth = prev + d.width;
const realWidth = currentWidth >= MIN_WIDTH ? currentWidth : MIN_WIDTH;
const realWidth = currentWidth >= MAX_WIDTH ? MAX_WIDTH : currentWidth <= MIN_WIDTH ? MIN_WIDTH : currentWidth;
// if (currentWidth >= MAX_WIDTH) {
// realWidth = MAX_WIDTH;
// } else if (currentWidth <= MIN_WIDTH) {
// realWidth = MIN_WIDTH;
// } else if (currentWidth <= MAX_WIDTH && currentWidth >= MIN_WIDTH) {
// realWidth = currentWidth;
// }
localStorage.setItem('GI_RICH_CONTAINER_SIDE_WIDTH', realWidth);
return realWidth;
});
Expand All @@ -143,8 +161,10 @@ const RichContainer = props => {
value: 'GISDK_CANVAS',
label: (
<Space>
<Icon type={ViewArea.icon}></Icon>
{$i18n.get({ id: 'basic.components.RichContainer.Component.GraphView', dm: '图谱视图' })}
<Icon type={ViewArea.icon} style={{ fontSize: 18 }}></Icon>
<span style={{ fontSize: 14 }}>
{$i18n.get({ id: 'basic.components.RichContainer.Component.GraphView', dm: '图谱视图' })}
</span>
</Space>
),
},
Expand All @@ -171,13 +191,13 @@ const RichContainer = props => {
return (
<div className="gi-rich-container">
<Header leftArea={NavbarLeftArea} rightArea={NavbarRightArea} />
{isSheet && <div style={{ height: '40px', position: 'relative', display: 'block' }}></div>}
{isSheet && <div style={{ height: 40, position: 'relative', display: 'block' }}></div>}
<div className="gi-rich-container-toolbar">
<div className="toolbar-item">
<Select
bordered={false}
defaultValue="GISDK_CANVAS"
style={{ width: 120 }}
style={{ width: 'auto' }}
onChange={handleChangeViewMode}
options={ViewModeOptions}
suffixIcon={<Icon type="icon-shituxiala" />}
Expand All @@ -191,22 +211,23 @@ const RichContainer = props => {
<Divider type="vertical" />
<span
style={{
marginLeft: 6,
margin: '0 4',
color: '#98989D',
marginRight: 8,
fontSize: 14,
paddingRight: 6,
}}
>
ζŸ₯诒过滀
</span>
<Button
type={HAS_QUERY_VIEW ? 'primary' : 'text'}
icon={<Icon type={DataArea.icon} />}
icon={<Icon type={DataArea.icon} style={{ fontSize: 14 }} />}
className="gi-richcontainer-query-button"
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: 12,
fontSize: 14,
...(HAS_QUERY_VIEW ? ActiveButtonStyle : {}),
}}
onClick={() => {
Expand All @@ -226,13 +247,13 @@ const RichContainer = props => {
<div className="toolbar-item">
<Button
type={HAS_FILTER_VIEW ? 'primary' : 'text'}
icon={<Icon type={FilterArea.icon} />}
icon={<Icon type={FilterArea.icon} style={{ fontSize: 14 }} />}
className="gi-richcontainer-filter-button"
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: 12,
fontSize: 14,
...(HAS_FILTER_VIEW ? ActiveButtonStyle : {}),
}}
onClick={e => {
Expand Down Expand Up @@ -279,7 +300,7 @@ const RichContainer = props => {
backgroundColor: '#f3f5f9',
// transition: 'width 5.3s ease 0s',
zIndex: 10,
padding: '12px',
padding: 12,
}}
// @ts-ignore
size={{ width, height: '100%' }}
Expand Down
12 changes: 7 additions & 5 deletions packages/gi-assets-basic/src/components/RichContainer/Toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ const Toolbar = (props: ToolbarProps) => {
return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<Divider type="vertical" />
<span style={{ padding: '0px 8px 0px 6px', color: '#98989D' }}>{title}</span>
<span style={{ fontSize: 14, paddingRight: 8, color: '#98989D' }}>{title}</span>

{options.map(item => {
const isActive = value === item.id;
const { id, props: itemProps, component: ItemComponent, info } = item;
Expand All @@ -46,22 +47,23 @@ const Toolbar = (props: ToolbarProps) => {
<Tooltip title={title} color={tooltipColor}>
<Button
type={buttonType}
icon={<Icon type={icon} />}
icon={<Icon type={icon} style={{ fontSize: 18 }} />}
key={id}
className={info.className}
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: 32,
marginRight: 4,
width: 'auto',
margin: '0 4',
padding: '0 8',
...(isActive ? ActiveButtonStyle : {}),
}}
onClick={() => {
onChange(id);
}}
>
{displayText ? title : null}
{displayText ? <span style={{ fontSize: 14 }}>{title}</span> : null}
</Button>
</Tooltip>
);
Expand Down
7 changes: 2 additions & 5 deletions packages/gi-common-components/src/CommonStyleSetting/IconPicker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,10 @@ const IconPicker: React.FC<IColorInputProps> = props => {
ref={container}
className="icon-input-container-icon-tips"
style={{
border: `1px solid #ddd`,
border: `1 solid #ddd`,
}}
>
<Icon
type={`icon-${activeIcon}`}
style={{ color: '#2f54e0', fontSize: '18px', cursor: 'pointer' }}
></Icon>
<Icon type={`icon-${activeIcon}`} style={{ color: '#2f54e0', fontSize: 18, cursor: 'pointer' }}></Icon>
</div>
</Popover>
}
Expand Down
Loading