mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-02-17 02:30:48 +01:00
[feature] add layout direction controls
This commit is contained in:
Kombie
GitHub
parent
f22a34aa5b
commit
8052736db6
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "4.44.2",
|
||||
"version": "5.0.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "4.44.2",
|
||||
"version": "5.0.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": {
|
||||
|
||||
@ -3,18 +3,10 @@
|
||||
padding-bottom: calc(calc(var(--layout-space) / 2) * var(--layout-padding));
|
||||
padding-left: calc(var(--layout-space) * var(--layout-padding));
|
||||
padding-right: calc(var(--layout-space) * var(--layout-padding));
|
||||
width: var(--link-area-width);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.is-group-order-headerbody .group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.is-group-order-bodyheader .group {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.group:first-child {
|
||||
padding-top: calc(var(--layout-space) * var(--layout-padding));
|
||||
}
|
||||
@ -23,13 +15,20 @@
|
||||
padding-bottom: calc(var(--layout-space) * var(--layout-padding));
|
||||
}
|
||||
|
||||
.is-group-order-headerbody .group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.is-group-order-bodyheader .group {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.is-group-border .group:not(:last-child):not(:only-child) {
|
||||
border-bottom: calc(var(--layout-line-width) * var(--group-border)) solid rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
.is-group-border .group {
|
||||
padding-top: calc(var(--layout-space) * var(--layout-padding));
|
||||
padding-bottom: calc(var(--layout-space) * var(--layout-padding));
|
||||
padding: calc(var(--layout-space) * var(--layout-padding));
|
||||
}
|
||||
|
||||
.group-header {
|
||||
@ -163,3 +162,11 @@
|
||||
grid-gap: calc(var(--layout-space) * var(--layout-gutter));
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
|
||||
}
|
||||
|
||||
.is-link-area-direction-ltr .group-body {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.is-link-area-direction-rtl .group-body {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
@ -6,6 +6,27 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.is-layout-direction-horizontal .header {
|
||||
max-height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: initial;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-layout-direction-horizontal .header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.is-link-show.is-layout-direction-horizontal .header {
|
||||
width: calc(calc(var(--header-area-width) / 2) - calc(calc(var(--link-area-width) / 2) - 50%));
|
||||
}
|
||||
|
||||
.is-layout-direction-vertical .header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.is-header-color-show .header {
|
||||
pointer-events: all;
|
||||
}
|
||||
@ -22,94 +43,71 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-link-show.is-header-position-sticky .header {
|
||||
.is-layout-direction-vertical.is-link-show.is-header-position-sticky .header {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.is-link-show.is-header-position-inline .header {
|
||||
.is-layout-direction-vertical.is-link-show.is-header-position-inline .header {
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.is-layout-order-headerlink.is-link-show .header {
|
||||
.is-layout-direction-vertical.is-layout-order-headerlink.is-link-show .header {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.is-layout-order-linkheader.is-link-show .header {
|
||||
.is-layout-direction-vertical.is-layout-order-linkheader.is-link-show .header {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.header-color {
|
||||
.header-area {
|
||||
background-color: transparent;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
transition: background-color var(--layout-timing-medium), opacity var(--layout-timing-medium), border-radius var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.is-header-radius .header-color {
|
||||
.is-layout-direction-vertical .header-area {
|
||||
width: var(--header-area-width);
|
||||
}
|
||||
|
||||
.is-layout-direction-horizontal .header-area {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.is-header-radius .header-area {
|
||||
border-radius: calc(var(--theme-radius) * 4);
|
||||
}
|
||||
|
||||
.is-header-color-by-theme.is-header-color-style-always .header-color {
|
||||
.is-header-color-by-theme.is-header-color-style-always .header-area {
|
||||
background-color: rgba(var(--header-color-theme), var(--header-opacity));
|
||||
}
|
||||
|
||||
.is-header-color-by-theme.is-header-color-style-scroll.is-header-color-style-scrolling .header-color {
|
||||
.is-header-color-by-theme.is-header-color-style-scroll.is-header-color-style-scrolling .header-area {
|
||||
background-color: rgba(var(--header-color-theme), var(--header-opacity));
|
||||
}
|
||||
|
||||
.is-header-color-by-custom.is-header-color-style-always .header-color {
|
||||
.is-header-color-by-custom.is-header-color-style-always .header-area {
|
||||
background-color: rgba(var(--header-color-custom), var(--header-opacity));
|
||||
}
|
||||
|
||||
.is-header-color-by-custom.is-header-color-style-scroll.is-header-color-style-scrolling .header-color {
|
||||
.is-header-color-by-custom.is-header-color-style-scroll.is-header-color-style-scrolling .header-area {
|
||||
background-color: rgba(var(--header-color-custom), var(--header-opacity));
|
||||
}
|
||||
|
||||
.header-area {
|
||||
padding: calc(var(--layout-space) * var(--layout-padding));
|
||||
position: relative;
|
||||
width: var(--header-area-width);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.is-header-border-top .header-area {
|
||||
border-top: calc(var(--layout-line-width) * var(--header-border-top)) solid transparent;
|
||||
}
|
||||
|
||||
.is-header-border-bottom .header-area {
|
||||
border-bottom: calc(var(--layout-line-width) * var(--header-border-bottom)) solid transparent;
|
||||
}
|
||||
|
||||
.header-border {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.is-header-border-top .header-border {
|
||||
border-top: calc(var(--layout-line-width) * var(--header-border-top)) solid rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
.is-header-border-bottom .header-border {
|
||||
.is-header-border-bottom .header-area {
|
||||
border-bottom: calc(var(--layout-line-width) * var(--header-border-bottom)) solid rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
.is-header-radius .header-color {
|
||||
border-radius: calc(var(--theme-radius) * 4);
|
||||
}
|
||||
|
||||
.header-item-grid {
|
||||
margin: calc(-1 * calc(var(--layout-space) * var(--layout-gutter))) 0 0 calc(-1 * calc(var(--layout-space) * var(--layout-gutter)));
|
||||
position: relative;
|
||||
|
||||
@ -2,6 +2,33 @@
|
||||
position: relative;
|
||||
width: var(--layout-width);
|
||||
font-size: calc(1em * var(--layout-size));
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.is-layout-direction-vertical .layout {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.is-layout-direction-vertical.is-layout-order-headerlink .layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.is-layout-direction-vertical.is-layout-order-linkheader .layout {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.is-layout-direction-horizontal .layout {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-layout-direction-horizontal.is-layout-order-headerlink .layout {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.is-layout-direction-horizontal.is-layout-order-linkheader .layout {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.is-layout-alignment-horizontal-left body {
|
||||
|
||||
@ -5,10 +5,72 @@
|
||||
z-index: var(--z-index-link);
|
||||
}
|
||||
|
||||
.is-layout-direction-horizontal .link {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-layout-direction-vertical .link {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.is-layout-direction-vertical.is-layout-order-headerlink .link {
|
||||
margin-top: calc(-1 * calc(var(--layout-space) * var(--layout-padding)));
|
||||
}
|
||||
|
||||
.is-layout-direction-vertical.is-layout-order-linkheader .link {
|
||||
margin-bottom: calc(-1 * calc(var(--layout-space) * var(--layout-padding)));
|
||||
}
|
||||
|
||||
.is-layout-direction-horizontal.is-layout-order-headerlink .link {
|
||||
margin-left: calc(-1 * calc(var(--layout-space) * var(--layout-padding)));
|
||||
}
|
||||
|
||||
.is-layout-direction-horizontal.is-layout-order-linkheader .link {
|
||||
margin-right: calc(-1 * calc(var(--layout-space) * var(--layout-padding)));
|
||||
}
|
||||
|
||||
.is-layout-direction-horizontal .link {
|
||||
width: calc(calc(var(--link-area-width) / 2) - calc(calc(var(--header-area-width) / 2) - 50%) + calc(var(--layout-space) * var(--layout-padding)));
|
||||
}
|
||||
|
||||
.is-layout-direction-vertical.is-layout-order-headerlink.is-header-border-bottom .link,
|
||||
.is-layout-direction-vertical.is-layout-order-headerlink.is-header-color-style-always .link {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.is-layout-direction-vertical.is-layout-order-linkheader.is-header-border-top .link,
|
||||
.is-layout-direction-vertical.is-layout-order-linkheader.is-header-color-style-always .link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.is-layout-direction-horizontal.is-layout-order-headerlink.is-group-border .link,
|
||||
.is-layout-direction-horizontal.is-layout-order-headerlink.is-header-border-top .link,
|
||||
.is-layout-direction-horizontal.is-layout-order-headerlink.is-header-border-bottom .link,
|
||||
.is-layout-direction-horizontal.is-layout-order-headerlink.is-header-color-style-always .link {
|
||||
width: 50%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.is-layout-direction-horizontal.is-layout-order-linkheader.is-group-border .link,
|
||||
.is-layout-direction-horizontal.is-layout-order-linkheader.is-header-border-top .link,
|
||||
.is-layout-direction-horizontal.is-layout-order-linkheader.is-header-border-bottom .link,
|
||||
.is-layout-direction-horizontal.is-layout-order-linkheader.is-header-color-style-always .link {
|
||||
width: 50%;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.is-link-show .link {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.is-layout-direction-vertical .link-area {
|
||||
width: var(--link-area-width);
|
||||
}
|
||||
|
||||
.is-layout-direction-horizontal .link-area {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.is-link-area-justify-left .link {
|
||||
align-items: flex-start;
|
||||
}
|
||||
@ -21,24 +83,6 @@
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-layout-order-headerlink .link {
|
||||
margin-top: calc(-1 * calc(var(--layout-space) * var(--layout-padding)));
|
||||
}
|
||||
|
||||
.is-layout-order-linkheader .link {
|
||||
margin-bottom: calc(-1 * calc(var(--layout-space) * var(--layout-padding)));
|
||||
}
|
||||
|
||||
.is-layout-order-headerlink.is-header-border-bottom .link,
|
||||
.is-layout-order-headerlink.is-header-color-style-always .link {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.is-layout-order-linkheader.is-header-border-top .link,
|
||||
.is-layout-order-linkheader.is-header-color-style-always .link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.link-sort-placeholder {
|
||||
background-color: rgba(var(--theme-accent), 0.2);
|
||||
border-radius: var(--theme-radius);
|
||||
@ -51,6 +95,7 @@
|
||||
|
||||
.link-item.link-empty {
|
||||
background-color: rgba(var(--theme-color-04), 0.2);
|
||||
padding: 0.5em 1em;
|
||||
border-radius: var(--theme-radius);
|
||||
height: inherit;
|
||||
text-align: center;
|
||||
@ -99,6 +144,11 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.is-link-area-direction-ltr .link-item,
|
||||
.is-link-area-direction-rtl .link-item {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.link-item:focus-within,
|
||||
.link-item:focus,
|
||||
.link-item:hover {
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
<main class="layout">
|
||||
|
||||
<header class="header">
|
||||
<div class="header-color"></div>
|
||||
<div class="header-border"></div>
|
||||
<div class="header-area"></div>
|
||||
</header>
|
||||
<header class="header"></header>
|
||||
|
||||
<section class="link"></section>
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
|
||||
@@include("./menu/content/header.html")
|
||||
|
||||
@@include("./menu/content/groups.html")
|
||||
|
||||
@@include("./menu/content/bookmarks.html")
|
||||
|
||||
@@include("./menu/content/groups.html")
|
||||
|
||||
@@include("./menu/content/theme.html")
|
||||
|
||||
|
||||
@ -2,14 +2,16 @@
|
||||
|
||||
@@include("./bookmarks/area.html")
|
||||
|
||||
@@include("./bookmarks/alignment.html")
|
||||
|
||||
@@include("./bookmarks/bookmarks.html")
|
||||
|
||||
@@include("./bookmarks/content.html")
|
||||
|
||||
@@include("./bookmarks/letcon.html")
|
||||
|
||||
@@include("./bookmarks/name.html")
|
||||
|
||||
@@include("./bookmarks/alignment.html")
|
||||
|
||||
@@include("./bookmarks/style.html")
|
||||
|
||||
@@include("./bookmarks/color.html")
|
||||
|
||||
@ -4,113 +4,44 @@
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label class="control-link-item-display-alignment-label">Letter/Icon and Name position</label>
|
||||
<label class="control-link-area-justify-label">Horizontal alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x3 control-link-item-display-alignment-grid">
|
||||
<div class="form-grid form-grid-3x1 control-link-area-justify-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-topleft" class="control-link-item-display-alignment-topleft" type="radio" name="control-link-item-display-alignment" value="topleft" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
|
||||
<input id="control-link-area-justify-left" class="control-link-area-justify-left" type="radio" name="control-link-area-justify" value="left" tabindex="-1">
|
||||
<label for="control-link-area-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-topcenter" class="control-link-item-display-alignment-topcenter" type="radio" name="control-link-item-display-alignment" value="topcenter" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
|
||||
<input id="control-link-area-justify-center" class="control-link-area-justify-center" type="radio" name="control-link-area-justify" value="center" tabindex="-1">
|
||||
<label for="control-link-area-justify-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-topright" class="control-link-item-display-alignment-topright" type="radio" name="control-link-item-display-alignment" value="topright" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-centerleft" class="control-link-item-display-alignment-centerleft" type="radio" name="control-link-item-display-alignment" value="centerleft" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-centercenter" class="control-link-item-display-alignment-centercenter" type="radio" name="control-link-item-display-alignment" value="centercenter" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-centerright" class="control-link-item-display-alignment-centerright" type="radio" name="control-link-item-display-alignment" value="centerright" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-bottomleft" class="control-link-item-display-alignment-bottomleft" type="radio" name="control-link-item-display-alignment" value="bottomleft" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-bottomcenter" class="control-link-item-display-alignment-bottomcenter" type="radio" name="control-link-item-display-alignment" value="bottomcenter" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-bottomright" class="control-link-item-display-alignment-bottomright" type="radio" name="control-link-item-display-alignment" value="bottomright" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
|
||||
<input id="control-link-area-justify-right" class="control-link-area-justify-right" type="radio" name="control-link-area-justify" value="right" tabindex="-1">
|
||||
<label for="control-link-area-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-rotate-range">Rotation</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-rotate-range" class="control-link-item-display-rotate-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-rotate-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-rotate-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-translate-x-range">Horizontally offset</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-translate-x-range" class="control-link-item-display-translate-x-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-translate-x-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-translate-x-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-translate-y-range">Vertically offset</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-translate-y-range" class="control-link-item-display-translate-y-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-translate-y-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-translate-y-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-gutter-range">Gutter</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-gutter-range" class="control-link-item-display-gutter-range mr-3" type="range" value="0" tabindex="1">
|
||||
<input class="control-link-item-display-gutter-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-gutter-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-direction-horizontal" class="control-link-item-display-direction-horizontal" type="radio" name="control-link-item-display-direction" value="horizontal" tabindex="-1">
|
||||
<label for="control-link-item-display-direction-horizontal"><span class="label-icon"></span> Align horizontally</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-direction-vertical" class="control-link-item-display-direction-vertical" type="radio" name="control-link-item-display-direction" value="vertical" tabindex="-1">
|
||||
<label for="control-link-item-display-direction-vertical"><span class="label-icon"></span> Align vertically</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-direction-helper form-helper-item">Only available when Letter/Icon and Name are shown.</p>
|
||||
<p class="control-link-area-justify-helper form-helper-item">Effects may not be visible if the Bookmark Area is full width.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-direction-helper form-helper-item">Vertical alignment works well with Bookmark Block Style.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-direction-helper form-helper-item">Horizontal alignment works well with Bookmark List Style.</p>
|
||||
<p class="control-link-area-helper form-helper-item">Only available when Layout Alignment is Vertical.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-order-letconname" class="control-link-item-display-order-letconname" type="radio" name="control-link-item-display-order" value="letconname" tabindex="-1">
|
||||
<label for="control-link-item-display-order-letconname"><span class="label-icon"></span> Order Letter/Icon then Name</label>
|
||||
<label class="control-link-area-direction-label">Bookmark direction</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-order-nameletcon" class="control-link-item-display-order-nameletcon" type="radio" name="control-link-item-display-order" value="nameletcon" tabindex="-1">
|
||||
<label for="control-link-item-display-order-nameletcon"><span class="label-icon"></span> Order Name then Letter/Icon</label>
|
||||
<input id="control-link-area-direction-ltr" class="control-link-area-direction-ltr" type="radio" name="control-link-area-direction" value="ltr" tabindex="-1">
|
||||
<label for="control-link-area-direction-ltr"><span class="label-icon"></span> Left to right</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-area-direction-rtl" class="control-link-area-direction-rtl" type="radio" name="control-link-area-direction" value="rtl" tabindex="-1">
|
||||
<label for="control-link-area-direction-rtl"><span class="label-icon"></span> Right to left</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-order-helper form-helper-item">Only available when Letter/Icon and Name are shown.</p>
|
||||
<p class="control-link-area-direction-helper form-helper-item">Flow Bookmarks either from the left or right of the Bookmark Area.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,28 +17,5 @@
|
||||
<div class="form-helper">
|
||||
<p class="control-link-area-width-helper form-helper-item">Max width is defined by Layout Area Width.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-link-area-justify-label">Horizontal alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x1 control-link-area-justify-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-area-justify-left" class="control-link-area-justify-left" type="radio" name="control-link-area-justify" value="left" tabindex="-1">
|
||||
<label for="control-link-area-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-area-justify-center" class="control-link-area-justify-center" type="radio" name="control-link-area-justify" value="center" tabindex="-1">
|
||||
<label for="control-link-area-justify-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-area-justify-right" class="control-link-area-justify-right" type="radio" name="control-link-area-justify" value="right" tabindex="-1">
|
||||
<label for="control-link-area-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-area-justify-helper form-helper-item">Effects may not be visible if the Bookmark Area is full width.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
116
src/html/menu/content/bookmarks/content.html
Normal file
116
src/html/menu/content/bookmarks/content.html
Normal file
@ -0,0 +1,116 @@
|
||||
<div id="menu-content-bookmarks-content" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Content</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label class="control-link-item-display-alignment-label">Letter/Icon and Name position</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x3 control-link-item-display-alignment-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-topleft" class="control-link-item-display-alignment-topleft" type="radio" name="control-link-item-display-alignment" value="topleft" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-topcenter" class="control-link-item-display-alignment-topcenter" type="radio" name="control-link-item-display-alignment" value="topcenter" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-topright" class="control-link-item-display-alignment-topright" type="radio" name="control-link-item-display-alignment" value="topright" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-centerleft" class="control-link-item-display-alignment-centerleft" type="radio" name="control-link-item-display-alignment" value="centerleft" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-centercenter" class="control-link-item-display-alignment-centercenter" type="radio" name="control-link-item-display-alignment" value="centercenter" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-centerright" class="control-link-item-display-alignment-centerright" type="radio" name="control-link-item-display-alignment" value="centerright" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-bottomleft" class="control-link-item-display-alignment-bottomleft" type="radio" name="control-link-item-display-alignment" value="bottomleft" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-bottomcenter" class="control-link-item-display-alignment-bottomcenter" type="radio" name="control-link-item-display-alignment" value="bottomcenter" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-bottomright" class="control-link-item-display-alignment-bottomright" type="radio" name="control-link-item-display-alignment" value="bottomright" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-rotate-range">Rotation</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-rotate-range" class="control-link-item-display-rotate-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-rotate-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-rotate-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-translate-x-range">Horizontally offset</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-translate-x-range" class="control-link-item-display-translate-x-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-translate-x-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-translate-x-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-translate-y-range">Vertically offset</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-translate-y-range" class="control-link-item-display-translate-y-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-translate-y-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-translate-y-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-gutter-range">Gutter</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-gutter-range" class="control-link-item-display-gutter-range mr-3" type="range" value="0" tabindex="1">
|
||||
<input class="control-link-item-display-gutter-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-gutter-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-direction-horizontal" class="control-link-item-display-direction-horizontal" type="radio" name="control-link-item-display-direction" value="horizontal" tabindex="-1">
|
||||
<label for="control-link-item-display-direction-horizontal"><span class="label-icon"></span> Align horizontally</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-direction-vertical" class="control-link-item-display-direction-vertical" type="radio" name="control-link-item-display-direction" value="vertical" tabindex="-1">
|
||||
<label for="control-link-item-display-direction-vertical"><span class="label-icon"></span> Align vertically</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-direction-vertical-helper form-helper-item">Vertical alignment works well with Bookmark Block Style.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-direction-horizontal-helper form-helper-item">Horizontal alignment works well with Bookmark List Style.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-direction-helper form-helper-item">Only available when Letter/Icon and Name are shown.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-order-letconname" class="control-link-item-display-order-letconname" type="radio" name="control-link-item-display-order" value="letconname" tabindex="-1">
|
||||
<label for="control-link-item-display-order-letconname"><span class="label-icon"></span> Order Letter/Icon then Name</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-order-nameletcon" class="control-link-item-display-order-nameletcon" type="radio" name="control-link-item-display-order" value="nameletcon" tabindex="-1">
|
||||
<label for="control-link-item-display-order-nameletcon"><span class="label-icon"></span> Order Name then Letter/Icon</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-order-helper form-helper-item">Only available when Letter/Icon and Name are shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2,6 +2,8 @@
|
||||
|
||||
@@include("./header/area.html")
|
||||
|
||||
@@include("./header/alignment.html")
|
||||
|
||||
@@include("./header/order.html")
|
||||
|
||||
@@include("./header/greeting.html")
|
||||
|
||||
84
src/html/menu/content/header/alignment.html
Normal file
84
src/html/menu/content/header/alignment.html
Normal file
@ -0,0 +1,84 @@
|
||||
<div id="menu-content-header-alignment" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Alignment</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-area-justify-label">Area horizontal alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x1 control-header-area-justify-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-justify-left" class="control-header-area-justify-left" type="radio" name="control-header-area-justify" value="left" tabindex="-1">
|
||||
<label for="control-header-area-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-justify-center" class="control-header-area-justify-center" type="radio" name="control-header-area-justify" value="center" tabindex="-1">
|
||||
<label for="control-header-area-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-justify-right" class="control-header-area-justify-right" type="radio" name="control-header-area-justify" value="right" tabindex="-1">
|
||||
<label for="control-header-area-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-justify-helper form-helper-item">Effects may not be visible if the Header Area is full width.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-helper form-helper-item">Only available when Layout Alignment is Vertical.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-area-align-label">Header item vertical alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-align-center" class="control-header-area-align-center" type="radio" name="control-header-area-align" value="center" tabindex="-1">
|
||||
<label for="control-header-area-align-center"><span class="label-icon"></span> Center</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-align-center-helper form-helper-item">Header items aligned to each others centres.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-align-baseline" class="control-header-area-align-baseline" type="radio" name="control-header-area-align" value="baseline" tabindex="-1">
|
||||
<label for="control-header-area-align-baseline"><span class="label-icon"></span> Baseline</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-align-baseline-helper form-helper-item">Header items aligned to the text baseline. Useful for when the Clock, Date and other text is sized large and need to sit on a line.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-item-justify-label">Item horizontal alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x1 control-header-item-justify-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-item-justify-left" class="control-header-item-justify-left" type="radio" name="control-header-item-justify" value="left" tabindex="-1">
|
||||
<label for="control-header-item-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-item-justify-center" class="control-header-item-justify-center" type="radio" name="control-header-item-justify" value="center" tabindex="-1">
|
||||
<label for="control-header-item-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-item-justify-right" class="control-header-item-justify-right" type="radio" name="control-header-item-justify" value="right" tabindex="-1">
|
||||
<label for="control-header-item-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-item-justify-helper form-helper-item">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-width-helper form-helper-item">Some Header items may not be shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -17,80 +17,5 @@
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-width-helper form-helper-item">Max width is defined by Layout Area Width.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-area-justify-label">Area horizontal alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x1 control-header-area-justify-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-justify-left" class="control-header-area-justify-left" type="radio" name="control-header-area-justify" value="left" tabindex="-1">
|
||||
<label for="control-header-area-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-justify-center" class="control-header-area-justify-center" type="radio" name="control-header-area-justify" value="center" tabindex="-1">
|
||||
<label for="control-header-area-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-justify-right" class="control-header-area-justify-right" type="radio" name="control-header-area-justify" value="right" tabindex="-1">
|
||||
<label for="control-header-area-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-justify-helper form-helper-item">Effects may not be visible if the Header Area is full width.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-area-align-label">Header item vertical alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-align-center" class="control-header-area-align-center" type="radio" name="control-header-area-align" value="center" tabindex="-1">
|
||||
<label for="control-header-area-align-center"><span class="label-icon"></span> Center</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-align-center-helper form-helper-item">Header items aligned to each others centres.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-align-baseline" class="control-header-area-align-baseline" type="radio" name="control-header-area-align" value="baseline" tabindex="-1">
|
||||
<label for="control-header-area-align-baseline"><span class="label-icon"></span> Baseline</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-align-baseline-helper form-helper-item">Header items aligned to the text baseline. Useful for when the Clock, Date and other text is sized large and need to sit on a line.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-item-justify-label">Item horizontal alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x1 control-header-item-justify-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-item-justify-left" class="control-header-item-justify-left" type="radio" name="control-header-item-justify" value="left" tabindex="-1">
|
||||
<label for="control-header-item-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-item-justify-center" class="control-header-item-justify-center" type="radio" name="control-header-item-justify" value="center" tabindex="-1">
|
||||
<label for="control-header-item-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-item-justify-right" class="control-header-item-justify-right" type="radio" name="control-header-item-justify" value="right" tabindex="-1">
|
||||
<label for="control-header-item-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-item-justify-helper form-helper-item">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-width-helper form-helper-item">Some Header items may not be shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,6 +23,9 @@
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-style-scroll-helper form-helper-item">The page will not scroll if Bookmarks are not shown.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-style-scroll-helper form-helper-item">May not be visible if Layout Alignment is Horizontal as the Bookmarks won't pass under the header.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-color-by-theme" class="control-header-color-by-theme" type="radio" name="control-header-color-by" value="theme" tabindex="-1">
|
||||
|
||||
@ -17,5 +17,8 @@
|
||||
<div class="form-helper">
|
||||
<p class="control-header-position-inline-helper form-helper-item">Header moves inline with the content when scrolling up or down.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-position-helper form-helper-item">Only available when Layout Alignment is Vertical.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<label for="control-header-transitional-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-transitional-show-helper form-helper-item">Available when Date or Time is shown.</p>
|
||||
<p class="control-header-transitional-show-helper form-helper-item">Only available when Date or Time is shown.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
@@include("./layout/area.html")
|
||||
|
||||
@@include("./layout/order.html")
|
||||
@@include("./layout/alignment.html")
|
||||
|
||||
@@include("./layout/padding.html")
|
||||
|
||||
|
||||
80
src/html/menu/content/layout/alignment.html
Normal file
80
src/html/menu/content/layout/alignment.html
Normal file
@ -0,0 +1,80 @@
|
||||
<div id="menu-content-layout-alignment" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Alignment</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label>Area alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x3 control-layout-alignment-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-topleft" class="control-layout-alignment-topleft" type="radio" name="control-layout-alignment" value="topleft" tabindex="-1">
|
||||
<label for="control-layout-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-topcenter" class="control-layout-alignment-topcenter" type="radio" name="control-layout-alignment" value="topcenter" tabindex="-1">
|
||||
<label for="control-layout-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-topright" class="control-layout-alignment-topright" type="radio" name="control-layout-alignment" value="topright" tabindex="-1">
|
||||
<label for="control-layout-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-centerleft" class="control-layout-alignment-centerleft" type="radio" name="control-layout-alignment" value="centerleft" tabindex="-1">
|
||||
<label for="control-layout-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-centercenter" class="control-layout-alignment-centercenter" type="radio" name="control-layout-alignment" value="centercenter" tabindex="-1">
|
||||
<label for="control-layout-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-centerright" class="control-layout-alignment-centerright" type="radio" name="control-layout-alignment" value="centerright" tabindex="-1">
|
||||
<label for="control-layout-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-bottomleft" class="control-layout-alignment-bottomleft" type="radio" name="control-layout-alignment" value="bottomleft" tabindex="-1">
|
||||
<label for="control-layout-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-bottomcenter" class="control-layout-alignment-bottomcenter" type="radio" name="control-layout-alignment" value="bottomcenter" tabindex="-1">
|
||||
<label for="control-layout-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-bottomright" class="control-layout-alignment-bottomright" type="radio" name="control-layout-alignment" value="bottomright" tabindex="-1">
|
||||
<label for="control-layout-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-alignment-helper form-helper-item">Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-direction-horizontal" class="control-layout-direction-horizontal" type="radio" name="control-layout-direction" value="horizontal" tabindex="-1">
|
||||
<label for="control-layout-direction-horizontal"><span class="label-icon"></span>Align horizontal</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-direction-vertical" class="control-layout-direction-vertical" type="radio" name="control-layout-direction" value="vertical" tabindex="-1">
|
||||
<label for="control-layout-direction-vertical"><span class="label-icon"></span>Align vertical</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-direction-vertical-helper form-helper-item">Horizontal alignment stack the Header and Bookmarks in a row side by side.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-direction-horizontal-helper form-helper-item">Vertical alignment stacks the Header and Bookmarks in a column one above the other.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-order-headerlink" class="control-layout-order-headerlink" type="radio" name="control-layout-order" value="headerlink" tabindex="-1">
|
||||
<label for="control-layout-order-headerlink"><span class="label-icon"></span> Header then Bookmarks</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-order-linkheader" class="control-layout-order-linkheader" type="radio" name="control-layout-order" value="linkheader" tabindex="-1">
|
||||
<label for="control-layout-order-linkheader"><span class="label-icon"></span> Bookmarks then Header</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-order-helper form-helper-item">Only available when Bookmarks are shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -11,52 +11,5 @@
|
||||
<button class="control-layout-width-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label>Area alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x3 control-layout-alignment-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-topleft" class="control-layout-alignment-topleft" type="radio" name="control-layout-alignment" value="topleft" tabindex="-1">
|
||||
<label for="control-layout-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-topcenter" class="control-layout-alignment-topcenter" type="radio" name="control-layout-alignment" value="topcenter" tabindex="-1">
|
||||
<label for="control-layout-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-topright" class="control-layout-alignment-topright" type="radio" name="control-layout-alignment" value="topright" tabindex="-1">
|
||||
<label for="control-layout-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-centerleft" class="control-layout-alignment-centerleft" type="radio" name="control-layout-alignment" value="centerleft" tabindex="-1">
|
||||
<label for="control-layout-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-centercenter" class="control-layout-alignment-centercenter" type="radio" name="control-layout-alignment" value="centercenter" tabindex="-1">
|
||||
<label for="control-layout-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-centerright" class="control-layout-alignment-centerright" type="radio" name="control-layout-alignment" value="centerright" tabindex="-1">
|
||||
<label for="control-layout-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-bottomleft" class="control-layout-alignment-bottomleft" type="radio" name="control-layout-alignment" value="bottomleft" tabindex="-1">
|
||||
<label for="control-layout-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-bottomcenter" class="control-layout-alignment-bottomcenter" type="radio" name="control-layout-alignment" value="bottomcenter" tabindex="-1">
|
||||
<label for="control-layout-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-bottomright" class="control-layout-alignment-bottomright" type="radio" name="control-layout-alignment" value="bottomright" tabindex="-1">
|
||||
<label for="control-layout-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-alignment-helper form-helper-item">Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
<div id="menu-content-layout-order" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Order</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-order-headerlink" class="control-layout-order-headerlink" type="radio" name="control-layout-order" value="headerlink" tabindex="-1">
|
||||
<label for="control-layout-order-headerlink"><span class="label-icon"></span> Header then Bookmarks</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-order-linkheader" class="control-layout-order-linkheader" type="radio" name="control-layout-order" value="linkheader" tabindex="-1">
|
||||
<label for="control-layout-order-linkheader"><span class="label-icon"></span> Bookmarks then Header</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-order-helper form-helper-item">Only available when Bookmarks are shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="menu-nav-body menu-nav-body-layout active">
|
||||
<a href="#menu-content-layout-scaling" class="menu-nav-sub button button-small" tabindex="-1">Scaling</a>
|
||||
<a href="#menu-content-layout-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a>
|
||||
<a href="#menu-content-layout-order" class="menu-nav-sub button button-small" tabindex="-1">Order</a>
|
||||
<a href="#menu-content-layout-alignment" class="menu-nav-sub button button-small" tabindex="-1">Alignment</a>
|
||||
<a href="#menu-content-layout-padding" class="menu-nav-sub button button-small" tabindex="-1">Padding</a>
|
||||
<a href="#menu-content-layout-gutter" class="menu-nav-sub button button-small" tabindex="-1">Gutter</a>
|
||||
<a href="#menu-content-layout-page" class="menu-nav-sub button button-small" tabindex="-1">Page</a>
|
||||
@ -14,6 +14,7 @@
|
||||
<button class="control-menu-header menu-nav-tab button" tabindex="-1">Header</button>
|
||||
<div class="menu-nav-body menu-nav-body-header active">
|
||||
<a href="#menu-content-header-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a>
|
||||
<a href="#menu-content-header-alignment" class="menu-nav-sub button button-small" tabindex="-1">Alignment</a>
|
||||
<a href="#menu-content-header-order" class="menu-nav-sub button button-small" tabindex="-1">Order</a>
|
||||
<a href="#menu-content-header-greeting" class="menu-nav-sub button button-small" tabindex="-1">Greeting</a>
|
||||
<a href="#menu-content-header-transitional" class="menu-nav-sub button button-small" tabindex="-1">Transitional words</a>
|
||||
@ -28,6 +29,23 @@
|
||||
<a href="#menu-content-header-color" class="menu-nav-sub button button-small" tabindex="-1">Background colour</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-nav-item">
|
||||
<button class="control-menu-bookmarks menu-nav-tab button" tabindex="-1">Bookmarks</button>
|
||||
<div class="menu-nav-body menu-nav-body-bookmarks active">
|
||||
<a href="#menu-content-bookmarks-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a>
|
||||
<a href="#menu-content-bookmarks-alignment" class="menu-nav-sub button button-small" tabindex="-1">Alignment</a>
|
||||
<a href="#menu-content-bookmarks-bookmarks" class="menu-nav-sub button button-small" tabindex="-1">Bookmarks</a>
|
||||
<a href="#menu-content-bookmarks-content" class="menu-nav-sub button button-small" tabindex="-1">Content</a>
|
||||
<a href="#menu-content-bookmarks-letcon" class="menu-nav-sub button button-small" tabindex="-1">Letter/Icon</a>
|
||||
<a href="#menu-content-bookmarks-name" class="menu-nav-sub button button-small" tabindex="-1">Name</a>
|
||||
<a href="#menu-content-bookmarks-style" class="menu-nav-sub button button-small" tabindex="-1">Style</a>
|
||||
<a href="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Colour</a>
|
||||
<a href="#menu-content-bookmarks-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
|
||||
<a href="#menu-content-bookmarks-orientation" class="menu-nav-sub button button-small" tabindex="-1">Orientation</a>
|
||||
<a href="#menu-content-bookmarks-sort" class="menu-nav-sub button button-small" tabindex="-1">Sort</a>
|
||||
<a href="#menu-content-bookmarks-accent" class="menu-nav-sub button button-small" tabindex="-1">Accent override</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-nav-item">
|
||||
<button class="control-menu-groups menu-nav-tab button" tabindex="-1">Groups</button>
|
||||
<div class="menu-nav-body menu-nav-body-groups active">
|
||||
@ -38,22 +56,6 @@
|
||||
<a href="#menu-content-groups-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-nav-item">
|
||||
<button class="control-menu-bookmarks menu-nav-tab button" tabindex="-1">Bookmarks</button>
|
||||
<div class="menu-nav-body menu-nav-body-bookmarks active">
|
||||
<a href="#menu-content-bookmarks-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a>
|
||||
<a href="#menu-content-bookmarks-bookmarks" class="menu-nav-sub button button-small" tabindex="-1">Bookmarks</a>
|
||||
<a href="#menu-content-bookmarks-letcon" class="menu-nav-sub button button-small" tabindex="-1">Letter/Icon</a>
|
||||
<a href="#menu-content-bookmarks-name" class="menu-nav-sub button button-small" tabindex="-1">Name</a>
|
||||
<a href="#menu-content-bookmarks-alignment" class="menu-nav-sub button button-small" tabindex="-1">Alignment</a>
|
||||
<a href="#menu-content-bookmarks-style" class="menu-nav-sub button button-small" tabindex="-1">Style</a>
|
||||
<a href="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Colour</a>
|
||||
<a href="#menu-content-bookmarks-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
|
||||
<a href="#menu-content-bookmarks-orientation" class="menu-nav-sub button button-small" tabindex="-1">Orientation</a>
|
||||
<a href="#menu-content-bookmarks-sort" class="menu-nav-sub button button-small" tabindex="-1">Sort</a>
|
||||
<a href="#menu-content-bookmarks-accent" class="menu-nav-sub button button-small" tabindex="-1">Accent override</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-nav-item">
|
||||
<button class="control-menu-theme menu-nav-tab button" tabindex="-1">Theme</button>
|
||||
<div class="menu-nav-body menu-nav-body-theme active">
|
||||
|
||||
2074
src/js/control.js
2074
src/js/control.js
File diff suppressed because it is too large
Load Diff
@ -108,24 +108,29 @@ var header = (function() {
|
||||
var innerHeight = window.innerHeight;
|
||||
// if color show
|
||||
if (state.get.current().header.color.show) {
|
||||
// color always
|
||||
if (state.get.current().header.color.style == "scroll") {
|
||||
// check header position
|
||||
if (state.get.current().layout.order == "headerlink") {
|
||||
// check scroll position
|
||||
if (scrollTop > fontSize * 2 && headerRect.top == 0) {
|
||||
helper.addClass(html, "is-header-color-style-scrolling");
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-color-style-scrolling");
|
||||
};
|
||||
} else if (state.get.current().layout.order == "linkheader") {
|
||||
// check scroll position
|
||||
if (headerRect.bottom == innerHeight && (scrollTop + innerHeight) < ((scrollTop + layoutRect.bottom) - (fontSize * 2))) {
|
||||
helper.addClass(html, "is-header-color-style-scrolling");
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-color-style-scrolling");
|
||||
// if layout is vertical
|
||||
if (state.get.current().layout.direction == "vertical") {
|
||||
// color on scroll or always
|
||||
if (state.get.current().header.color.style == "scroll") {
|
||||
// check header position
|
||||
if (state.get.current().layout.order == "headerlink") {
|
||||
// check scroll position
|
||||
if (scrollTop > fontSize * 2 && headerRect.top == 0) {
|
||||
helper.addClass(html, "is-header-color-style-scrolling");
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-color-style-scrolling");
|
||||
};
|
||||
} else if (state.get.current().layout.order == "linkheader") {
|
||||
// check scroll position
|
||||
if (headerRect.bottom == innerHeight && (scrollTop + innerHeight) < ((scrollTop + layoutRect.bottom) - (fontSize * 2))) {
|
||||
helper.addClass(html, "is-header-color-style-scrolling");
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-color-style-scrolling");
|
||||
};
|
||||
};
|
||||
};
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-color-style-scrolling");
|
||||
};
|
||||
};
|
||||
}
|
||||
@ -298,7 +303,8 @@ var header = (function() {
|
||||
|
||||
render.item = {
|
||||
all: function() {
|
||||
var headerArea = helper.e(".header-area");
|
||||
var headerSection = helper.e(".header");
|
||||
var headerArea = helper.node("div|class:header-area");
|
||||
var headerItemGrid = helper.node("div|class:header-item-grid");
|
||||
state.get.current().header.order.forEach(function(arrayItem, index) {
|
||||
if ((arrayItem == "clock" && (state.get.current().header.clock.seconds.show || state.get.current().header.clock.minutes.show || state.get.current().header.clock.hours.show)) ||
|
||||
@ -309,11 +315,12 @@ var header = (function() {
|
||||
};
|
||||
});
|
||||
headerArea.appendChild(headerItemGrid);
|
||||
headerSection.appendChild(headerArea);
|
||||
},
|
||||
clear: function() {
|
||||
var headerArea = helper.e(".header-area");
|
||||
while (headerArea.lastChild) {
|
||||
headerArea.removeChild(headerArea.lastChild);
|
||||
var headerSection = helper.e(".header");
|
||||
while (headerSection.lastChild) {
|
||||
headerSection.removeChild(headerSection.lastChild);
|
||||
};
|
||||
},
|
||||
wrapper: function(name, item) {
|
||||
|
||||
@ -22,18 +22,6 @@ var layout = (function() {
|
||||
html.style.setProperty("--layout-size", state.get.current().layout.size);
|
||||
};
|
||||
|
||||
render.order = function() {
|
||||
var html = helper.e("html");
|
||||
var layout = helper.e(".layout");
|
||||
var header = helper.e(".header");
|
||||
var link = helper.e(".link");
|
||||
if (state.get.current().layout.order == "headerlink") {
|
||||
layout.insertBefore(header, link);
|
||||
} else if (state.get.current().layout.order == "linkheader") {
|
||||
layout.insertBefore(link, header);
|
||||
};
|
||||
};
|
||||
|
||||
render.title = function() {
|
||||
var title = helper.e("title");
|
||||
title.textContent = state.get.current().layout.title;
|
||||
@ -44,7 +32,6 @@ var layout = (function() {
|
||||
render.padding();
|
||||
render.gutter();
|
||||
render.size();
|
||||
render.order();
|
||||
render.title();
|
||||
};
|
||||
|
||||
|
||||
@ -242,7 +242,7 @@ var link = (function() {
|
||||
},
|
||||
remove: {
|
||||
group: function() {
|
||||
helper.eA(".link").forEach(function(arrayItem, index) {
|
||||
helper.eA(".link-area").forEach(function(arrayItem, index) {
|
||||
sortable(arrayItem)[0].removeEventListener("sortupdate", bind.sort.update.func.group, false);
|
||||
});
|
||||
},
|
||||
@ -254,7 +254,7 @@ var link = (function() {
|
||||
}
|
||||
},
|
||||
group: function() {
|
||||
sortable(".link", {
|
||||
sortable(".link-area", {
|
||||
items: ".group",
|
||||
handle: ".group-control-item-handle",
|
||||
orientation: "vertical",
|
||||
@ -262,7 +262,7 @@ var link = (function() {
|
||||
forcePlaceholderSize: true
|
||||
});
|
||||
bind.sort.update.remove.group();
|
||||
helper.eA(".link").forEach(function(arrayItem, index) {
|
||||
helper.eA(".link-area").forEach(function(arrayItem, index) {
|
||||
sortable(arrayItem)[0].addEventListener("sortupdate", bind.sort.update.func.group, false, event);
|
||||
});
|
||||
},
|
||||
@ -453,7 +453,7 @@ var link = (function() {
|
||||
|
||||
var groupOpenall = helper.node("div|class:group-openall form-group");
|
||||
|
||||
var groupOpenallItem = helper.node("button|class:button group-openall-item,tabindex:-1,title:Open all Bookmarks in this Group");
|
||||
var groupOpenallItem = helper.node("button|class:button group-openall-item,tabindex:1,title:Open all Bookmarks in this Group");
|
||||
var groupOpenallItemText = helper.node("span:Open all|class:button-text");
|
||||
groupOpenallItem.appendChild(groupOpenallItemText);
|
||||
groupOpenall.appendChild(groupOpenallItem);
|
||||
@ -1225,6 +1225,8 @@ var link = (function() {
|
||||
|
||||
render.all = function() {
|
||||
var linkSection = helper.e(".link");
|
||||
var linkArea = helper.node("div|class:link-area");
|
||||
linkSection.appendChild(linkArea);
|
||||
var make = {
|
||||
bookmarks: function() {
|
||||
bookmarks.get().forEach(function(arrayItem, index) {
|
||||
@ -1255,10 +1257,10 @@ var link = (function() {
|
||||
};
|
||||
if (state.get.current().search) {
|
||||
if (search.mod.searching.count.group(index) > 0) {
|
||||
linkSection.appendChild(group);
|
||||
linkArea.appendChild(group);
|
||||
};
|
||||
} else {
|
||||
linkSection.appendChild(group);
|
||||
linkArea.appendChild(group);
|
||||
};
|
||||
stagedGroup.reset();
|
||||
stagedLink.reset();
|
||||
@ -1266,10 +1268,10 @@ var link = (function() {
|
||||
},
|
||||
empty: {
|
||||
search: function() {
|
||||
linkSection.appendChild(render.empty.search());
|
||||
linkArea.appendChild(render.empty.search());
|
||||
},
|
||||
bookmarks: function() {
|
||||
linkSection.appendChild(render.empty.group());
|
||||
linkArea.appendChild(render.empty.group());
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -1832,6 +1834,7 @@ var link = (function() {
|
||||
} else {
|
||||
edit.mode.open();
|
||||
};
|
||||
render.group.tabindex();
|
||||
render.item.tabindex();
|
||||
}
|
||||
},
|
||||
|
||||
@ -165,6 +165,7 @@ var state = (function() {
|
||||
link: {
|
||||
area: {
|
||||
width: 100,
|
||||
direction: "ltr",
|
||||
justify: "center"
|
||||
},
|
||||
item: {
|
||||
@ -243,6 +244,7 @@ var state = (function() {
|
||||
layout: {
|
||||
alignment: "centercenter",
|
||||
order: "headerlink",
|
||||
direction: "vertical",
|
||||
padding: 4,
|
||||
gutter: 2,
|
||||
size: 1,
|
||||
|
||||
@ -875,11 +875,16 @@ var update = (function() {
|
||||
return data;
|
||||
},
|
||||
"4.44.0": function(data) {
|
||||
if (!"newTab" in state.get.current().link.item && "newTab" in state.get.current().link) {
|
||||
state.get.current().link.item.newTab = state.get.current().link.newTab;
|
||||
delete state.get.current().link.newTab;
|
||||
if (!"newTab" in data.state.link.item && "newTab" in data.state.link) {
|
||||
data.state.link.item.newTab = data.state.link.newTab;
|
||||
delete data.state.link.newTab;
|
||||
};
|
||||
return data;
|
||||
},
|
||||
"5.0.0": function(data) {
|
||||
data.state.layout.direction = "vertical";
|
||||
data.state.link.area.direction = "ltr";
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "4.44.2";
|
||||
var current = "5.0.0";
|
||||
|
||||
var name = "Naughty Goose";
|
||||
var name = "Zonked Tarsier";
|
||||
|
||||
var compare = function(a, b) {
|
||||
var pa = a.split(".");
|
||||
|
||||
@ -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": "4.44.2",
|
||||
"version": "5.0.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user