Skip to content

support: Implement the improved New button. #10937

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

Merged
yuki-takei merged 3 commits into from
Mar 31, 2026
Merged

support: Implement the improved New button. #10937

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e12dddf
support/149584-180129-icon-edit
yuyaiwahori Mar 27, 2026
77ef531
FB 修正(六角形の形、hoverのサイズ)
yuyaiwahori Mar 30, 2026
9c908be
hover時に六角形が110%になるようにする
yuyaiwahori Mar 31, 2026
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
8 changes: 8 additions & 0 deletions apps/app/src/client/components/Sidebar/PageCreateButton/CreateButton.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@
:global(svg .background) {
pointer-events: fill;
}

:global(.hexagon-main),
:global(.pencil-icon) {
transition: transform 0.2s ease-in-out;
transform-origin: 22.5px 22px;
}
}

// == Colors
Expand All @@ -35,11 +41,13 @@
.btn-create:hover {
:global(svg) {
fill: var(--bs-btn-hover-bg);
transform: scale(1.1);
}
}

.btn-create:active {
:global(svg) {
fill: var(--bs-btn-active-bg);
transform: scale(1.1);
}
}
6 changes: 4 additions & 2 deletions apps/app/src/client/components/Sidebar/PageCreateButton/DropendToggle.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
.btn-toggle {
@extend %btn-basis;

left: 12px;
left: 14px;
padding: 0;

:global(.icon) {
Expand All @@ -18,6 +18,7 @@
// no caret
.btn-toggle {
& {

// no caret
&::after {
display: none !important;
Expand All @@ -28,7 +29,7 @@
// hitarea
.btn-toggle {
:global(.hitarea) {
inset: 0 -10px 0 0;
inset: 0 -14px 0 0;
}
}

Expand All @@ -54,3 +55,4 @@
fill: var(--grw-primary-600);
}
}

11 changes: 5 additions & 6 deletions apps/app/src/client/components/Sidebar/PageCreateButton/Hexagon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,16 @@ type Props = {
export const Hexagon = React.memo(
(props: Props): JSX.Element => (
<svg
width="41"
height="36"
viewBox="0 0 41 36"
fill="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 27.691 23.999"
height="36px"
className={props.className}
>
<title>Create</title>
<g className="background" transform="translate(0 0)">
<path
d="M20.768,0l6.923,12L20.768,24H6.923L0,12,6.923,0Z"
transform="translate(0)"
></path>
<path d="M28.5717 0C29.9943 0 31.3099 0.755645 32.0268 1.98452L40.1934 15.9845C40.92 17.23 40.92 18.77 40.1934 20.0155L32.0268 34.0155C31.3099 35.2444 29.9943 36 28.5717 36H12.1666C10.744 36 9.42835 35.2444 8.71151 34.0155L0.544839 20.0155C-0.181674 18.77 -0.181673 17.23 0.54484 15.9845L8.71151 1.98451C9.42835 0.755643 10.744 0 12.1666 0H28.5717Z" />
</g>
</svg>
),
Expand Down
1 change: 1 addition & 0 deletions growi-cloud-next
Open in desktop
Submodule growi-cloud-next added at 1ea7e9
Loading