extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-12-27 00:59:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add link orientation controls

Browse Source
This commit is contained in:
Kuldeep M 2019-09-11 12:06:56 +01:00
parent 7e6f0eb3e8
commit d3cc4f00bc
9 changed files with 112 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "nighttab",
"version": "3.80.0",
"version": "3.81.0",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"main": "index.js",
"scripts": {

69
src/css/link.css
View File

@ -95,16 +95,27 @@
.link-panel-front {
background-color: rgb(var(--theme-gray-02));
border-radius: var(--theme-radius);
position: absolute;
left: 0;
width: 100%;
height: 100%;
display: flex;
z-index: 3;
overflow: hidden;
position: relative;
user-select: none;
transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
}
.is-link-orientation-top .link-panel-front {
top: inherit;
bottom: 0;
}
.is-link-orientation-bottom .link-panel-front {
top: 0;
bottom: inherit;
}
.is-link-item-border .link-panel-front {
border: calc(calc(var(--layout-line-width) / 2) * var(--link-item-border)) solid rgb(var(--theme-accent));
}
@ -244,23 +255,57 @@
top: var(--layout-line-width);
left: var(--layout-line-width);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
justify-content: flex-end;
z-index: 2;
transition: height var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast);
transition: height var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), clip-path var(--layout-timing-extra-fast);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.is-link-orientation-top .link-panel-back {
flex-direction: column-reverse;
}
.is-link-orientation-bottom .link-panel-back {
flex-direction: column;
}
.is-link-item-line-show .link-panel-back {
height: calc(100% - var(--layout-line-width));
}
.is-link-edit .link-panel-back,
.is-link-item-url-show:not(.is-link-item-line-show) .link-item:focus .link-panel-back,
.is-link-item-url-show:not(.is-link-item-line-show) .link-item:focus-within .link-panel-back,
.is-link-item-url-show:not(.is-link-item-line-show) .link-item:hover .link-panel-back {
.is-link-item-line-show.is-link-orientation-top .link-panel-back {
top: 0;
}
.is-link-item-line-show.is-link-orientation-bottom .link-panel-back {
top: var(--layout-line-width);
}
.is-link-orientation-top.is-link-edit .link-panel-back,
.is-link-orientation-bottom.is-link-edit .link-panel-back {
height: 100%;
top: 0;
}
.link-item:focus .link-panel-back,
.link-item:focus-within .link-panel-back,
.link-item:hover .link-panel-back {
height: 100%;
top: 0;
}
.is-link-orientation-top.is-link-edit .link-panel-back,
.is-link-orientation-top .link-item:focus .link-panel-back,
.is-link-orientation-top .link-item:focus-within .link-panel-back,
.is-link-orientation-top .link-item:hover .link-panel-back {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--layout-line-width)), 0 calc(100% - var(--layout-line-width)));
}
.is-link-orientation-bottom.is-link-edit .link-panel-back,
.is-link-orientation-bottom .link-item:focus .link-panel-back,
.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
.is-link-orientation-bottom .link-item:hover .link-panel-back {
clip-path: polygon(0 var(--layout-line-width), 100% var(--layout-line-width), 100% 100%, 0 100%);
}
@ -357,9 +402,9 @@
justify-content: flex-end;
}
.is-link-item-url-show .link-item:focus-within .link-url,
.is-link-item-url-show .link-item:focus .link-url,
.is-link-item-url-show .link-item:hover .link-url {
.is-link-item-url-show:not(.is-link-edit) .link-item:focus-within .link-url,
.is-link-item-url-show:not(.is-link-edit) .link-item:focus .link-url,
.is-link-item-url-show:not(.is-link-edit) .link-item:hover .link-url {
height: var(--link-item-url-height);
}
@ -502,7 +547,7 @@
.is-link-edit .link-item:hover .link-panel-front,
.is-link-edit .link-item:focus .link-panel-front {
height: calc(100% - var(--link-item-edit-height));
box-shadow: var(--layout-shadow-medium);
box-shadow: var(--layout-shadow-small);
}
.is-link-edit.is-link-item-url-show .link-item:focus .link-panel-front,

6
src/css/variables.css
View File

@ -56,9 +56,9 @@
--layout-timing-medium: 0.6s ease-in-out;
--layout-timing-slow: 0.8s ease-in-out;
--layout-timing-extra-slow: 1s ease-in-out;
--layout-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
--layout-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2);
--layout-shadow-large: 0 3px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.2);
--layout-shadow-small: 0 0 2px rgba(0, 0, 0, 0.2), 0 0 4px rgba(0, 0, 0, 0.1);
--layout-shadow-medium: 0 0 4px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 0, 0, 0.1);
--layout-shadow-large: 0 0 8px rgba(0, 0, 0, 0.2), 0 0 12px rgba(0, 0, 0, 0.1);
/* background */
--background-color-theme: var(--theme-gray-01);
--background-color-custom: rgb(0, 0, 0);

16
src/index.html
View File

@ -943,6 +943,22 @@
<p class="control-link-style-list-helper form-helper small">Bookmark tiles more short and wide with content stacked horizontally.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Orientation</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-link-orientation-top" class="control-link-orientation-top" type="radio" name="control-link-orientation" value="top" tabindex="-1">
<label for="control-link-orientation-top">Top</label>
</div>
<div class="input-wrap">
<input id="control-link-orientation-bottom" class="control-link-orientation-bottom" type="radio" name="control-link-orientation" value="bottom" tabindex="-1">
<label for="control-link-orientation-bottom">Bottom</label>
</div>
<p class="control-link-orientation-helper form-helper small">Display the URL and Controls either at the top of bottom of a Tile.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Sort</h1>

23
src/js/control.js
View File

@ -1991,6 +1991,20 @@ var control = (function() {
func: function() {
render.class();
}
}, {
element: helper.e(".control-link-orientation-top"),
path: "link.orientation",
type: "radio",
func: function() {
render.class();
}
}, {
element: helper.e(".control-link-orientation-bottom"),
path: "link.orientation",
type: "radio",
func: function() {
render.class();
}
}, {
element: helper.e(".control-link-sort-letter"),
type: "button",
@ -2524,12 +2538,15 @@ var control = (function() {
helper.removeClass(html, "is-link-item-border");
helper.removeClass(html, "is-link-style-list");
helper.removeClass(html, "is-link-style-block");
helper.removeClass(html, "is-link-orientation-top");
helper.removeClass(html, "is-link-orientation-bottom");
helper.removeClass(html, "is-link-edit");
if (state.get().link.show) {
helper.addClass(html, "is-link-show");
helper.addClass(html, "is-link-area-alignment-" + state.get().link.area.alignment);
helper.addClass(html, "is-link-display-alignment-" + state.get().link.item.display.alignment);
helper.addClass(html, "is-link-style-" + state.get().link.style);
helper.addClass(html, "is-link-orientation-" + state.get().link.orientation);
if (state.get().link.item.name.show) {
helper.addClass(html, "is-link-item-name-show");
};
@ -2969,6 +2986,9 @@ var control = (function() {
_disable.element(".control-link-style-block-helper", true);
_disable.input(".control-link-style-list", true);
_disable.element(".control-link-style-list-helper", true);
_disable.input(".control-link-orientation-top", true);
_disable.input(".control-link-orientation-bottom", true);
_disable.element(".control-link-orientation-helper", true);
_disable.input(".control-link-sort-name", true);
_disable.input(".control-link-sort-letter", true);
_disable.input(".control-link-sort-icon", true);
@ -3001,6 +3021,9 @@ var control = (function() {
_disable.element(".control-link-style-block-helper", false);
_disable.input(".control-link-style-list", false);
_disable.element(".control-link-style-list-helper", false);
_disable.input(".control-link-orientation-top", false);
_disable.input(".control-link-orientation-bottom", false);
_disable.element(".control-link-orientation-helper", false);
_disable.input(".control-link-sort-name", false);
_disable.input(".control-link-sort-letter", false);
_disable.input(".control-link-sort-icon", false);

11
src/js/state.js
View File

@ -102,10 +102,10 @@ var state = (function() {
},
button: {
editAdd: {
show: true,
show: true
},
accent: {
show: true,
show: true
},
style: "box",
size: 1
@ -151,7 +151,7 @@ var state = (function() {
},
name: {
show: true,
size: 0.9,
size: 0.9
},
url: {
show: true
@ -169,7 +169,8 @@ var state = (function() {
show: true,
add: false,
edit: false,
style: "block"
style: "block",
orientation: "bottom"
},
layout: {
alignment: "centercenter",
@ -225,7 +226,7 @@ var state = (function() {
search: false,
menu: false,
modal: false,
autoSuggest: false,
autoSuggest: false
};
mod.get = function() {

4
src/js/update.js
View File

@ -608,6 +608,10 @@ var update = (function() {
delete data.state.link.item.newtab;
data.state.link.item.border = 0;
return data;
},
"3.81.0": function(data) {
data.state.link.orientation = "bottom";
return data;
}
};

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "3.80.0";
var current = "3.81.0";
var compare = function(a, b) {
var pa = a.split(".");

2
src/manifest.json
View File

@ -2,7 +2,7 @@
"name": "nightTab",
"short_name": "nightTab",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "3.80.0",
"version": "3.81.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"