qcast3/qcast-pub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

canvas menu, header menu hover 기능 수정 및 추가

Browse Source
This commit is contained in:
김창수 2024-09-09 09:48:49 +09:00
parent cedc17a96b
commit 1eb7b48118
10 changed files with 108 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/inputwrap/page.jsx
View File

@ -5,6 +5,9 @@ import Qselect from "@/components/common/select/Qselect";
import '@/styles/_inputcommon.scss'
export default function InputWrapPage (){
const SelectOption = [
{name: 'オンライン保証シ',}, {name: 'ステム'}
]
return(
<div className="input-content">
<div className="input-wrap">
@ -18,7 +21,7 @@ export default function InputWrapPage (){
<div className="input-wrap">
<h1>Select WRAP</h1>
<div className="form-select">
<Qselect/>
<Qselect title={'Q.ORDER'} option={SelectOption}/>
</div>
</div>
<div className="input-wrap">

6
src/app/main/page.jsx Normal file
View File

@ -0,0 +1,6 @@
export default function MainPage(){
return(
<>
</>
)
}

29
src/components/canvas/MenuDepth01.jsx
View File

@ -1,3 +1,7 @@
'use client'
import { ToggleonMouse } from "../header/Header"
export default function MenuDepth01(){
return(
<div className="canvas-depth2-inner">
@ -10,17 +14,26 @@ export default function MenuDepth01(){
<li className="canvas-depth2-item"><button>銅線移動</button></li>
<li className="canvas-depth2-item"><button>特殊コーナー形状</button></li>
</ul>
<div className="canvas-depth2-btn-list">
<div className="depth2-btn-box">
<ul className="canvas-depth2-btn-list">
<li className="depth2-btn-box"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}
>
<button>屋根面の割り当て</button>
</div>
<div className="depth2-btn-box">
</li>
<li className="depth2-btn-box"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}
>
<button>屋根材の設定と変更</button>
</div>
<div className="depth2-btn-box">
</li>
<li className="depth2-btn-box"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}
>
<button>屋根面全体削除</button>
</div>
</div>
</li>
</ul>
</div>
)
}

66
src/components/header/Header.jsx
View File

@ -2,24 +2,25 @@
import Link from "next/link";
import Qselect from "../common/select/Qselect";
export const ToggleonMouse = (e, act, target) => {
const listWrap = e.target.closest(target);
const ListItem = Array.from(listWrap.childNodes)
ListItem.forEach(el => {
if(act === 'add'){
el.classList.add('mouse');
}else{
el.classList.remove('mouse');
}
})
if(act === 'add'){
e.target.parentElement.classList.remove('mouse')
}
}
export default function Header() {
const SelectOption = [
{name: 'オンライン保証シ',}, {name: 'ステム'}
]
const ToggleonMouse = (e, act) => {
const listWrap = e.target.parentElement.parentElement;
const ListItem = Array.from(listWrap.childNodes)
ListItem.forEach(el => {
if(act === 'add'){
el.classList.add('mouse');
}else{
el.classList.remove('mouse');
}
})
if(act === 'add'){
e.target.parentElement.classList.remove('mouse')
}
}
return(
<header>
<div className="header-inner">
@ -31,32 +32,47 @@ export default function Header() {
<ul className="nav-list ">
<li
className="nav-item "
onMouseEnter={(e) => ToggleonMouse(e, 'add')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove')}
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
>
<Link href={'#'}>ホームへ</Link>
</li>
<li
className="nav-item"
onMouseEnter={(e) => ToggleonMouse(e, 'add')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove')}
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
>
<button>物品及び図面管理</button>
<ul className="nav-depth2">
<li className="nav-depth2-item"><Link href={'#'}>新規物件登録</Link></li>
<li className="nav-depth2-item"><Link href={'#'}>モノ/図面管理</Link></li>
<li className="nav-depth2-item"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
><Link href={'#'}>新規物件登録</Link></li>
<li className="nav-depth2-item"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
><Link href={'#'}>モノ/図面管理</Link></li>
</ul>
</li>
<li
className="nav-item"
onMouseEnter={(e) => ToggleonMouse(e, 'add')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove')}
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
>
<button>コミュニティ</button>
<ul className="nav-depth2">
<li className="nav-depth2-item"><Link href={'#'}>お知らせ</Link></li>
<li className="nav-depth2-item"><Link href={'#'}>FAQ</Link></li>
<li className="nav-depth2-item"><Link href={'#'}>素材のダウンロード</Link></li>
<li className="nav-depth2-item"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
><Link href={'#'}>お知らせ</Link></li>
<li className="nav-depth2-item"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
><Link href={'#'}>FAQ</Link></li>
<li className="nav-depth2-item"
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
><Link href={'#'}>素材のダウンロード</Link></li>
</ul>
</li>
</ul>

2
src/components/publishpage/PublishPage.jsx
View File

@ -81,7 +81,7 @@ export default function PublishPage() {
<td><strong className="title"></strong></td>
<td><Link href="/canvas" target="_blank">CanvasPage</Link></td>
<td className="coding_stat_web"></td>
<td className="t-center">2024-09-05</td>
<td className="t-center">2024-09-06</td>
</tr>
</tbody>
</table>

4
src/styles/_contents.scss
View File

@ -199,6 +199,7 @@
align-items: center;
margin-right: 34px;
height: 100%;
transition: all .17s ease-in-out;
button{
position: relative;
font-size: 12px;
@ -220,6 +221,9 @@
&:last-child{
margin-right: 0;
}
&.mouse{
opacity: 0.55;
}
}
}
}

6
src/styles/_inputcommon.scss
View File

@ -11,6 +11,12 @@
margin-right: 10px;
}
}
.form-select{
width: 168px;
> div{
width: 100%;
}
}
.form-datepicker{
div{
margin-bottom: 10px;

4
src/styles/_layout.scss
View File

@ -96,6 +96,7 @@ header{
transition: all .17s ease-in-out;
.nav-depth2-item{
margin-bottom: 10px;
transition: all .17s ease-in-out;
a{
font-size: 13px;
font-weight: normal;
@ -104,6 +105,9 @@ header{
&:last-child{
margin-bottom: 0;
}
&.mouse{
opacity: 0.55;
}
}
&::before{
content: '';

23
src/styles/_reset.scss
View File

@ -171,30 +171,43 @@ button{
height: 30px;
line-height: 30px;
padding: 0 10px;
font-size: 13px;
background-color: #373737;
border: 1px solid #3F3F3F;
border-radius: 2px;
border-top-left-radius: 2px;
color: #fff;
cursor: pointer;
p{
font-size: 13px;
color: #fff;
height: 100%;
}
.select-item-wrap{
position: absolute;
top: 100%;
left: -1px;
clip-path:inset(0 0 100% 0);
width: calc(100% + 2px);
padding: 12px 20px;
padding: 8px 0;
background-color: #373737;
border: 1px solid #3F3F3F;
border-radius: 2px;
transition: all 0.17s ease-in-out;
visibility: hidden;
.select-item{
font-size: 12px;
color: #fff;
display: flex;
align-items: center;
padding: 8px 20px;
line-height: 1.4;
padding: 8px 0;
transition: all .17s ease-in-out;
button{
font-size: 12px;
color: #fff;
line-height: 1.4;
}
&:hover{
background-color: #2C2C2C;
}
}
}
&::after{

4
src/styles/publishpage.scss
View File

@ -12,7 +12,7 @@ table { margin-bottom: 150px; border-collapse: collapse; border-spacing: 0; }
.contents h3{font-size: 16px; margin: 10px 0;}
.red { color: #ff0000;}
.blues { color: #001aff;}
.guide_table tbody td a{color: #001aff; text-decoration: underline;}
.guide_table tbody td a{color: #001aff; text-decoration: underline; font-size: 12px;}
.design_summary_web,
.design_summary_tab,
.design_summary_mob { display: inline-block; color: rosybrown; font-weight: bold; font-size: 12px; margin-right: 30px; }
@ -33,7 +33,7 @@ table { margin-bottom: 150px; border-collapse: collapse; border-spacing: 0; }
.tab_li > li { float: left; width: 90px; height: 30px; line-height: 30px; text-align: center; background: #424242; color: #fff; margin-right: 5px; margin-bottom: 5px; }
.tab_li > li > a { color: #fff; text-decoration: none; display: block; }
.tab_li > li.on { font-weight: bold; text-decoration: underline; font-size: 16px; }
td strong {font-size:14px;font-weight:600; color: rgb(0, 0, 0); }
td strong {font-size:12px;font-weight:600; color: rgb(0, 0, 0); }
td strong.title { color: #000; }
.auto-style1 { height: 20px; }
.auto-style2 { background: #ddffca; height: 20px; }