extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-02-03 11:59:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add controls for header position on scroll

Browse Source
This commit is contained in:
zombieFox 2019-11-08 15:49:44 +00:00
parent c08934b1a4
commit 2c4f9b69bd
5 changed files with 47 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/css/header.css
View File

@ -1,5 +1,4 @@
.header {
position: relative;
display: flex;
flex-direction: row;
z-index: var(--z-index-header);
@ -22,11 +21,16 @@
justify-content: flex-end;
}
.is-link-show .header {
.is-link-show.is-header-position-sticky .header {
position: sticky;
left: 0;
}
.is-link-show.is-header-position-inline .header {
position: relative;
left: 0;
}
.is-layout-order-headerlink.is-link-show .header {
top: 0;
}

19
src/index.html
View File

@ -728,6 +728,25 @@
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Position when scrolling</h1>
</div>
<div class="menu-item-form">
<div class="form-indent">
<div class="input-wrap">
<input id="control-header-position-sticky" class="control-header-position-sticky" type="radio" name="control-header-position" value="sticky" tabindex="-1">
<label for="control-header-position-sticky">Sticky</label>
</div>
<p class="control-header-position-sticky-helper form-helper small">Header sticks to the page when scrolling up or down.</p>
<div class="input-wrap">
<input id="control-header-position-inline" class="control-header-position-inline" type="radio" name="control-header-position" value="inline" tabindex="-1">
<label for="control-header-position-inline">Inline</label>
</div>
<p class="control-header-position-inline-helper form-helper small">Header moves inline with the content when scrolling up or down.</p>
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Shade</h1>

20
src/js/control.js
View File

@ -1747,6 +1747,20 @@ var control = (function() {
header.render.border();
render.class();
}
}, {
element: helper.e(".control-header-position-sticky"),
path: "header.position",
type: "radio",
func: function() {
render.class();
}
}, {
element: helper.e(".control-header-position-inline"),
path: "header.position",
type: "radio",
func: function() {
render.class();
}
}, {
element: helper.e(".control-link-area-width"),
path: "link.area.width",
@ -2649,6 +2663,11 @@ var control = (function() {
helper.addClass(html, "is-header-border-bottom");
};
};
var _position = function() {
helper.removeClass(html, "is-header-position-sticky");
helper.removeClass(html, "is-header-position-inline");
helper.addClass(html, "is-header-position-" + state.get().header.position);
};
_area();
_item();
_clock();
@ -2658,6 +2677,7 @@ var control = (function() {
_shade();
_border();
_greeting();
_position();
_transitional();
};
var _group = function() {

1
src/js/state.js
View File

@ -130,6 +130,7 @@ var state = (function() {
type: "timeanddate",
size: 1
},
position: "sticky",
radius: false
},
link: {

1
src/js/update.js
View File

@ -624,6 +624,7 @@ var update = (function() {
name: "Group 1",
items: data.bookmarks
}];
data.state.header.position = "sticky";
data.state.group = {
area: {
alignment: "left"