mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-11-23 00:23:28 +01:00
[feature] adding list style
This commit is contained in:
Kombie
GitHub
parent
e144a75b48
commit
b1f15a0717
17
css/base.css
17
css/base.css
@ -28,9 +28,6 @@
|
||||
--animation-speed-fast: 0.1s;
|
||||
--animation-speed-medium: 0.2s;
|
||||
--animation-speed-slow: 0.3s;
|
||||
--link-height: 7em;
|
||||
--url-height: 20%;
|
||||
--edit-height: 30%;
|
||||
--font-regular: "Open Sans Regular", sans-serif;
|
||||
--font-bold: "Open Sans Bold", sans-serif;
|
||||
--font-light: "Open Sans Light", sans-serif;
|
||||
@ -43,8 +40,20 @@
|
||||
--breakpoint-xl: 1300px;
|
||||
}
|
||||
|
||||
:root.is-link-block {
|
||||
--link-height: 7em;
|
||||
--url-height: 20%;
|
||||
--edit-height: 30%;
|
||||
}
|
||||
|
||||
:root.is-link-list {
|
||||
--link-height: 4em;
|
||||
--url-height: 30%;
|
||||
--edit-height: 50%;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
:root {
|
||||
:root.is-link-block {
|
||||
--link-height: 9em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,15 +25,24 @@
|
||||
width: 100%;
|
||||
height: calc(100% - 2px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
transition: all var(--animation-speed-medium) ease-in-out;
|
||||
}
|
||||
|
||||
.is-link-block .link-panel-front {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-link-list .link-panel-front {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.link-panel-front:focus {
|
||||
background-color: var(--gray-03);
|
||||
outline: 0;
|
||||
@ -121,11 +130,18 @@
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all var(--animation-speed-medium) ease-in-out;
|
||||
}
|
||||
|
||||
.is-link-block .link-url {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-link-list .link-url {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.link-item:hover .link-url,
|
||||
.link-item:focus .link-url {
|
||||
height: var(--url-height);
|
||||
@ -134,7 +150,6 @@
|
||||
.link-url-text {
|
||||
margin: 0;
|
||||
font-size: 0.7em;
|
||||
text-align: center;
|
||||
color: var(--black);
|
||||
font-family: var(--font-regular);
|
||||
white-space: nowrap;
|
||||
@ -143,16 +158,24 @@
|
||||
}
|
||||
|
||||
.link-letter {
|
||||
margin: 0;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
font-family: var(--font-fjalla);
|
||||
color: rgb(var(--accent));
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.is-link-block .link-letter {
|
||||
margin: 0;
|
||||
font-size: 2em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.is-link-list .link-letter {
|
||||
margin: 0 0.5em 0 0;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.link-item:hover .link-letter,
|
||||
.link-item:focus .link-letter {
|
||||
color: var(--white);
|
||||
@ -191,9 +214,18 @@
|
||||
height: 0;
|
||||
}
|
||||
|
||||
height: var(--edit-height);
|
||||
}
|
||||
|
||||
.is-edit .link-control-item {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.is-link-block .link-panel-front {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-link-list .link-panel-front {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
14
index.html
14
index.html
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" class="is-link-block">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -42,16 +42,22 @@
|
||||
<span class="icon-close"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="head-item mb-3 mb-lg-0">
|
||||
<div class="head-item button-group mb-3 mb-lg-0">
|
||||
<button class="button mb-0 control-add" tabindex="1">
|
||||
<span class="button-text">Add</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="head-item mb-3 mb-lg-0">
|
||||
<button class="button mb-0 control-edit" tabindex="1">
|
||||
<span class="button-text">Edit</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="head-item button-group mb-3 mb-lg-0">
|
||||
<button class="button mb-0 control-link-list" tabindex="1">
|
||||
<span class="button-text">List</span>
|
||||
</button>
|
||||
<button class="button mb-0 control-link-blocks active" tabindex="1">
|
||||
<span class="button-text">Block</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="head-item mb-3 mb-lg-0">
|
||||
<form class="theme">
|
||||
<label class="button mb-0 theme-label" for="accent-picker">
|
||||
|
||||
@ -123,7 +123,9 @@ var bookmarks = (function() {
|
||||
};
|
||||
|
||||
var restore = function(array) {
|
||||
all = array;
|
||||
if (array) {
|
||||
all = array;
|
||||
};
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
|
||||
@ -1,18 +1,33 @@
|
||||
var control = (function() {
|
||||
|
||||
var state = {
|
||||
edit: false
|
||||
edit: false,
|
||||
style: "block"
|
||||
};
|
||||
|
||||
var get = function() {
|
||||
return state;
|
||||
};
|
||||
|
||||
var bind = function() {
|
||||
var controlAdd = helper.e(".control-add");
|
||||
var controlEdit = helper.e(".control-edit");
|
||||
var controlLinkBlock = helper.e(".control-link-blocks");
|
||||
var controlLinkList = helper.e(".control-link-list");
|
||||
controlAdd.addEventListener("click", function() {
|
||||
_add();
|
||||
}, false);
|
||||
controlEdit.addEventListener("click", function() {
|
||||
_edit();
|
||||
}, false);
|
||||
controlLinkBlock.addEventListener("click", function() {
|
||||
_toggleListStyle("block");
|
||||
data.save();
|
||||
}, false);
|
||||
controlLinkList.addEventListener("click", function() {
|
||||
_toggleListStyle("list");
|
||||
data.save();
|
||||
}, false);
|
||||
};
|
||||
|
||||
var _add = function() {
|
||||
@ -35,14 +50,50 @@ var control = (function() {
|
||||
};
|
||||
};
|
||||
|
||||
var _toggleListStyle = function(style) {
|
||||
state.style = style;
|
||||
render();
|
||||
};
|
||||
|
||||
var render = function() {
|
||||
var html = helper.e("html");
|
||||
var controlLinkBlock = helper.e(".control-link-blocks");
|
||||
var controlLinkList = helper.e(".control-link-list");
|
||||
var action = {
|
||||
block: function() {
|
||||
helper.addClass(html, "is-link-block");
|
||||
helper.removeClass(html, "is-link-list");
|
||||
helper.addClass(controlLinkBlock, "active");
|
||||
helper.removeClass(controlLinkList, "active");
|
||||
},
|
||||
list: function() {
|
||||
helper.removeClass(html, "is-link-block");
|
||||
helper.addClass(html, "is-link-list");
|
||||
helper.removeClass(controlLinkBlock, "active");
|
||||
helper.addClass(controlLinkList, "active");
|
||||
}
|
||||
};
|
||||
action[state.style]();
|
||||
};
|
||||
|
||||
var restore = function(object) {
|
||||
if (object) {
|
||||
state = object;
|
||||
render();
|
||||
};
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
bind();
|
||||
render();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
init: init,
|
||||
state: state
|
||||
get: get,
|
||||
restore: restore,
|
||||
render: render
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
@ -21,9 +21,12 @@ var data = (function() {
|
||||
|
||||
var restore = function() {
|
||||
var data = JSON.parse(get(saveName));
|
||||
bookmarks.restore(data.bookmarks);
|
||||
theme.restore(data.accent);
|
||||
console.log(saveName + " data restored");
|
||||
if (data) {
|
||||
bookmarks.restore(data.bookmarks);
|
||||
theme.restore(data.theme);
|
||||
control.restore(data.control);
|
||||
console.log(saveName + " data restored");
|
||||
};
|
||||
};
|
||||
|
||||
var wipe = function() {
|
||||
|
||||
18
js/links.js
18
js/links.js
@ -312,14 +312,6 @@ var links = (function() {
|
||||
value: -1
|
||||
}]
|
||||
});
|
||||
// var linkEditText = _makeElement({
|
||||
// tag: "span",
|
||||
// text: "Edit",
|
||||
// attr: [{
|
||||
// key: "class",
|
||||
// value: "button-text"
|
||||
// }]
|
||||
// });
|
||||
var linkEditIcon = _makeElement({
|
||||
tag: "span",
|
||||
attr: [{
|
||||
@ -337,14 +329,6 @@ var links = (function() {
|
||||
value: -1
|
||||
}]
|
||||
});
|
||||
// var linkDeleteText = _makeElement({
|
||||
// tag: "span",
|
||||
// text: "Delete",
|
||||
// attr: [{
|
||||
// key: "class",
|
||||
// value: "button-text"
|
||||
// }]
|
||||
// });
|
||||
var linkDeleteIcon = _makeElement({
|
||||
tag: "span",
|
||||
attr: [{
|
||||
@ -387,7 +371,7 @@ var links = (function() {
|
||||
|
||||
var tabindex = function() {
|
||||
var allLinkControlItem = helper.eA(".link-control-item");
|
||||
if (control.state.edit) {
|
||||
if (control.get().edit) {
|
||||
allLinkControlItem.forEach(function(arrayItem, index) {
|
||||
arrayItem.tabIndex = 1;
|
||||
});
|
||||
|
||||
@ -3,7 +3,8 @@ var state = (function() {
|
||||
var get = function() {
|
||||
var current = {
|
||||
bookmarks: bookmarks.get(),
|
||||
accent: theme.get()
|
||||
control: control.get(),
|
||||
theme: theme.get()
|
||||
};
|
||||
return current;
|
||||
};
|
||||
|
||||
@ -34,9 +34,11 @@ var theme = (function() {
|
||||
};
|
||||
|
||||
var restore = function(object) {
|
||||
accent = object;
|
||||
_updateInput();
|
||||
render();
|
||||
if (object) {
|
||||
accent = object;
|
||||
_updateInput();
|
||||
render();
|
||||
};
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user