extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-25 12:01:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

[feature] adding list style

Browse Source
This commit is contained in:
Kombie 2018-12-26 16:46:53 -07:00 committed by GitHub
parent e144a75b48
commit b1f15a0717
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 135 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/base.css
View File

@ -28,9 +28,6 @@
--animation-speed-fast: 0.1s; --animation-speed-fast: 0.1s;
--animation-speed-medium: 0.2s; --animation-speed-medium: 0.2s;
--animation-speed-slow: 0.3s; --animation-speed-slow: 0.3s;
--link-height: 7em;
--url-height: 20%;
--edit-height: 30%;
--font-regular: "Open Sans Regular", sans-serif; --font-regular: "Open Sans Regular", sans-serif;
--font-bold: "Open Sans Bold", sans-serif; --font-bold: "Open Sans Bold", sans-serif;
--font-light: "Open Sans Light", sans-serif; --font-light: "Open Sans Light", sans-serif;
@ -43,8 +40,20 @@
--breakpoint-xl: 1300px; --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) { @media (min-width: 700px) {
:root { :root.is-link-block {
--link-height: 9em; --link-height: 9em;
} }
} }

52
css/links.css
View File

@ -25,15 +25,24 @@
width: 100%; width: 100%;
height: calc(100% - 2px); height: calc(100% - 2px);
display: flex; display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 3; z-index: 3;
position: relative; position: relative;
user-select: none; user-select: none;
transition: all var(--animation-speed-medium) ease-in-out; 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 { .link-panel-front:focus {
background-color: var(--gray-03); background-color: var(--gray-03);
outline: 0; outline: 0;
@ -121,11 +130,18 @@
height: 0; height: 0;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
transition: all var(--animation-speed-medium) ease-in-out; 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:hover .link-url,
.link-item:focus .link-url { .link-item:focus .link-url {
height: var(--url-height); height: var(--url-height);
@ -134,7 +150,6 @@
.link-url-text { .link-url-text {
margin: 0; margin: 0;
font-size: 0.7em; font-size: 0.7em;
text-align: center;
color: var(--black); color: var(--black);
font-family: var(--font-regular); font-family: var(--font-regular);
white-space: nowrap; white-space: nowrap;
@ -143,16 +158,24 @@
} }
.link-letter { .link-letter {
margin: 0;
font-size: 2em;
text-align: center; text-align: center;
font-family: var(--font-fjalla); font-family: var(--font-fjalla);
color: rgb(var(--accent)); color: rgb(var(--accent));
white-space: nowrap; white-space: nowrap;
}
.is-link-block .link-letter {
margin: 0;
font-size: 2em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; 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:hover .link-letter,
.link-item:focus .link-letter { .link-item:focus .link-letter {
color: var(--white); color: var(--white);
@ -191,9 +214,18 @@
height: 0; height: 0;
} }
height: var(--edit-height);
}
.is-edit .link-control-item { .is-edit .link-control-item {
pointer-events: all; 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
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="is-link-block">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@ -42,16 +42,22 @@
<span class="icon-close"></span> <span class="icon-close"></span>
</button> </button>
</div> </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"> <button class="button mb-0 control-add" tabindex="1">
<span class="button-text">Add</span> <span class="button-text">Add</span>
</button> </button>
</div>
<div class="head-item mb-3 mb-lg-0">
<button class="button mb-0 control-edit" tabindex="1"> <button class="button mb-0 control-edit" tabindex="1">
<span class="button-text">Edit</span> <span class="button-text">Edit</span>
</button> </button>
</div> </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"> <div class="head-item mb-3 mb-lg-0">
<form class="theme"> <form class="theme">
<label class="button mb-0 theme-label" for="accent-picker"> <label class="button mb-0 theme-label" for="accent-picker">

2
js/bookmarks.js
View File

@ -123,8 +123,10 @@ var bookmarks = (function() {
}; };
var restore = function(array) { var restore = function(array) {
if (array) {
all = array; all = array;
}; };
};
// exposed methods // exposed methods
return { return {

55
js/control.js
View File

@ -1,18 +1,33 @@
var control = (function() { var control = (function() {
var state = { var state = {
edit: false edit: false,
style: "block"
};
var get = function() {
return state;
}; };
var bind = function() { var bind = function() {
var controlAdd = helper.e(".control-add"); var controlAdd = helper.e(".control-add");
var controlEdit = helper.e(".control-edit"); var controlEdit = helper.e(".control-edit");
var controlLinkBlock = helper.e(".control-link-blocks");
var controlLinkList = helper.e(".control-link-list");
controlAdd.addEventListener("click", function() { controlAdd.addEventListener("click", function() {
_add(); _add();
}, false); }, false);
controlEdit.addEventListener("click", function() { controlEdit.addEventListener("click", function() {
_edit(); _edit();
}, false); }, false);
controlLinkBlock.addEventListener("click", function() {
_toggleListStyle("block");
data.save();
}, false);
controlLinkList.addEventListener("click", function() {
_toggleListStyle("list");
data.save();
}, false);
}; };
var _add = function() { 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() { var init = function() {
bind(); bind();
render();
}; };
// exposed methods // exposed methods
return { return {
init: init, init: init,
state: state get: get,
restore: restore,
render: render
}; };
})(); })();

5
js/data.js
View File

@ -21,10 +21,13 @@ var data = (function() {
var restore = function() { var restore = function() {
var data = JSON.parse(get(saveName)); var data = JSON.parse(get(saveName));
if (data) {
bookmarks.restore(data.bookmarks); bookmarks.restore(data.bookmarks);
theme.restore(data.accent); theme.restore(data.theme);
control.restore(data.control);
console.log(saveName + " data restored"); console.log(saveName + " data restored");
}; };
};
var wipe = function() { var wipe = function() {
clear(saveName); clear(saveName);

18
js/links.js
View File

@ -312,14 +312,6 @@ var links = (function() {
value: -1 value: -1
}] }]
}); });
// var linkEditText = _makeElement({
// tag: "span",
// text: "Edit",
// attr: [{
// key: "class",
// value: "button-text"
// }]
// });
var linkEditIcon = _makeElement({ var linkEditIcon = _makeElement({
tag: "span", tag: "span",
attr: [{ attr: [{
@ -337,14 +329,6 @@ var links = (function() {
value: -1 value: -1
}] }]
}); });
// var linkDeleteText = _makeElement({
// tag: "span",
// text: "Delete",
// attr: [{
// key: "class",
// value: "button-text"
// }]
// });
var linkDeleteIcon = _makeElement({ var linkDeleteIcon = _makeElement({
tag: "span", tag: "span",
attr: [{ attr: [{
@ -387,7 +371,7 @@ var links = (function() {
var tabindex = function() { var tabindex = function() {
var allLinkControlItem = helper.eA(".link-control-item"); var allLinkControlItem = helper.eA(".link-control-item");
if (control.state.edit) { if (control.get().edit) {
allLinkControlItem.forEach(function(arrayItem, index) { allLinkControlItem.forEach(function(arrayItem, index) {
arrayItem.tabIndex = 1; arrayItem.tabIndex = 1;
}); });

3
js/state.js
View File

@ -3,7 +3,8 @@ var state = (function() {
var get = function() { var get = function() {
var current = { var current = {
bookmarks: bookmarks.get(), bookmarks: bookmarks.get(),
accent: theme.get() control: control.get(),
theme: theme.get()
}; };
return current; return current;
}; };

2
js/theme.js
View File

@ -34,10 +34,12 @@ var theme = (function() {
}; };
var restore = function(object) { var restore = function(object) {
if (object) {
accent = object; accent = object;
_updateInput(); _updateInput();
render(); render();
}; };
};
var init = function() { var init = function() {
bind(); bind();