Skip to content

Commit

Permalink
Merge pull request #5 from minami373/master
Browse files Browse the repository at this point in the history 
[feature] 指定したタグを上位に表示する機能
  • Loading branch information
@takahyon
takahyon authored Apr 27, 2020
2 parents 679e8ce + 4cc58ca commit b973e1c
Show file tree
Hide file tree
Showing 3 changed files with 249 additions and 102 deletions.
147 changes: 88 additions & 59 deletions css/popup.css
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,118 @@
#ndHiddenBlocker {
margin: 0px;
width: 200px;
height: 200px;
margin : 0px;
width : 240px;
background : #DDE0F1; /* デフォルト背景色 */
font-family : "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

#ndHiddenBlocker main {
padding-left : 15px;
padding-bottom : 15px;
}

/* === ヘッダー ============================== */
#ndHiddenBlocker .topBox {
width : 240px;
height : 40px;
background : #726C9F;
}
#ndHiddenBlocker .topText {
text-align : center;
color : white;
font-size : large;
padding : 8px;
}

/* === 見出しテキスト ============================== */
#ndHiddenBlocker .text {
font-size : 12px;
margin : 12px 0 6px;
font-weight : 700;
color : #565656;
}

/* === ボタンを表示するエリア ============================== */
#ndHiddenBlocker .switchArea {
line-height : 48px; /* 1行の高さ */
letter-spacing : 0; /* 文字間 */
text-align : center; /* 文字位置は中央 */
font-size : 21px; /* 文字サイズ */

position : relative; /* 親要素が基点 */
margin : auto; /* 中央寄せ */
width : 114px; /* ボタンの横幅 */
background : #fff; /* デフォルト背景色 */
display : inline-block; /* 横に並べる */
letter-spacing : 0; /* 文字間 */
text-align : center; /* 文字位置は中央 */
font-size : 12px; /* 文字サイズ */
position : relative; /* 親要素が基点 */
margin-right : 8px;
margin-bottom : 8px;
}

/* === チェックボックス ==================================== */
#ndHiddenBlocker .switchArea input[type="checkbox"] {
display : none; /* チェックボックス非表示 */
display : none; /* チェックボックス非表示 */
}

/* === チェックボックスのラベル（標準） ==================== */
#ndHiddenBlocker .switchArea label {
display : block; /* ボックス要素に変更 */
box-sizing : border-box; /* 枠線を含んだサイズ */
height : 48px; /* ボタンの高さ */
border : 2px solid rgba(0, 0, 0, 0.36); /* 未選択タブのの枠線 */
border-radius : 24px; /* 角丸 */
cursor : pointer;
display : block; /* ボックス要素に変更 */
box-sizing : border-box; /* 枠線を含んだサイズ */
height : 30px; /* ボタンの高さ */
border-radius : 15px; /* 角丸 */
border-width : 0;
cursor : pointer;
padding : 7px 15px;
background-color : transparent;
letter-spacing : 0.04rem;
user-select : none;
}

/* === チェックボックスのラベル（ONのとき） ================ */
#ndHiddenBlocker .switchArea input[type="checkbox"]:checked +label {
border-color : #6666ff; /* 選択タブの枠線 */
background-color : #726C9F;
color : white;
box-shadow : 0px 2px 5px 2px rgba(0, 0, 0, 0.36) inset;
}

/* === 表示する文字（標準） ================================ */
#ndHiddenBlocker .switchArea label span:after {
content : "OFF"; /* 表示する文字 */
padding : 0 0 0 28px; /* 表示する位置 */
color : rgba(0, 0, 0, 0.36); /* 文字色 */
/* === タグ登録エリア ============================== */
#ndHiddenBlocker .registerArea {
}

/* === 表示する文字（ONのとき） ============================ */
#ndHiddenBlocker .switchArea input[type="checkbox"]:checked + label span:after {
content : "ON"; /* 表示する文字 */
padding : 0 28px 0 0; /* 表示する位置 */
color : #6666ff; /* 文字色 */
#ndHiddenBlocker .registerArea input[type="text"] {
border-width : 1px solid rgba(0, 0, 0, 0.36);
padding : 4px 8px;
font-size : 12px;
border : 2px solid #ddd; /*枠線*/
border-radius : 3px; /*ボックス角の丸み*/
box-sizing : border-box; /*横幅の解釈をpadding, borderまでとする*/
width : 156px;
}

/* === 丸部分のSTYLE（標準） =============================== */
#ndHiddenBlocker .switchArea #swImg {
position : absolute; /* 親要素からの相対位置*/
width : 40px; /* 丸の横幅 */
height : 40px; /* 丸の高さ */
background : rgba(0, 0, 0, 0.36); /* カーソルタブの背景 */
top : 4px; /* 親要素からの位置 */
left : 4px; /* 親要素からの位置 */
border-radius : 20px; /* 角丸 */
transition : .2s; /* 滑らか変化 */
#ndHiddenBlocker .registerArea button {
border-width : 1px solid rgba(0, 0, 0, 0.36);
padding : 2px 10px;
font-size : 12px;
border : 2px solid #ddd; /*枠線*/
border-radius : 3px; /*ボックス角の丸み*/
background-color : #726C9F;
color : white;
cursor : pointer;
}

/* === 丸部分のSTYLE（ONのとき） =========================== */
#ndHiddenBlocker .switchArea input[type="checkbox"]:checked ~ #swImg {
transform : translateX(66px); /* 丸も右へ移動 */
background : #6666ff; /* カーソルタブの背景 */
#ndHiddenBlocker .registerArea ul {
list-style-type : none;
margin : 5px 0;
padding : 0;
}

#ndHiddenBlocker .text {
text-align: center;
font-size: medium;
font-family: sans-serif;
#ndHiddenBlocker .registerArea ul li {
display : inline-block;
border : 2px solid #726C9F;
border-radius : 5px;
background-color : white;
padding : 0 4px;
margin : 4px 2px 2px 0px;
font-size : 10px;
cursor : pointer;
user-select : none;
}

#ndHiddenBlocker .topBox {
width: 200px;
height: 40px;
background : #6666ff;
#ndHiddenBlocker .registerArea small {
font-size : 12px;
color : #666666;
margin-top : 5px;
}
#ndHiddenBlocker .topText {
text-align: center;
color: azure;
font-size: large;
padding: 10px;
font-family: 'Roboto', sans-serif;
}
36 changes: 23 additions & 13 deletions html/popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,35 @@
</head>

<body id="ndHiddenBlocker">

<div class="topBox">
<div class="topText">
ND hidden Blocker
ND Hidden Blocker
</div>
</div>

<div class="text">鍵ルームを非表示にする</div>
<div class="switchArea">
<input type="checkbox" id="cbLockedRoom">
<label for="cbLockedRoom"><span></span></label>
<div id="swImg"></div>
</div>
<main>

<div class="text">満室ルームを非表示にする</div>
<div class="switchArea">
<input type="checkbox" id="cbNoVacancyRoom">
<label for="cbNoVacancyRoom"><span></span></label>
<div id="swImg"></div>
</div>
<div class="text">非表示にするルームを選択</div>
<div class="switchArea">
<input type="checkbox" id="cbLockedRoom">
<label for="cbLockedRoom" class="checkboxLabel">鍵ルーム</label>
</div>
<div class="switchArea">
<input type="checkbox" id="cbNoVacancyRoom">
<label for="cbNoVacancyRoom" class="checkboxLabel">満室ルーム</label>
</div>

<div class="text">上位に表示するタグを登録</div>
<div class="registerArea">
<input type="text" placeholder="タグを入力" id="textRegister">
<button id="btnRegister">追加</button>
<ul id="listTag"></ul>
<small>※登録タグをクリックすると登録解除</small>
</div>

<pre></pre>
</main>

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/popup.js"></script>
Expand Down
Loading

0 comments on commit b973e1c

Please sign in to comment.