[bug] fix sorting controls when a group is empty

This commit is contained in:
zombieFox 2019-11-16 23:40:27 +00:00
parent 038e78e7bc
commit 4e08836075
4 changed files with 253 additions and 231 deletions

View File

@ -312,8 +312,7 @@ input[type="radio"] {
margin-bottom: 0;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
left: 0;
opacity: 0;
display: block;
font-size: 1em;

View File

@ -113,7 +113,6 @@
}
.group-body {
font-size: calc(var(--link-item-size) * 1);
background-color: transparent;
position: relative;
min-height: var(--link-item-height);

View File

@ -39,6 +39,52 @@
margin-bottom: 0;
}
.link-sort-placeholder {
background-color: rgba(var(--theme-accent), 0.2);
border-radius: var(--theme-radius);
width: 100%;
height: 100%;
position: relative;
box-shadow: var(--edge-shadow);
pointer-events: none;
}
.link-item.link-empty {
background-color: rgba(var(--theme-gray-04), 0.2);
border-radius: var(--theme-radius);
height: inherit;
text-align: center;
display: flex;
grid-column-start: 1;
grid-column-end: -1;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.is-link-style-block .link-item.link-empty {
flex-direction: column;
}
.is-link-style-list .link-item.link-empty {
flex-direction: row;
}
.is-link-style-list .link-item.link-empty>*:not(:only-child),
.is-link-style-list .link-item.link-empty>*:not(:last-child) {
margin-right: 0.5em;
}
.is-link-item-hoverscale .link-item.link-empty:hover {
transform: scale(1);
}
.is-sorting-link .header {
display: inline;
}
/* link item */
.link-item {
font-size: 1em;
position: relative;
@ -67,16 +113,7 @@
transition: none;
}
.link-placeholder {
background-color: rgba(var(--theme-accent), 0.2);
border-radius: var(--theme-radius);
width: 100%;
height: 100%;
position: relative;
box-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1);
pointer-events: none;
}
/* link panel front */
.link-panel-front {
background-color: rgb(var(--theme-gray-02));
border-radius: var(--theme-radius);
@ -245,6 +282,156 @@
border-bottom-right-radius: 0.25em;
}
.is-link-edit .link-panel-front,
.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));
}
.is-link-orientation-top.is-link-edit .link-panel-front,
.is-link-orientation-top.is-link-edit .link-item:hover .link-panel-front,
.is-link-orientation-top.is-link-edit .link-item:focus .link-panel-front {
border-top-left-radius: 0.25em;
border-top-right-radius: 0.25em;
}
.is-link-orientation-bottom.is-link-edit .link-panel-front,
.is-link-orientation-bottom.is-link-edit .link-item:hover .link-panel-front,
.is-link-orientation-bottom.is-link-edit .link-item:focus .link-panel-front {
border-bottom-left-radius: 0.25em;
border-bottom-right-radius: 0.25em;
}
.is-link-item-shadow-show.is-link-edit .link-panel-front,
.is-link-item-shadow-show.is-link-edit .link-item:hover .link-panel-front,
.is-link-item-shadow-show.is-link-edit .link-item:focus .link-panel-front {
box-shadow: var(--layout-shadow-medium);
}
/* link display */
.link-display {
font-size: 1em;
display: none;
transition: font-size var(--layout-timing-extra-fast), margin var(--layout-timing-extra-fast);
}
.is-link-edit.is-link-style-list .link-display {
font-size: 0.5em;
}
.is-link-edit.is-link-style-block .link-display {
font-size: 0.6em;
}
.is-link-display-item-show .link-display {
display: flex;
}
.link-display-letter,
.link-display-icon {
margin: 0;
text-align: center;
}
.link-display-letter {
padding-top: 8%;
font-family: var(--font-fjalla);
color: rgb(var(--theme-accent));
line-height: 1;
white-space: nowrap;
transition: color var(--layout-timing-extra-fast);
}
.link-display-icon {
color: rgb(var(--theme-accent));
transition: color var(--layout-timing-extra-fast);
}
.is-link-style-block .link-display-letter,
.is-link-style-list .link-display-letter {
font-size: var(--link-item-display-letter-size);
}
.is-link-style-block .link-display-icon,
.is-link-style-list .link-display-icon {
font-size: var(--link-item-display-icon-size);
}
.is-link-style-block.is-link-item-name-show.is-link-display-item-show .link-panel-front>*:not(:only-child):not(:last-child) {
margin-bottom: 0.5em;
}
.is-link-style-list.is-link-item-name-show.is-link-display-item-show .link-panel-front>*:not(:only-child):not(:last-child) {
margin-right: 0.5em
}
.link-item:hover .link-display-letter,
.link-item:focus .link-display-letter,
.link-item:hover .link-display-icon,
.link-item:focus .link-display-icon {
color: rgb(var(--theme-style-text));
}
.link-panel-front:focus .link-display-letter,
.link-panel-front:focus .link-display-icon {
color: rgb(var(--theme-style-text));
}
/* link name */
.link-name {
margin: 0;
font-size: var(--link-item-name-size);
font-family: var(--font-regular);
color: rgb(var(--theme-gray-12));
display: none;
transition: color var(--layout-timing-extra-fast), font-size var(--layout-timing-extra-fast);
}
.is-link-edit .link-name {
font-size: 0.6em;
}
.link-name,
.link-name:not(:last-child) {
margin-bottom: 0;
}
.is-link-display-alignment-topleft .link-name,
.is-link-display-alignment-centerleft .link-name,
.is-link-display-alignment-bottomleft .link-name {
text-align: left;
}
.is-link-display-alignment-topcenter .link-name,
.is-link-display-alignment-centercenter .link-name,
.is-link-display-alignment-bottomcenter .link-name {
text-align: center;
}
.is-link-display-alignment-topright .link-name,
.is-link-display-alignment-centerright .link-name,
.is-link-display-alignment-bottomright .link-name {
text-align: right;
}
.is-link-item-name-show .link-name {
display: block;
}
.link-item:hover .link-name,
.link-item:focus .link-name {
color: rgb(var(--theme-style-text));
}
.link-panel-front:focus .link-name {
color: rgb(var(--theme-style-text));
}
.is-link-style-list .link-name {
white-space: nowrap;
}
/* link panel back */
.link-panel-back {
background-color: rgb(var(--theme-accent));
border-radius: var(--theme-radius);
@ -320,17 +507,12 @@
transition: all var(--layout-timing-extra-fast);
}
.is-link-orientation-top.is-link-style-list .link-control,
.is-link-orientation-bottom.is-link-style-list .link-control {
flex-wrap: nowrap;
.is-link-edit .link-control {
height: var(--link-item-edit-height);
}
.is-link-orientation-top.is-link-style-block .link-control {
flex-wrap: wrap-reverse;
}
.is-link-orientation-bottom.is-link-style-block .link-control {
flex-wrap: wrap;
.is-link-edit .link-control-item {
/* pointer-events: all; */
}
.link-control-item {
@ -355,11 +537,11 @@
flex-basis: 30%;
}
.link-url-text-dark .link-control-item {
.link-text-dark .link-control-item {
color: rgb(var(--theme-black));
}
.link-url-text-light .link-control-item {
.link-text-light .link-control-item {
color: rgb(var(--theme-white));
}
@ -395,28 +577,41 @@
border-bottom-right-radius: var(--theme-radius);
}
.link-url-text-dark .link-control-item:focus,
.link-url-text-dark .link-control-item:hover {
.link-text-dark .link-control-item:focus,
.link-text-dark .link-control-item:hover {
color: rgb(var(--theme-black));
background-color: rgba(0, 0, 0, 0.2);
}
.link-url-text-light .link-control-item:focus,
.link-url-text-light .link-control-item:hover {
.link-text-light .link-control-item:focus,
.link-text-light .link-control-item:hover {
color: rgb(var(--theme-white));
background-color: rgba(255, 255, 255, 0.2);
}
.link-url-text-dark .link-control-item:active {
.link-text-dark .link-control-item:active {
color: rgb(var(--theme-black));
background-color: rgba(0, 0, 0, 0.1);
}
.link-url-text-light .link-control-item:active {
.link-text-light .link-control-item:active {
color: rgb(var(--theme-white));
background-color: rgba(255, 255, 255, 0.1);
}
.is-link-orientation-top.is-link-style-list .link-control,
.is-link-orientation-bottom.is-link-style-list .link-control {
flex-wrap: nowrap;
}
.is-link-orientation-top.is-link-style-block .link-control {
flex-wrap: wrap-reverse;
}
.is-link-orientation-bottom.is-link-style-block .link-control {
flex-wrap: wrap;
}
.link-url {
padding: 0 1em;
width: 100%;
@ -464,196 +659,25 @@
text-overflow: ellipsis;
}
.link-url-text-dark .link-url-text {
.link-text-dark .link-url-text {
color: rgb(var(--theme-black));
}
.link-url-text-light .link-url-text {
.link-text-light .link-url-text {
color: rgb(var(--theme-white));
}
.link-display {
font-size: 1em;
display: none;
transition: font-size var(--layout-timing-extra-fast), margin var(--layout-timing-extra-fast);
}
.is-link-edit.is-link-style-list .link-display {
font-size: 0.5em;
}
.is-link-edit.is-link-style-block .link-display {
font-size: 0.6em;
}
.is-link-display-item-show .link-display {
display: flex;
}
.link-display-letter,
.link-display-icon {
margin: 0;
text-align: center;
}
.link-display-letter {
padding-top: 8%;
font-family: var(--font-fjalla);
color: rgb(var(--theme-accent));
line-height: 1;
white-space: nowrap;
transition: color var(--layout-timing-extra-fast);
}
.link-display-icon {
color: rgb(var(--theme-accent));
transition: color var(--layout-timing-extra-fast);
}
.is-link-style-block .link-display-letter,
.is-link-style-list .link-display-letter {
font-size: var(--link-item-display-letter-size);
}
.is-link-style-block .link-display-icon,
.is-link-style-list .link-display-icon {
font-size: var(--link-item-display-icon-size);
}
.is-link-style-block.is-link-item-name-show.is-link-display-item-show .link-panel-front>*:not(:only-child):not(:last-child) {
margin-bottom: 0.5em;
}
.is-link-style-list.is-link-item-name-show.is-link-display-item-show .link-panel-front>*:not(:only-child):not(:last-child) {
margin-right: 0.5em
}
.link-item:hover .link-display-letter,
.link-item:focus .link-display-letter,
.link-item:hover .link-display-icon,
.link-item:focus .link-display-icon {
color: rgb(var(--theme-style-text));
}
.link-panel-front:focus .link-display-letter,
.link-panel-front:focus .link-display-icon {
color: rgb(var(--theme-style-text));
}
.link-name {
margin: 0;
font-size: var(--link-item-name-size);
font-family: var(--font-regular);
color: rgb(var(--theme-gray-12));
display: none;
transition: color var(--layout-timing-extra-fast), font-size var(--layout-timing-extra-fast);
}
.is-link-edit .link-name {
font-size: 0.6em;
}
.link-name,
.link-name:not(:last-child) {
margin-bottom: 0;
}
.is-link-display-alignment-topleft .link-name,
.is-link-display-alignment-centerleft .link-name,
.is-link-display-alignment-bottomleft .link-name {
text-align: left;
}
.is-link-display-alignment-topcenter .link-name,
.is-link-display-alignment-centercenter .link-name,
.is-link-display-alignment-bottomcenter .link-name {
text-align: center;
}
.is-link-display-alignment-topright .link-name,
.is-link-display-alignment-centerright .link-name,
.is-link-display-alignment-bottomright .link-name {
text-align: right;
}
.is-link-item-name-show .link-name {
display: block;
}
.link-item:hover .link-name,
.link-item:focus .link-name {
color: rgb(var(--theme-style-text));
}
.link-panel-front:focus .link-name {
color: rgb(var(--theme-style-text));
}
.link-empty {
background-color: rgba(var(--theme-gray-04), 0.2);
padding: 1em 0;
border-radius: var(--theme-radius);
grid-column-start: 1;
grid-column-end: -1;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.is-sorting-link .link-empty {
display: none;
}
.is-link-style-list .link-name {
white-space: nowrap;
}
.is-link-edit .link-panel-front,
.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));
}
.is-link-orientation-top.is-link-edit .link-panel-front,
.is-link-orientation-top.is-link-edit .link-item:hover .link-panel-front,
.is-link-orientation-top.is-link-edit .link-item:focus .link-panel-front {
border-top-left-radius: 0.25em;
border-top-right-radius: 0.25em;
}
.is-link-orientation-bottom.is-link-edit .link-panel-front,
.is-link-orientation-bottom.is-link-edit .link-item:hover .link-panel-front,
.is-link-orientation-bottom.is-link-edit .link-item:focus .link-panel-front {
border-bottom-left-radius: 0.25em;
border-bottom-right-radius: 0.25em;
}
.is-link-item-shadow-show.is-link-edit .link-panel-front,
.is-link-item-shadow-show.is-link-edit .link-item:hover .link-panel-front,
.is-link-item-shadow-show.is-link-edit .link-item:focus .link-panel-front {
box-shadow: var(--layout-shadow-medium);
}
.is-link-edit.is-link-item-url-show .link-item:focus .link-panel-front,
.is-link-edit.is-link-item-url-show .link-item:focus-within .link-panel-front,
.is-link-edit.is-link-item-url-show .link-item:hover .link-panel-front {
height: calc(100% - var(--link-item-edit-height));
}
.is-link-edit .link-control {
height: var(--link-item-edit-height);
}
.is-link-edit .link-item:hover .link-url,
.is-link-edit .link-item:focus .link-url {
height: 0;
}
.is-link-edit .link-control-item {
pointer-events: all;
}
.link-form-text-icon {
position: relative;
}

View File

@ -234,7 +234,7 @@ var link = (function() {
items: ".group",
handle: ".group-control-item-handle",
orientation: "vertical",
placeholder: helper.node("div|class:link-placeholder"),
placeholder: helper.node("div|class:link-sort-placeholder"),
forcePlaceholderSize: true
});
bind.sort.update.remove.group();
@ -246,20 +246,12 @@ var link = (function() {
sortable(".group-body", {
items: ".link-item",
handle: ".link-control-item-handle",
acceptFrom: '.group-body',
placeholder: helper.node("div|class:link-placeholder"),
acceptFrom: ".group-body",
placeholder: helper.node("div|class:link-sort-placeholder"),
forcePlaceholderSize: true
});
bind.sort.update.remove.item();
helper.eA(".group-body").forEach(function(arrayItem, index) {
sortable(arrayItem)[0].addEventListener("sortstart", function() {
var html = helper.e("html");
helper.addClass(html, "is-sorting-link");
}, false);
sortable(arrayItem)[0].addEventListener("sortstop", function() {
var html = helper.e("html");
helper.removeClass(html, "is-sorting-link");
}, false);
sortable(arrayItem)[0].addEventListener("sortupdate", bind.sort.update.func.item, false, event);
});
}
@ -533,15 +525,15 @@ var link = (function() {
value: "--theme-accent: " + stagedLink.link.accent.color.r + ", " + stagedLink.link.accent.color.g + ", " + stagedLink.link.accent.color.b
});
if (invert(stagedLink.link.accent.color, true) == "#000000") {
linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-url-text-dark";
linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-text-dark";
} else if (invert(stagedLink.link.accent.color, true) == "#ffffff") {
linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-url-text-light";
linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-text-light";
};
} else {
if (invert(state.get().theme.accent.current, true) == "#000000") {
linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-url-text-dark";
linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-text-dark";
} else if (invert(state.get().theme.accent.current, true) == "#ffffff") {
linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-url-text-light";
linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-text-light";
};
};
var linkItem = helper.makeNode(linkItemOptions);
@ -1138,12 +1130,14 @@ var link = (function() {
group: function() {
var group = helper.node("div|class:group");
var groupBody = helper.node("div|class:group-body");
var linkEmpty = helper.node("div|class:link-empty");
var para1 = helper.node("p:No Groups or Bookmarks");
var buttonWrap = helper.node("div|class:button-wrap mb-0");
var linkEmpty = helper.node("div|class:link-empty link-item");
var paraWrap = helper.node("div|class:p-wrap");
var para = helper.node("p:No Groups or Bookmarks|class:pb-0");
var buttonWrap = helper.node("div|class:button-wrap form-inline mb-0 mr-0");
var addButton = helper.node("button:Add a Bookmark|class:button mb-0,type:button,tabindex:1");
buttonWrap.appendChild(addButton);
linkEmpty.appendChild(para1);
paraWrap.appendChild(para);
linkEmpty.appendChild(paraWrap);
linkEmpty.appendChild(buttonWrap);
groupBody.appendChild(linkEmpty);
group.appendChild(groupBody);
@ -1153,12 +1147,14 @@ var link = (function() {
return group;
},
item: function() {
var linkEmpty = helper.node("div|class:link-empty");
var para1 = helper.node("p:Empty Group");
var buttonWrap = helper.node("div|class:button-wrap mb-0");
var linkEmpty = helper.node("div|class:link-empty link-item");
var paraWrap = helper.node("div|class:p-wrap");
var para = helper.node("p:Empty Group|class:pb-0");
var buttonWrap = helper.node("div|class:button-wrap form-inline mb-0 mr-0");
var addButton = helper.node("button:Add a Bookmark|class:button mb-0,type:button,tabindex:1");
buttonWrap.appendChild(addButton);
linkEmpty.appendChild(para1);
paraWrap.appendChild(para);
linkEmpty.appendChild(paraWrap);
linkEmpty.appendChild(buttonWrap);
addButton.addEventListener("click", function(event) {
link.add.item.open();
@ -1168,11 +1164,15 @@ var link = (function() {
search: function() {
var group = helper.node("div|class:group");
var groupBody = helper.node("div|class:group-body");
var linkEmpty = helper.node("div|class:link-empty");
var para1 = helper.node("p:No matching bookmarks found");
var para2 = helper.node("p:\"Enter\" to Search " + state.get().header.search.engine[state.get().header.search.engine.selected].name + "|class:small muted");
linkEmpty.appendChild(para1);
linkEmpty.appendChild(para2);
var linkEmpty = helper.node("div|class:link-empty link-item");
var paraWrap1 = helper.node("div|class:p-wrap");
var paraWrap2 = helper.node("div|class:p-wrap");
var para1 = helper.node("p:No bookmarks matching \"" + helper.e(".header-search-input").value + "\" found.|class:mb-0");
var para2 = helper.node("p:\"Enter\" to Search " + state.get().header.search.engine[state.get().header.search.engine.selected].name + ".|class:small muted mb-0");
paraWrap1.appendChild(para1);
paraWrap2.appendChild(para2);
linkEmpty.appendChild(paraWrap1);
linkEmpty.appendChild(paraWrap2);
groupBody.appendChild(linkEmpty);
group.appendChild(groupBody);
return group;