Skip to content

Commit

Permalink
Merge pull request #91 from cam-inc/style/change-toolbar-size
Browse files Browse the repository at this point in the history 
style: change toolbar style
  • Loading branch information
@hiteto218
hiteto218 authored Jun 9, 2023
2 parents 11e2201 + 592f667 commit 89f8748
Show file tree
Hide file tree
Showing 6 changed files with 244 additions and 146 deletions.
1 change: 1 addition & 0 deletions packages/core/src/theme/index.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export const defaultThemeToken = {
px: '1px',
'0.5': '0.125rem',
'1': '0.25rem',
'1.5': '0.375rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
Expand Down
221 changes: 137 additions & 84 deletions packages/core/src/toolbar/index.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,95 +2,148 @@ import { style } from '@vanilla-extract/css';
import { styles as editorStyles } from '../editor/index.css';
import { themeVars } from '../theme/index.css';

export const styles = {
root: style({
selectors: {
[`${editorStyles.root} &`]: {
padding: themeVars.space['2'],
backgroundColor: themeVars.color.surface,
color: themeVars.color.surfaceOn,
borderRadius: themeVars.radius.medium,
border: `1px solid ${themeVars.color.surfaceOnSlight}`,
overflow: 'hidden',
boxShadow: themeVars.boxShadow.level['1'],
},
const root = style({
selectors: {
[`${editorStyles.root} &`]: {
backgroundColor: themeVars.color.surface,
color: themeVars.color.surfaceOn,
borderRadius: themeVars.radius.medium,
border: `1px solid ${themeVars.color.surfaceOnSlight}`,
overflow: 'hidden',
boxShadow: themeVars.boxShadow.level['1'],
},
},
});
const list = style({
selectors: {
[`${editorStyles.root} &`]: {
display: 'flex',
listStyle: 'none',
margin: 0,
padding: 0,
},
},
});

const item = style({
selectors: {
[`${editorStyles.root} &`]: {
borderRight: `1px solid ${themeVars.color.backgroundOnFaint}`,
},
[`${editorStyles.root} &:last-child`]: {
paddingRight: 0,
marginRight: 0,
borderRight: 'none',
},
},
});

const buttonBox = style({
selectors: {
[`${editorStyles.root} &`]: {
backgroundColor: 'transparent',
borderWidth: 0,
borderStyle: 'solid',
borderColor: 'currentColor',
padding: 0,
display: 'flex',
placeItems: 'center',
position: 'relative',
fontSize: themeVars.fontSize.label.small,
whiteSpace: 'nowrap',
cursor: 'pointer',
height: 32,
paddingLeft: themeVars.space[1],
paddingRight: themeVars.space[1],
},
[`${editorStyles.root} ${list} ${item}:first-child &`]: {
paddingLeft: themeVars.space[2],
},
}),
list: style({
selectors: {
[`${editorStyles.root} &`]: {
display: 'flex',
listStyle: 'none',
margin: 0,
padding: 0,
},
},
});

const featureIcon = style({
selectors: {
[`${editorStyles.root} &`]: {
display: 'flex',
placeItems: 'center',
width: 20,
height: 20,
color: themeVars.color.brand,
marginRight: themeVars.space[0.5],
},
},
});

const dropDownIcon = style({
selectors: {
[`${editorStyles.root} &`]: {
display: 'block',
width: 20,
height: 20,
color: themeVars.color.backgroundOnSlight,
},
}),
item: style({
selectors: {
[`${editorStyles.root} &`]: {
paddingRight: themeVars.space['3'],
marginRight: themeVars.space['3'],
borderRight: `1px solid ${themeVars.color.surfaceOnFaint}`,
},
[`${editorStyles.root} &:last-child`]: {
paddingRight: 0,
marginRight: 0,
borderRight: 'none',
},
},
});

const moreButton = style({
selectors: {
[`${editorStyles.root} &`]: {
backgroundColor: 'transparent',
borderWidth: 0,
borderStyle: 'solid',
borderColor: 'currentColor',
display: 'flex',
placeItems: 'center',
padding: 0,
height: 32,
position: 'relative',
color: themeVars.color.backgroundOnSlight,
cursor: 'pointer',
paddingLeft: themeVars.space[1],
paddingRight: themeVars.space[1.5],
},
}),
buttonBox: style({
selectors: {
[`${editorStyles.root} &`]: {
backgroundColor: 'transparent',
borderWidth: 0,
borderStyle: 'solid',
borderColor: 'currentColor',
padding: 0,
display: 'flex',
placeItems: 'center',
fontSize: themeVars.fontSize.label.medium,
whiteSpace: 'nowrap',
},
},
});

const moreButtonIcon = style({
selectors: {
[`${editorStyles.root} &`]: {
width: 20,
height: 20,
padding: 0,
},
}),
featureIcon: style({
selectors: {
[`${editorStyles.root} &`]: {
display: 'flex',
placeItems: 'center',
width: 20,
height: 20,
color: themeVars.color.brand,
marginRight: themeVars.space[1],
},
},
});

const bg = style({
selectors: {
[`${editorStyles.root} &`]: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
},
}),
dropDownIcon: style({
selectors: {
[`${editorStyles.root} &`]: {
display: 'block',
width: 20,
height: 20,
color: themeVars.color.backgroundOnSlight,
marginLeft: themeVars.space[1],
},
[`${editorStyles.root} &:hover`]: {
backgroundColor: themeVars.color.brand,
opacity: themeVars.opacity.hover,
},
}),
moreButton: style({
selectors: {
[`${editorStyles.root} &`]: {
backgroundColor: 'transparent',
borderWidth: 0,
borderStyle: 'solid',
borderColor: 'currentColor',
display: 'block',
width: 20,
height: 20,
padding: 0,
color: themeVars.color.backgroundOnSlight,
},
[`${editorStyles.root} &:active`]: {
backgroundColor: themeVars.color.brand,
opacity: themeVars.opacity.active,
},
}),
},
});

export const styles = {
root,
list,
item,
buttonBox,
featureIcon,
dropDownIcon,
moreButton,
moreButtonIcon,
bg,
};
19 changes: 7 additions & 12 deletions packages/core/src/toolbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,19 @@ import { styles } from './index.css';
export type CustomNode = Config['elements'][number] | Config['texts'][number];

export type ButtonBoxProps = {
featureIcon: React.ReactNode;
onClick: React.MouseEventHandler;
name?: string;
featureIcon?: React.ReactNode;
};
export const ButtonBox: React.FC<ButtonBoxProps> = ({
featureIcon,
onClick,
name,
featureIcon,
}) => {
return (
<button type="button" className={styles.buttonBox} onClick={onClick}>
<span className={styles.featureIcon}>{featureIcon}</span>
<div className={styles.bg} />
{featureIcon && <span className={styles.featureIcon}>{featureIcon}</span>}
{name && <span>{name}</span>}
<span className={styles.dropDownIcon}>
<svg viewBox="0 0 20 20">
Expand All @@ -47,7 +48,6 @@ export const Toolbar: React.FC<ToolbarProps> = () => {
const popoverMore = usePopover<HTMLLIElement>();
const [path, setPath] = useState<Path>([0]);
const [node, setNode] = useState<Node | CustomNode | null>(null);
const [blockIcon, setBlockIcon] = useState<React.ReactNode | null>(null);
const [blockName, setBlockName] = useState('ブロックを選択');
const [isMouseDown, setIsMouseDown] = useState(false);

Expand All @@ -69,7 +69,6 @@ export const Toolbar: React.FC<ToolbarProps> = () => {
popoverTransform.close();
popover.close();
setBlockName('ブロックを選択');
setBlockIcon(null);
}, [popoverTransform]);

const handleMoreClick = useCallback(() => {
Expand Down Expand Up @@ -145,7 +144,6 @@ export const Toolbar: React.FC<ToolbarProps> = () => {

useEffect(() => {
if (hasToolbox(node)) {
setBlockIcon(<node.toolbox.Icon />);
setBlockName(node.toolbox.title);
}
}, [node]);
Expand Down Expand Up @@ -178,11 +176,7 @@ export const Toolbar: React.FC<ToolbarProps> = () => {
<div className={styles.root} ref={toolBarRef}>
<ul className={styles.list}>
<li className={styles.item} ref={popoverTransform.targetRef}>
<ButtonBox
name={blockName}
featureIcon={blockIcon}
onClick={handleTransformClick}
/>
<ButtonBox name={blockName} onClick={handleTransformClick} />
</li>
{config.texts.map(
(text) =>
Expand All @@ -200,7 +194,8 @@ export const Toolbar: React.FC<ToolbarProps> = () => {
className={styles.moreButton}
onClick={handleMoreClick}
>
<svg viewBox="0 0 20 20">
<div className={styles.bg} />
<svg viewBox="0 0 20 20" className={styles.moreButtonIcon}>
<path
d="M10.5 16C10.0833 16 9.72933 15.854 9.438 15.562C9.146 15.2707 9 14.9167 9 14.5C9 14.0833 9.146 13.7293 9.438 13.438C9.72933 13.146 10.0833 13 10.5 13C10.9167 13 11.2707 13.146 11.562 13.438C11.854 13.7293 12 14.0833 12 14.5C12 14.9167 11.854 15.2707 11.562 15.562C11.2707 15.854 10.9167 16 10.5 16ZM10.5 11.5C10.0833 11.5 9.72933 11.354 9.438 11.062C9.146 10.7707 9 10.4167 9 10C9 9.58333 9.146 9.22933 9.438 8.938C9.72933 8.646 10.0833 8.5 10.5 8.5C10.9167 8.5 11.2707 8.646 11.562 8.938C11.854 9.22933 12 9.58333 12 10C12 10.4167 11.854 10.7707 11.562 11.062C11.2707 11.354 10.9167 11.5 10.5 11.5ZM10.5 7C10.0833 7 9.72933 6.854 9.438 6.562C9.146 6.27067 9 5.91667 9 5.5C9 5.08333 9.146 4.72933 9.438 4.438C9.72933 4.146 10.0833 4 10.5 4C10.9167 4 11.2707 4.146 11.562 4.438C11.854 4.72933 12 5.08333 12 5.5C12 5.91667 11.854 6.27067 11.562 6.562C11.2707 6.854 10.9167 7 10.5 7Z"
fill="currentColor"
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/toolmenu/index.css.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const button = style({
width: '100%',
padding: `${themeVars.space['2']} ${themeVars.space['3']}`,
position: 'relative',
cursor: 'pointer',
},
},
});
Expand Down
Loading

0 comments on commit 89f8748

Please sign in to comment.