Skip to content

Commit

Permalink
Working on removing Material Design 2
Browse files Browse the repository at this point in the history
  • Loading branch information
@bbalganjjm
bbalganjjm committed Jun 21, 2024
1 parent dc618aa commit 50d0df3
Show file tree
Hide file tree
Showing 15 changed files with 327 additions and 154 deletions.
6 changes: 0 additions & 6 deletions src/main/resources/static/css/common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -350,12 +350,6 @@ th, tfoot td {
margin-top: 16px;
}

.view_context__ .button-panel {
text-align: right;
margin-bottom: 16px;
line-height: 40px;
}

.docs_contents__ .view_context__ pre>code,
pre.shell>code {
font-family: var(--njs-font-family-code);
Expand Down
51 changes: 51 additions & 0 deletions src/main/resources/static/css/common.pub.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1,52 @@
@charset "utf-8";

.view_context__ .search-panel>ul {
display: flex;
flex-wrap: wrap;
padding: 5px;
margin: 0 0 10px 0;
border: 1px solid var(--md-sys-color-outline-variant);
}
.view_context__ .search-panel>ul>li {
list-style: none;
padding: 5px 10px;
margin: 5px;
border-radius: var(--njs-border-radius-m);
background-color: var(--md-sys-color-surface-container-low);
}
.view_context__ .search-panel>ul>li>label>span {
display: block;
border-bottom: 1px solid var(--md-sys-color-outline-variant);
padding-bottom: 2px;
margin-bottom: 5px;
font-size: 90%;
}

.view_context__ .button-panel {
text-align: right;
margin-bottom: 10px;
line-height: 40px;
}

.view_context__ ul.form__ {
display: flex;
flex-wrap: wrap;
padding: 5px;
margin: 0;
border: 1px solid var(--md-sys-color-outline-variant);
}
.view_context__ ul.form__>li {
flex: 22%;
list-style: none;
padding: 5px 10px;
margin: 5px;
border-radius: var(--njs-border-radius-m);
background-color: var(--md-sys-color-surface-container-low);
}
.view_context__ ul.form__>li>label>span {
display: block;
border-bottom: 1px solid var(--md-sys-color-outline-variant);
padding-bottom: 2px;
margin-bottom: 5px;
font-size: 90%;
}
8 changes: 4 additions & 4 deletions src/main/resources/static/html/com/app/sample/temp0101.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,23 @@ <h1>메시지</h1>
<h3>메시지(N.alert, N.notify)</h3>

<div class="mb10">
<button id="btnAlert" class="mdc-button mdc-button--raised">Message Dialog</button>&nbsp;&nbsp;
<button id="btnAlert">Message Dialog</button>&nbsp;&nbsp;
<span class="italic">N() 함수의 인수를 window로 지정하면 메시지 오버레이가 화면 전체를 덮어주고 HTML 요소를 지정하면 지정한 요소만 덮는 오버레이요소가 생성됩니다.</span>
</div>

<div class="mb10">
<button id="btnConfirm" class="mdc-button mdc-button--raised">Confirm Dialog</button>&nbsp;&nbsp;
<button id="btnConfirm">Confirm Dialog</button>&nbsp;&nbsp;
<span class="italic">title 옵션 지정 시 타이틀바를 표시하고 confirm 옵션을 true로 지정하면 [확인]/[취소] 버튼을 표시해 줍니다.</span>
</div>

<div>
<button id="btnInput" class="mdc-button mdc-button--raised">Input Message</button>&nbsp;&nbsp;
<button id="btnInput">Input Message</button>&nbsp;&nbsp;
<input id="inputText" type="text" style="width: 100px;"> <span class="italic">input, select, textarea 등의 HTML 입력 요소를 지정하면 지정한 요소 옆에 메시지를 표시해 줍니다.</span>
</div>

<h3>N.notify</h3>
<div>
<button id="btnNotify" class="mdc-button mdc-button--raised">Notify Message</button>&nbsp;&nbsp;
<button id="btnNotify">Notify Message</button>&nbsp;&nbsp;
<span class="italic">사용자의 확인과정이 필요없는 알림 메시지를 표시합니다.</span>
</div>

Expand Down
10 changes: 5 additions & 5 deletions src/main/resources/static/html/com/app/sample/type0101.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<article class="type0101">
<div id="search" class="form__ search_box__">
<div id="search" class="form__">
<div class="search-panel">
<ul>
<li><label><span>Name</span><input id="name" type="text"></label></li>
<li><label><span>Gender</span><select id="gender" class="mdc-njs-select"><option value="">선택</option></select></label></li>
<li><label><span>Eye Color</span><select id="eyeColor" class="mdc-njs-select"><option value="">선택</option></select></label></li>
<li><label><span>Gender</span><select id="gender"><option value="">선택</option></select></label></li>
<li><label><span>Eye Color</span><select id="eyeColor"><option value="">선택</option></select></label></li>
</ul>
</div>
</div>
<div class="button-panel">
<button id="btnSearch" class="btn-search mdc-button mdc-button--raised" data-icon="manage_search">조회</button>
<button id="btnExcel" class="mdc-button" data-icon="table_chart">엑셀</button>
<button id="btnSearch">조회</button>
<button id="btnExcel">엑셀</button>
</div>

<table id="master" class="grid__">
Expand Down
20 changes: 10 additions & 10 deletions src/main/resources/static/html/com/app/sample/type0201.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<article class="type0201">
<div id="search" class="form__ search_box__">
<div id="search" class="form__">
<div class="search-panel">
<ul>
<li><label><span>Name</span><input id="name" type="text"></label></li>
<li><label><span>Gender</span><select id="gender" class="mdc-njs-select"><option value="">선택</option></select></label></li>
<li><label><span>Eye Color</span><select id="eyeColor" class="mdc-njs-select"><option value="">선택</option></select></label></li>
<li><label><span>Gender</span><select id="gender"><option value="">선택</option></select></label></li>
<li><label><span>Eye Color</span><select id="eyeColor"><option value="">선택</option></select></label></li>
</ul>
</div>
</div>
<div class="button-panel">
<button id="btnSearch" class="btn-search mdc-button mdc-button--raised" data-icon="manage_search">조회</button>
<button id="btnExcelImport" class="mdc-button" data-icon="table_rows">엑셀임포트</button>
<button id="btnExcel" class="mdc-button" data-icon="table_chart">엑셀다운로드</button>
<button id="btnAdd" class="mdc-button" data-icon="playlist_add">추가</button>
<button id="btnDelete" class="mdc-button" data-icon="delete_sweep">삭제</button>
<button id="btnSave" class="mdc-button" data-icon="save">저장</button>
<button id="btnSearch">조회</button>
<button id="btnExcelImport">엑셀임포트</button>
<button id="btnExcel">엑셀다운로드</button>
<button id="btnAdd">추가</button>
<button id="btnDelete">삭제</button>
<button id="btnSave">저장</button>
</div>

<table id="master" class="grid__">
Expand Down Expand Up @@ -70,7 +70,7 @@
<td><input id="about" type="text"></td>
<td colspan="2">
<input id="deptNm" type="text" data-validate='[["required"]]' style="width: 75%;" readonly="readonly">
<button id="btnDept" class="mdc-icon-button mdc-icon-button--mini">search</button>
<button id="btnDept" data-opts='{ "size": "middle" }'>Q</button>
</td>
<td colspan="2"><input id="greeting" type="text"></td>
</tr>
Expand Down
22 changes: 11 additions & 11 deletions src/main/resources/static/html/com/app/sample/type0301.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<article class="type0301">
<div id="search" class="form__ search_box__">
<div id="search" class="form__">
<div class="search-panel">
<ul>
<li><label><span>Name</span><input id="name" type="text"></label></li>
<li><label><span>Gender</span><select id="gender" class="mdc-njs-select"><option value="">선택</option></select></label></li>
<li><label><span>Eye Color</span><select id="eyeColor" class="mdc-njs-select"><option value="">선택</option></select></label></li>
<li><label><span>Gender</span><select id="gender"><option value="">선택</option></select></label></li>
<li><label><span>Eye Color</span><select id="eyeColor"><option value="">선택</option></select></label></li>
</ul>
</div>
</div>
<div class="button-panel">
<button id="btnSearch" class="btn-search mdc-button mdc-button--raised" data-icon="manage_search">조회</button>
<button id="btnExcel" class="mdc-button" data-icon="table_chart">엑셀</button>
<button id="btnSearch">조회</button>
<button id="btnExcel">엑셀</button>
</div>

<div style="position: relative; min-height: 520px;">
<div style="position: relative; min-height: 519px;">
<table id="master" class="grid__">
<colgroup>
<col style="width: 50px;">
Expand Down Expand Up @@ -64,15 +64,15 @@
<div class="pagination-box">
<div id="masterPagination">
<ul>
<li><a href="#" title="처음"><button class="mdc-icon-button mdc-icon-button--mini">skip_previous</button></a></li>
<li><a href="#" title="이전"><button class="mdc-icon-button mdc-icon-button--mini">navigate_before</button></a></li>
<li><a href="#" title="처음"></a></li>
<li><a href="#" title="이전"></a></li>
</ul>
<ul>
<li><a href="#"><span>1</span></a></li>
</ul>
<ul>
<li><a href="#" title="다음"><button class="mdc-icon-button mdc-icon-button--mini">navigate_next</button></a></li>
<li><a href="#" title="마지막"><button class="mdc-icon-button mdc-icon-button--mini">skip_next</button></a></li>
<li><a href="#" title="다음"></a></li>
<li><a href="#" title="마지막"></a></li>
</ul>
</div>
</div>
Expand All @@ -98,7 +98,7 @@
},
"p.pagination.masterPagination" : {
blockOnChangeWhenBind : true,
countPerPage : 9,
countPerPage : 15,
countPerPageSet : $(window).width() <= 751 ? 4 : 10,
onChange : function(pageNo, selEle, selData, currPageNavInfo) {
cont["c.getSampleList"]().submit(function(data) {
Expand Down
108 changes: 75 additions & 33 deletions src/main/resources/static/html/com/app/sample/type0401.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<article class="type0401">
<div id="search" class="form__ search_box__">
<div id="search" class="form__">
<div class="search-panel">
<ul>
<li><label><span>Name</span><input id="name" type="text"></label></li>
<li><label><span>Age</span><select id="age" class="mdc-njs-select"><option value="">선택</option></select></label></li>
<li><label><span>Gender</span><select id="gender" class="mdc-njs-select"><option value="">선택</option></select></label></li>
<li><label><span>Eye Color</span><select id="eyeColor" class="mdc-njs-select"><option value="">선택</option></select></label></li>
<li><label><span>Age</span><select id="age"><option value="">선택</option></select></label></li>
<li><label><span>Gender</span><select id="gender"><option value="">선택</option></select></label></li>
<li><label><span>Eye Color</span><select id="eyeColor"><option value="">선택</option></select></label></li>
</ul>
</div>
</div>

<div class="flex-horizental">
<div style="max-width: 33%;">
<div class="button-panel">
<button id="btnSearch" class="btn-search mdc-button mdc-button--raised" data-icon="manage_search">조회</button>
<button id="btnSave" class="mdc-button" data-icon="save">저장</button>
<button id="btnSearch">조회</button>
<button id="btnSave">저장</button>
</div>
<table id="master" class="grid__">
<colgroup>
Expand All @@ -41,66 +41,108 @@

<div>
<div class="button-panel">
<button id="btnAdd" class="mdc-button" data-icon="playlist_add">추가</button>
<button id="btnDelete" class="mdc-button" data-icon="delete_sweep">삭제</button>
<button id="btnRevert" class="mdc-button" data-icon="restart_alt">초기화</button>
<button id="btnAdd">추가</button>
<button id="btnDelete">삭제</button>
<button id="btnRevert">초기화</button>
</div>

<ul id="detail" class="form__">
<li>
<p class="mdc-njs-fixed-label">Default Picture</p>
<img id="picture" style="height: 56px;">
<label>
<span>Default Picture</span>
<img id="picture" style="height: 56px;">
</label>
</li>


<li>
<input id="name" type="text" data-validate='[["required"]]' data-label="Name">
<label>
<span>Name</span>
<input id="name" type="text" data-validate='[["required"]]'>
</label>
</li>
<li>
<input id="deptNm" type="text" data-validate='[["required"]]' readonly="readonly" data-label="Department Name" data-trailingicon="search" data-btnid="btnDeptCd">
<label>
<span>Department</span>
<input id="deptNm" type="text" data-validate='[["required"]]' readonly="readonly" style="width: 70%;">
</label>
<button id="btnDeptCd" data-opts='{ "size": "middle" }'>Q</button>
</li>
<li>
<input id="email" type="text" data-validate='[["required"], ["email"]]' data-label="Email">
<label>
<span>Email</span>
<input id="email" type="text" data-validate='[["required"], ["email"]]'>
</label>
</li>
<li>
<input id="balance" type="text" data-format='[["numeric", "$#,###.##0"]]' data-validate='[["required"], ["number"]]' data-label="Balance">
<label>
<span>Balance</span>
<input id="balance" type="text" data-format='[["numeric", "$#,###.##0"]]' data-validate='[["required"], ["number"]]'>
</label>
</li>
<li>
<input id="phone" type="text" data-validate='[["required"]]' data-label="Phone">
<label>
<span>Phone</span>
<input id="phone" type="text" data-validate='[["required"]]'>
</label>
</li>
<li>
<select id="eyeColor" data-validate='[["required"]]' class="mdc-njs-select" data-label="Eye Color"><option>선택</option></select>
<label>
<span>Eye Color</span>
<select id="eyeColor" data-validate='[["required"]]'><option>선택</option></select>
</label>
</li>
<li>
<input id="age" type="text" data-validate='[["required"], ["integer"]]' data-label="Age">
<label>
<span>Age</span>
<input id="age" type="text" data-validate='[["required"], ["integer"]]'>
</label>
</li>
<li>
<p class="mdc-njs-fixed-label">Gender</p>
<input id="gender" type="radio">
<label>
<span>Gender</span>
<input id="gender" type="radio">
</label>
</li>
<li>
<p class="mdc-njs-fixed-label">Favorite Fruit</p>
<input id="favoriteFruit" type="checkbox" data-validate='[["required"]]'>
<label>
<span>Favorite Fruit</span>
<input id="favoriteFruit" type="checkbox" data-validate='[["required"]]'>
</label>
</li>
<li>
<input id="registered" type="text" data-format='[["date", 8, "date"]]' data-validate='[["required"]]' data-label="Registered">
<label>
<span>Registered</span>
<input id="registered" type="text" data-format='[["date", 8, "date"]]' data-validate='[["required"]]'>
</label>
</li>
<li>
<p class="mdc-njs-fixed-label">Company</p>
<select id="company" multiple="multiple" data-validate='[["required"]]' style="height: 100px;"></select>
<label>
<span>Company</span>
<select id="company" multiple="multiple" data-validate='[["required"]]' style="height: 100px;"></select>
</label>
</li>
<li>
<textarea id="about" rows="4" cols="34" data-validate='[["required"]]' data-label="About"></textarea>
<label>
<span>About</span>
<textarea id="about" rows="4" cols="34" data-validate='[["required"]]'></textarea>
</label>
</li>
<li>
<textarea id="greeting" rows="4" cols="34" data-validate='[["required"]]' data-label="Greeting"></textarea>
<label>
<span>Greeting</span>
<textarea id="greeting" rows="4" cols="34" data-validate='[["required"]]'></textarea>
</label>
</li>
<li>
<p class="mdc-njs-fixed-label">Active</p>
<input id="isActive" type="checkbox">
<label>
<span>Default Picture</span>
<input id="isActive" type="checkbox">
</label>
</li>
<li>
<p class="mdc-njs-fixed-label">Attachments</p>
<button id="btnFile" class="mdc-button mdc-button--outlined" data-icon="file_present">File</button>
<label>
<span>Attachments</span>
<button id="btnFile">File</button>
</label>
</li>
</ul>
</div>
Expand Down
Loading

0 comments on commit 50d0df3

Please sign in to comment.