chpark/wace_plm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

디자인 수정 커밋밋

Browse Source
This commit is contained in:
chpark
2025-10-17 16:26:45 +09:00
parent 7a57faa87b
commit 2aaf24348e
4 changed files with 273 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
WebContent/WEB-INF/view/main/header.jsp
View File

@@ -26,19 +26,19 @@ userMenuList = (ArrayList)request.getAttribute("userMenuList");
}
*/
.menu_off{
color:#fff !important; padding: 2px 3px; font-size:9px; background-color:#0011ff; border-radius:2px;
color:#fff !important; padding: 2px 3px; font-size:9px; background-color:#89b4fa; border-radius:2px;
display: inline-block; min-width: 40px; text-align: center; margin: 0px;
transition: all 0.3s ease; text-decoration: none !important; border: none;
cursor: pointer;
}
.menu_on{
color:#333 !important; padding: 2px 3px; font-size:9px; background-color:#d0d0d0; border-radius:2px;
color:#fff !important; padding: 2px 3px; font-size:9px; background-color:#5e9cff; border-radius:2px;
display: inline-block; min-width: 40px; text-align: center; margin: 0px;
transition: all 0.3s ease; text-decoration: none !important; border: none;
cursor: pointer;
}
.menu_off:hover {
background-color: #003399 !important;
background-color: #b4cefa !important;
text-decoration: none !important;
color: #fff !important;
}
@@ -94,14 +94,14 @@ $(function(){
$(".menu").click(function(){
// 모든 메뉴를 off 스타일로 변경
$(".menu").css({
'background-color': '#0011ff',
'background-color': '#89b4fa',
'color': '#fff'
}).removeClass('menu_on').addClass('menu_off');
// 클릭된 메뉴를 on 스타일로 변경
$(this).css({
'background-color': '#d0d0d0',
'color': '#333'
'background-color': '#5e9cff',
'color': '#fff'
}).removeClass('menu_off').addClass('menu_on');
var menuObjid = $(this).attr("menuObjId");
@@ -126,12 +126,12 @@ $(function(){
$(".menu").hover(
function() {
if (!$(this).hasClass('menu_on')) {
$(this).css('background-color', '#003399');
$(this).css('background-color', '#b4cefa');
}
},
function() {
if (!$(this).hasClass('menu_on')) {
$(this).css('background-color', '#0011ff');
$(this).css('background-color', '#89b4fa');
}
}
);
@@ -208,14 +208,14 @@ function fn_goFirstMenu(){
// 모든 메뉴를 off 스타일로 변경
$(".menu").css({
'background-color': '#0011ff',
'background-color': '#89b4fa',
'color': '#fff'
}).removeClass('menu_on').addClass('menu_off');
// 첫 번째 메뉴를 on 스타일로 변경
$(".menu").eq(0).css({
'background-color': '#d0d0d0',
'color': '#333'
'background-color': '#5e9cff',
'color': '#fff'
}).removeClass('menu_off').addClass('menu_on');
// 안전하게 메뉴 처리
@@ -392,7 +392,7 @@ function fn_setApprovalCnt(){
if("2".equals(lev)){
%>
<a href="#" class="menu menu_off" menuObjId="<%=menuObjid%>" style="background-color: #0015ff; color: #fff; padding: 3px 6px; font-size: 10px; border-radius: 3px; text-decoration: none; display: inline-block; min-width: 50px; text-align: center; margin-right: 4px;"><%=menuKorName%></a>
<a href="#" class="menu menu_off" menuObjId="<%=menuObjid%>" style="background-color: #89b4fa; color: #fff; padding: 3px 6px; font-size: 10px; border-radius: 3px; text-decoration: none; display: inline-block; min-width: 50px; text-align: center; margin-right: 4px;"><%=menuKorName%></a>
<%
}
}

81
WebContent/WEB-INF/view/main/menu.jsp
View File

@@ -69,12 +69,71 @@
body {
transition: all 0.3s ease;
}
/* 고정 버튼 스타일 */
#menu-lock-btn {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10000;
}
#menu-lock-btn:hover {
background-color: #e8e8e8;
border-color: #1159bc;
}
#menu-lock-btn.locked {
background-color: #1159bc;
border-color: #1159bc;
}
#menu-lock-btn svg {
width: 18px;
height: 18px;
fill: #666;
transition: fill 0.3s ease;
}
#menu-lock-btn.locked svg {
fill: #fff;
}
</style>
<script type="text/javascript">
// 메뉴 고정 상태 플래그
var isMenuLocked = false;
$(function(){
$(document).ready(function () {
// 메뉴 고정 버튼 클릭 이벤트
$(document).on('click', '#menu-lock-btn', function() {
isMenuLocked = !isMenuLocked;
$(this).toggleClass('locked');
// 아이콘 전환
if(isMenuLocked) {
$(this).find('.lock-icon-unlocked').hide();
$(this).find('.lock-icon-locked').show();
console.log("메뉴 고정됨");
} else {
$(this).find('.lock-icon-unlocked').show();
$(this).find('.lock-icon-locked').hide();
console.log("메뉴 고정 해제됨");
}
});
//메뉴 슬라이드토글
$("[objType=menuObj]").on('click', function(){
var url = $(this).attr("url");
@@ -122,6 +181,11 @@ $(function(){
// 메뉴 영역에서 마우스가 벗어났을 때 자동 숨김 (애니메이션 적용)
var hideMenuTimer;
$(document).mouseleave(function(e) {
// 메뉴가 고정되어 있으면 자동 숨김 안 함
if(isMenuLocked) {
return;
}
// 마우스가 메뉴 프레임을 벗어났을 때
clearTimeout(hideMenuTimer);
hideMenuTimer = setTimeout(function() {
@@ -135,7 +199,7 @@ $(function(){
} catch(e) {
console.log("Toggle frame not accessible:", e);
}
}, 500); // 1.5초 후 자동 숨김
}, 500); // 0.5초 후 자동 숨김
});
// 메뉴 영역에 마우스가 다시 들어왔을 때 타이머 취소
@@ -429,7 +493,9 @@ function add_menu(objid, subMenuObjid, onlyViewMenu){
}
// 메뉴 그리기 완료 후 자동 숨김 처리 (애니메이션 적용)
// 메뉴가 고정되어 있지 않을 때만 자동 숨김
setTimeout(function() {
if(!isMenuLocked) {
try {
if(parent && parent.frames && parent.frames["toggle_page"]) {
var toggleFrame = parent.frames["toggle_page"];
@@ -440,6 +506,7 @@ function add_menu(objid, subMenuObjid, onlyViewMenu){
} catch(e) {
console.log("Toggle frame not accessible:", e);
}
}
}, 300);
}
@@ -467,8 +534,18 @@ function sel_menu(objid, subMenuObjid, onlyViewMenu){
</script>
</head>
<body id="menuback_w" style="height:100%;overflow-y: hidden;">
<body id="menuback_w" style="height:100%;overflow-y: hidden; position: relative;">
<form name="menuForm" action="" method="post">
<!-- 메뉴 고정 버튼 -->
<div id="menu-lock-btn" title="메뉴 고정/해제">
<svg viewBox="0 0 24 24" class="lock-icon-unlocked">
<path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H15V6A3,3 0 0,0 12,3A3,3 0 0,0 9,6H7A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18Z"/>
</svg>
<svg viewBox="0 0 24 24" class="lock-icon-locked" style="display:none;">
<path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"/>
</svg>
</div>
<!--
<div style="background:#f5f5f5;color:#000;font-size:11px;text-align:center;padding:5px;line-height:15px">Integrated Information<br/> Management System </div>
-->

165
WebContent/css/basic.css
View File

@@ -767,24 +767,133 @@ input[type="button"] {cursor:pointer !important;}
/* 寃€?됱〈 怨듯넻 ?뚯뒪 */
#plmSearchZon {width:99.2% !important; padding: 5px 5px 5px 5px; font-size: 13px; min-height: 45px;/* background-image: -ms-linear-gradient(top, #fff, #e6e9ed); */
/* background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e6e9ed)); */ border-bottom: 1px solid #d4d4d4;}
#plmSearchZon label {font-size:13px !important;}
#plmSearchZon table {table-layout: fixed;max-width:100%;} /*width:100%;*/
#plmSearchZon .table100 {table-layout: fixed;max-width:100%;width:100%;} /*width:100%;*/
#plmSearchZon table td span {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#plmSearchZon table td:nth-child(odd) {padding-right:3px;}
#plmSearchZon table td:nth-child(even) {padding-right: 15px;}
#plmSearchZon .short_search td:nth-child(even) {padding-right: 15px;}
#plmSearchZon label {background: url(../images/orangeLabel.png) left center no-repeat; padding-left: 10px; font-weight: 500;white-space: nowrap;}
/*
#plmSearchZon input[type="text"] {width:98%; min-width:50px;max-width:170px;border: 1px solid #ccc; background: #fff; height:20px; line-height:20px; border-radius: 2px;}
#plmSearchZon select {border: 1px solid #ccc; background: #fff; width:98%; min-width:60px;max-width:170px;height:20px; line-height:20px; border-radius: 4px;}
*/
#plmSearchZon input[type="text"] {width:150px; border: 1px solid #ccc; background: #fff; height:20px; line-height:20px; border-radius: 2px;}
#plmSearchZon select {border: 1px solid #ccc; background: #fff; width:150px; height:20px; line-height:20px; border-radius: 4px;}
#plmSearchZon {
width: 99.2% !important;
padding: 12px 16px;
font-size: 13px;
min-height: 40px;
background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
border-bottom: 2px solid #e1e4e8;
border-radius: 0;
position: relative;
overflow: visible !important;
z-index: 10;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
#plmSearchZon p {border: 1px solid #ccc; background: #fff; width:150px; height:20px; line-height:20px; border-radius: 2px;}
#plmSearchZon label {
font-size: 12px !important;
font-weight: 500;
color: #5f6368;
white-space: nowrap;
padding-left: 0;
background: none;
}
#plmSearchZon table {
table-layout: fixed;
max-width: 100%;
border-spacing: 0 4px;
overflow: visible !important;
}
#plmSearchZon td {
position: relative;
overflow: visible !important;
}
#plmSearchZon tr {
overflow: visible !important;
}
#plmSearchZon .table100 {
table-layout: fixed;
max-width: 100%;
width: 100%;
}
#plmSearchZon table td span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#plmSearchZon table td:nth-child(odd) {
padding-right: 8px;
}
#plmSearchZon table td:nth-child(even) {
padding-right: 15px;
}
#plmSearchZon .short_search td:nth-child(even) {
padding-right: 15px;
}
#plmSearchZon input[type="text"] {
width: 150px;
height: 22px !important;
padding: 0 8px !important;
border: 1px solid #dadce0;
background: #ffffff;
border-radius: 4px;
font-size: 12px !important;
color: #202124;
transition: all 0.15s ease;
box-sizing: border-box;
line-height: 20px !important;
vertical-align: middle;
}
#plmSearchZon input[type="text"]:focus {
outline: none;
border-color: #1a73e8;
box-shadow: 0 0 0 1px rgba(26, 115, 232, 0.1);
}
#plmSearchZon input[type="text"].date_icon {
padding-right: 28px !important;
background-position: right 6px center;
background-size: 14px;
}
#plmSearchZon select {
width: 150px;
height: 22px !important;
padding: 0 22px 0 8px !important;
border: 1px solid #dadce0;
background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%2364748b' d='M4 6L0 2h8z'/%3E%3C/svg%3E") no-repeat right 6px center;
background-size: 7px;
border-radius: 4px;
font-size: 12px !important;
color: #202124;
transition: all 0.15s ease;
box-sizing: border-box;
line-height: 20px !important;
vertical-align: middle;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
#plmSearchZon select:focus {
outline: none;
border-color: #1a73e8;
box-shadow: 0 0 0 1px rgba(26, 115, 232, 0.1);
}
#plmSearchZon p {
width: 150px;
height: 22px !important;
padding: 0 8px !important;
border: 1px solid #dadce0;
background: #fff;
line-height: 20px !important;
border-radius: 4px;
box-sizing: border-box;
vertical-align: middle;
}
.totalCntArea {float:left; width:100px; height:8px;line-height:25px; margin-bottom:-5px;font-size:13px}
@@ -2421,10 +2530,28 @@ button{cursor:pointer;}
/* tabulator 洹몃━???꾩슜 */
.tabulator-col{
background: #6f7477 !important;
color:#fff !important;
background: linear-gradient(to bottom, #e8eaed 0%, #dfe1e5 100%) !important;
color: #202124 !important;
font-size: 12px !important;
font-weight: 600 !important;
font-family: 'Noto Sans KR', sans-serif !important;
border-right: 1px solid #c0c3c7 !important;
border-bottom: 2px solid #b0b3b8 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* tabulator 행 hover 효과 */
.tabulator-row:hover {
background-color: #e8f0fe !important;
cursor: pointer;
}
.tabulator-row.tabulator-selected {
background-color: #d2e3fc !important;
}
.tabulator-row.tabulator-selected:hover {
background-color: #c5d9f7 !important;
}

57
WebContent/css/tabulator/tabulator.min.css vendored
View File

@@ -31,9 +31,9 @@
position: relative;
box-sizing: border-box;
width: 100%;
border-bottom: 2px solid #1a73e8;
background-color: #f8f9fa;
color: #202124;
border-bottom: 2px solid #e0e0e0 !important;
background-color: #f5f5f5 !important;
color: #333333 !important;
font-weight: 600;
font-size: 12px;
white-space: nowrap;
@@ -64,8 +64,8 @@
box-sizing: border-box;
flex-direction: column;
justify-content: flex-start;
border-right: 1px solid #dadce0;
background: #f8f9fa;
border-right: 1px solid rgba(255, 255, 255, 0.15);
background: transparent;
text-align: center;
vertical-align: middle;
overflow: hidden
@@ -81,7 +81,7 @@
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
box-sizing: border-box;
position: relative;
padding: 6px 8px
padding: 5px 8px
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button
@@ -146,7 +146,7 @@
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 6px solid #bbb
border-bottom: 6px solid #666666
}
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols
@@ -190,59 +190,59 @@
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover
{
cursor: pointer;
background-color: #e8f0fe
background-color: rgba(255, 255, 255, 0.1)
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter
{
color: #bbb
color: #666666
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover
{
cursor: pointer;
border-bottom: 6px solid #555
border-bottom: 6px solid #333333
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow
{
border-top: none;
border-bottom: 6px solid #bbb
border-bottom: 6px solid #666666
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter
{
color: #666
color: #333333
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover
{
cursor: pointer;
border-bottom: 6px solid #555
border-bottom: 6px solid #000000
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow
{
border-top: none;
border-bottom: 6px solid #666
border-bottom: 6px solid #333333
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter
{
color: #666
color: #333333
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover
{
cursor: pointer;
border-top: 6px solid #555
border-top: 6px solid #000000
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow
{
border-bottom: none;
border-top: 6px solid #666;
color: #666
border-top: 6px solid #333333;
color: #333333
}
.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical .tabulator-col-content .tabulator-col-title
@@ -486,7 +486,7 @@
.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
cursor: pointer;
background: #e8f0fe;
background: #f0f7ff;
border-color: #1a73e8;
color: #1a73e8
}
@@ -548,25 +548,25 @@
.tabulator-row {
position: relative;
box-sizing: border-box;
min-height: 28px;
min-height: 24px;
background-color: #fff
}
.tabulator-row.tabulator-row-even {
background-color: #fafbfc
background-color: #fafafa
}
.tabulator-row.tabulator-selectable:hover {
background-color: #e8f0fe;
background-color: #f0f7ff;
cursor: pointer
}
.tabulator-row.tabulator-selected {
background-color: #d2e3fc
background-color: #e3f2fd
}
.tabulator-row.tabulator-selected:hover {
background-color: #aecbfa;
background-color: #d1e9ff;
cursor: pointer
}
@@ -628,15 +628,16 @@
display: inline-block;
position: relative;
box-sizing: border-box;
padding: 4px 8px;
padding: 3px 8px;
border-right: 1px solid #dadce0;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 28px;
height: 24px;
font-size: 12px;
color: #202124;
line-height: 18px;
}
.tabulator-row .tabulator-cell.tabulator-frozen {
@@ -829,7 +830,7 @@
border-bottom: 1px solid #dadce0;
border-right: 1px solid #dadce0;
border-top: 1px solid #dadce0;
padding: 6px 8px 6px 12px;
padding: 4px 8px 4px 12px;
background: #f8f9fa;
font-weight: 600;
font-size: 12px;
@@ -838,7 +839,7 @@
.tabulator-row.tabulator-group:hover {
cursor: pointer;
background-color: #e8f0fe
background-color: #f0f7ff
}
.tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow