[feature] add controls for tall and wide link tiles
This commit is contained in:
Kombie
GitHub
parent
b80345e4ae
commit
2aa076990e
|
|
@ -186,11 +186,11 @@
|
|||
background-color: transparent;
|
||||
font-size: var(--link-item-size);
|
||||
position: relative;
|
||||
min-height: var(--link-item-height);
|
||||
display: grid;
|
||||
grid-auto-rows: 1fr;
|
||||
grid-auto-rows: var(--link-item-height);
|
||||
grid-gap: calc(var(--layout-space) * var(--layout-gutter));
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
|
||||
grid-auto-flow: dense;
|
||||
}
|
||||
|
||||
.is-link-area-direction-ltr .group-body {
|
||||
|
|
|
|||
|
|
@ -93,6 +93,23 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
|
||||
.is-link-breakpoint-md .link-sort-placeholder-wide,
|
||||
.is-link-breakpoint-lg .link-sort-placeholder-wide,
|
||||
.is-link-breakpoint-xl .link-sort-placeholder-wide,
|
||||
.is-link-breakpoint-xxl .link-sort-placeholder-wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.is-link-breakpoint-md .link-sort-placeholder-tall,
|
||||
.is-link-breakpoint-lg .link-sort-placeholder-tall,
|
||||
.is-link-breakpoint-xl .link-sort-placeholder-tall,
|
||||
.is-link-breakpoint-xxl .link-sort-placeholder-tall {
|
||||
grid-row: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.link-item.link-empty {
|
||||
background-color: rgba(var(--theme-color-04), 0.2);
|
||||
padding: 0.5em 1em;
|
||||
|
|
@ -137,7 +154,8 @@
|
|||
.link-item {
|
||||
font-size: 1em;
|
||||
position: relative;
|
||||
height: var(--link-item-height);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
transform: scale(1);
|
||||
transition: transform var(--layout-timing-extra-fast);
|
||||
|
|
@ -167,6 +185,23 @@
|
|||
transition: none;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
|
||||
.is-link-breakpoint-md .link-item-wide,
|
||||
.is-link-breakpoint-lg .link-item-wide,
|
||||
.is-link-breakpoint-xl .link-item-wide,
|
||||
.is-link-breakpoint-xxl .link-item-wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.is-link-breakpoint-md .link-item-tall,
|
||||
.is-link-breakpoint-lg .link-item-tall,
|
||||
.is-link-breakpoint-xl .link-item-tall,
|
||||
.is-link-breakpoint-xxl .link-item-tall {
|
||||
grid-row: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* link panel front */
|
||||
.link-panel-front {
|
||||
background-color: rgba(var(--link-item-color), var(--link-item-color-opacity));
|
||||
|
|
@ -953,6 +988,36 @@
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
|
||||
.is-link-orientation-top.is-link-style-block .link-item-wide,
|
||||
.is-link-orientation-bottom.is-link-style-block .link-item-wide {
|
||||
--link-item-edit-height: 2.5em;
|
||||
}
|
||||
|
||||
.is-link-orientation-top.is-link-style-block .link-item-wide .link-control,
|
||||
.is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control-item:nth-child(1) {
|
||||
border-bottom-left-radius: var(--theme-radius);
|
||||
}
|
||||
|
||||
.is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control-item:nth-child(4) {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.is-link-orientation-top.is-link-style-block .link-item-wide .link-control-item:nth-child(1) {
|
||||
border-top-left-radius: var(--theme-radius);
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.is-link-orientation-top.is-link-style-block .link-item-wide .link-control-item:nth-child(4) {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.link-url {
|
||||
padding: 0 1em;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -406,16 +406,16 @@
|
|||
/* link */
|
||||
--link-item-width: 11em;
|
||||
--link-item-height: 10em;
|
||||
--link-item-url-height: 20%;
|
||||
--link-item-edit-height: 50%;
|
||||
--link-item-url-height: 2.25em;
|
||||
--link-item-edit-height: 5em;
|
||||
}
|
||||
|
||||
.is-link-style-list {
|
||||
/* link */
|
||||
--link-item-width: 20em;
|
||||
--link-item-height: 4em;
|
||||
--link-item-url-height: 30%;
|
||||
--link-item-edit-height: 50%;
|
||||
--link-item-url-height: 1.5em;
|
||||
--link-item-edit-height: 2em;
|
||||
}
|
||||
|
||||
.is-link-item-color-opacity {
|
||||
|
|
|
|||
|
|
@ -50,6 +50,8 @@ var bookmarks = (function() {
|
|||
}
|
||||
},
|
||||
image: "",
|
||||
wide: false,
|
||||
tall: false,
|
||||
searchMatch: false,
|
||||
timeStamp: 1546453104010
|
||||
}, {
|
||||
|
|
@ -92,6 +94,8 @@ var bookmarks = (function() {
|
|||
}
|
||||
},
|
||||
image: "",
|
||||
wide: false,
|
||||
tall: false,
|
||||
searchMatch: false,
|
||||
timeStamp: 1546453107633
|
||||
}, {
|
||||
|
|
@ -134,6 +138,8 @@ var bookmarks = (function() {
|
|||
}
|
||||
},
|
||||
image: "",
|
||||
wide: false,
|
||||
tall: false,
|
||||
searchMatch: false,
|
||||
timeStamp: 1546453110265
|
||||
}, {
|
||||
|
|
@ -176,6 +182,8 @@ var bookmarks = (function() {
|
|||
}
|
||||
},
|
||||
image: "",
|
||||
wide: false,
|
||||
tall: false,
|
||||
searchMatch: false,
|
||||
timeStamp: 1546453111491
|
||||
}, {
|
||||
|
|
@ -218,6 +226,8 @@ var bookmarks = (function() {
|
|||
}
|
||||
},
|
||||
image: "",
|
||||
wide: false,
|
||||
tall: false,
|
||||
searchMatch: false,
|
||||
timeStamp: 1546453104460
|
||||
}, {
|
||||
|
|
@ -260,6 +270,8 @@ var bookmarks = (function() {
|
|||
}
|
||||
},
|
||||
image: "",
|
||||
wide: false,
|
||||
tall: false,
|
||||
searchMatch: false,
|
||||
timeStamp: 1546453111953
|
||||
}]
|
||||
|
|
@ -311,6 +323,8 @@ var bookmarks = (function() {
|
|||
}
|
||||
},
|
||||
image: "",
|
||||
wide: false,
|
||||
tall: false,
|
||||
searchMatch: false,
|
||||
timeStamp: 1546453101749
|
||||
}, {
|
||||
|
|
@ -353,6 +367,8 @@ var bookmarks = (function() {
|
|||
}
|
||||
},
|
||||
image: "",
|
||||
wide: false,
|
||||
tall: false,
|
||||
searchMatch: false,
|
||||
timeStamp: 1546453108926
|
||||
}]
|
||||
|
|
|
|||
167
src/js/link.js
167
src/js/link.js
|
|
@ -96,6 +96,8 @@ var link = (function() {
|
|||
}
|
||||
},
|
||||
image: null,
|
||||
wide: null,
|
||||
tall: null,
|
||||
timeStamp: null,
|
||||
searchMatch: null
|
||||
}
|
||||
|
|
@ -133,6 +135,8 @@ var link = (function() {
|
|||
stagedLink.link.color.rgb.g = 0;
|
||||
stagedLink.link.color.rgb.b = 0;
|
||||
stagedLink.link.image = "";
|
||||
stagedLink.link.wide = false;
|
||||
stagedLink.link.tall = false;
|
||||
stagedLink.link.searchMatch = false;
|
||||
};
|
||||
|
||||
|
|
@ -168,8 +172,10 @@ var link = (function() {
|
|||
stagedLink.link.color.rgb.g = null;
|
||||
stagedLink.link.color.rgb.b = null;
|
||||
stagedLink.link.image = null;
|
||||
stagedLink.link.timeStamp = null;
|
||||
stagedLink.link.wide = null;
|
||||
stagedLink.link.tall = null;
|
||||
stagedLink.link.searchMatch = null;
|
||||
stagedLink.link.timeStamp = null;
|
||||
};
|
||||
|
||||
var mod = {};
|
||||
|
|
@ -485,7 +491,7 @@ var link = (function() {
|
|||
stagedLink.position.origin.group = Array.from(helper.getClosest(event.detail.origin.container, ".group").parentNode.children).indexOf(helper.getClosest(event.detail.origin.container, ".group"));
|
||||
stagedLink.position.origin.item = event.detail.origin.index;
|
||||
stagedLink.position.destination.group = Array.from(helper.getClosest(event.detail.destination.container, ".group").parentNode.children).indexOf(helper.getClosest(event.detail.destination.container, ".group"));
|
||||
stagedLink.position.destination.item = event.detail.destination.index
|
||||
stagedLink.position.destination.item = event.detail.destination.index;
|
||||
bookmarks.mod.move.link(stagedLink);
|
||||
data.save();
|
||||
groupAndItems();
|
||||
|
|
@ -518,20 +524,72 @@ var link = (function() {
|
|||
});
|
||||
},
|
||||
item: function() {
|
||||
var placeholder = helper.node("div|class:link-sort-placeholder");
|
||||
sortable(".group-body", {
|
||||
items: ".link-item",
|
||||
handle: ".link-control-item-handle",
|
||||
acceptFrom: ".group-body",
|
||||
placeholder: helper.node("div|class:link-sort-placeholder"),
|
||||
forcePlaceholderSize: true
|
||||
placeholder: placeholder
|
||||
});
|
||||
bind.sort.update.remove.item();
|
||||
helper.eA(".group-body").forEach(function(arrayItem, index) {
|
||||
sortable(arrayItem)[0].addEventListener("sortupdate", bind.sort.update.func.item, false, event);
|
||||
});
|
||||
helper.eA(".group-body").forEach(function(arrayItem, index) {
|
||||
sortable(arrayItem)[0].addEventListener("sortstart", function() {
|
||||
var groupIndex = Array.from(helper.getClosest(event.detail.origin.container, ".group").parentNode.children).indexOf(helper.getClosest(event.detail.origin.container, ".group"));
|
||||
var itemIndex = event.detail.origin.index;
|
||||
var link = bookmarks.get()[groupIndex].items[itemIndex];
|
||||
if (link.wide) {
|
||||
helper.addClass(placeholder, "link-sort-placeholder-wide");
|
||||
};
|
||||
if (link.tall) {
|
||||
helper.addClass(placeholder, "link-sort-placeholder-tall");
|
||||
};
|
||||
}, false, event);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
bind.resize = new ResizeObserver(function(elements) {
|
||||
var linkArea = helper.e(".link-area");
|
||||
var groupBody = helper.e(".group-body");
|
||||
var linkItem = helper.e(".link-item");
|
||||
var size = {
|
||||
sm: 550,
|
||||
md: 700,
|
||||
lg: 900,
|
||||
xl: 1100,
|
||||
xxl: 1600
|
||||
};
|
||||
if (linkArea) {
|
||||
if (groupBody && linkItem) {
|
||||
elements.forEach(function(entry) {
|
||||
var breakpoint;
|
||||
if (entry.contentRect.width <= size.sm) {
|
||||
breakpoint = "xs";
|
||||
} else if (entry.contentRect.width > size.sm && entry.contentRect.width <= size.md) {
|
||||
breakpoint = "sm";
|
||||
} else if (entry.contentRect.width > size.md && entry.contentRect.width <= size.lg) {
|
||||
breakpoint = "md";
|
||||
} else if (entry.contentRect.width > size.lg && entry.contentRect.width <= size.xl) {
|
||||
breakpoint = "lg";
|
||||
} else if (entry.contentRect.width > size.xl && entry.contentRect.width <= size.xxl) {
|
||||
breakpoint = "xl";
|
||||
} else if (entry.contentRect.width > size.xxl) {
|
||||
breakpoint = "xxl";
|
||||
};
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "link.breakpoint",
|
||||
newValue: breakpoint
|
||||
});
|
||||
render.breakpoint.update();
|
||||
});
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
var render = {};
|
||||
|
||||
render.move = {
|
||||
|
|
@ -748,7 +806,7 @@ var link = (function() {
|
|||
var groupFormInputNameShowLabel = helper.node("label|for:group-form-input-name-show");
|
||||
var groupFormInputNameShowText = helper.node("span:Show Group name");
|
||||
var groupFormInputNameShowIcon = helper.node("span|class:label-icon");
|
||||
var groupFormInputNameShowInput = helper.node("input|type:checkbox,class:group-form-input-name-show,id:group-form-input-name-show,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,checked");
|
||||
var groupFormInputNameShowInput = helper.node("input|type:checkbox,class:group-form-input-name-show,id:group-form-input-name-show,tabindex:1,checked");
|
||||
var groupFormInputNameIndentWrap = helper.node("div|class:form-wrap");
|
||||
var groupFormInputNameIndent = helper.node("div|class:form-indent");
|
||||
var groupFormInputNameWrap = helper.node("div|class:form-wrap");
|
||||
|
|
@ -761,7 +819,7 @@ var link = (function() {
|
|||
var groupFormInputOpenallLabel = helper.node("label|for:group-form-input-openall");
|
||||
var groupFormInputOpenallLabelText = helper.node("span:Show Open all");
|
||||
var groupFormInputOpenallLabelIcon = helper.node("span|class:label-icon");
|
||||
var groupFormOpenAllInput = helper.node("input|type:checkbox,class:group-form-input-openall,id:group-form-input-openall,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,checked");
|
||||
var groupFormOpenAllInput = helper.node("input|type:checkbox,class:group-form-input-openall,id:group-form-input-openall,tabindex:1,checked");
|
||||
var groupFormOpenAllInputHelper = helper.node("div|class:form-helper");
|
||||
var groupFormOpenAllInputHelperItem = helper.node("p:Open all button will appear if there is at least one Bookmark in this Group.|class:link-form-input-icon-helper form-helper-item");
|
||||
|
||||
|
|
@ -926,6 +984,12 @@ var link = (function() {
|
|||
value: "link-item"
|
||||
}]
|
||||
};
|
||||
if (stagedLink.link.wide) {
|
||||
linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-item-wide";
|
||||
};
|
||||
if (stagedLink.link.tall) {
|
||||
linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-item-tall";
|
||||
};
|
||||
if (stagedLink.link.accent.by == "custom" || stagedLink.link.color.by == "custom" || helper.checkIfValidString(stagedLink.link.image)) {
|
||||
linkItemOptions.attr.push({
|
||||
key: "style",
|
||||
|
|
@ -1361,6 +1425,24 @@ var link = (function() {
|
|||
}]
|
||||
});
|
||||
|
||||
// wide
|
||||
var wideInputWrap = helper.node("div|class:form-wrap");
|
||||
var wideLabel = helper.node("label|for:link-form-wide");
|
||||
var wideLabelBlock = helper.node("span|class:label-block");
|
||||
var wideLabelBlockItem1 = helper.node("span:Wide tile|class:label-block-item");
|
||||
var wideLabelBlockItem2 = helper.node("span:Bookmark tile to span across two columns.|class:label-block-item small muted");
|
||||
var wideLabelIcon = helper.node("span|class:label-icon");
|
||||
var wideInput = helper.node("input|type:checkbox,class:link-form-wide,id:link-form-wide,tabindex:1");
|
||||
|
||||
// tall
|
||||
var tallInputWrap = helper.node("div|class:form-wrap");
|
||||
var tallLabel = helper.node("label|for:link-form-tall");
|
||||
var tallLabelBlock = helper.node("span|class:label-block");
|
||||
var tallLabelBlockItem1 = helper.node("span:Tall tile|class:label-block-item");
|
||||
var tallLabelBlockItem2 = helper.node("span:Bookmark tile to span across two rows.|class:label-block-item small muted");
|
||||
var tallLabelIcon = helper.node("span|class:label-icon");
|
||||
var tallInput = helper.node("input|type:checkbox,class:link-form-tall,id:link-form-tall,tabindex:1");
|
||||
|
||||
groupExistingRadioWrap.appendChild(groupExistingRadio);
|
||||
groupExistingLable.appendChild(groupExistingLableIcon);
|
||||
groupExistingLable.appendChild(groupExistingLableText);
|
||||
|
|
@ -1584,6 +1666,24 @@ var link = (function() {
|
|||
imageInputHelper.appendChild(imageInputHelperItem);
|
||||
fieldset.appendChild(imageInputHelper);
|
||||
|
||||
fieldset.appendChild(helper.node("hr"));
|
||||
|
||||
wideInputWrap.appendChild(wideInput);
|
||||
wideLabel.appendChild(wideLabelIcon);
|
||||
wideLabelBlock.appendChild(wideLabelBlockItem1);
|
||||
wideLabelBlock.appendChild(wideLabelBlockItem2);
|
||||
wideLabel.appendChild(wideLabelBlock);
|
||||
wideInputWrap.appendChild(wideLabel);
|
||||
fieldset.appendChild(wideInputWrap);
|
||||
|
||||
tallInputWrap.appendChild(tallInput);
|
||||
tallLabel.appendChild(tallLabelIcon);
|
||||
tallLabelBlock.appendChild(tallLabelBlockItem1);
|
||||
tallLabelBlock.appendChild(tallLabelBlockItem2);
|
||||
tallLabel.appendChild(tallLabelBlock);
|
||||
tallInputWrap.appendChild(tallLabel);
|
||||
fieldset.appendChild(tallInputWrap);
|
||||
|
||||
form.appendChild(fieldset);
|
||||
|
||||
var makeGroupOptions = function() {
|
||||
|
|
@ -1820,6 +1920,12 @@ var link = (function() {
|
|||
accentRgbBRange.value = stagedLink.link.accent.rgb.b;
|
||||
accentRgbBNumber.value = stagedLink.link.accent.rgb.b;
|
||||
imageInput.value = stagedLink.link.image;
|
||||
if (stagedLink.link.wide) {
|
||||
wideInput.checked = true;
|
||||
};
|
||||
if (stagedLink.link.tall) {
|
||||
tallInput.checked = true;
|
||||
};
|
||||
};
|
||||
|
||||
var mirror = {
|
||||
|
|
@ -2462,6 +2568,12 @@ var link = (function() {
|
|||
imageInput.addEventListener("input", function(event) {
|
||||
stagedLink.link.image = this.value;
|
||||
}, false);
|
||||
wideInput.addEventListener("change", function(event) {
|
||||
stagedLink.link.wide = this.checked;
|
||||
}, false);
|
||||
tallInput.addEventListener("change", function(event) {
|
||||
stagedLink.link.tall = this.checked;
|
||||
}, false);
|
||||
autoSuggest.bind.input({
|
||||
input: displayIconInput,
|
||||
type: "fontawesomeIcon",
|
||||
|
|
@ -3134,6 +3246,45 @@ var link = (function() {
|
|||
}
|
||||
};
|
||||
|
||||
render.breakpoint = {
|
||||
add: function() {
|
||||
var html = helper.e("html");
|
||||
switch (state.get.current().link.breakpoint) {
|
||||
case "xs":
|
||||
helper.addClass(html, "is-link-breakpoint-xs");
|
||||
break
|
||||
case "sm":
|
||||
helper.addClass(html, "is-link-breakpoint-sm");
|
||||
break
|
||||
case "md":
|
||||
helper.addClass(html, "is-link-breakpoint-md");
|
||||
break
|
||||
case "lg":
|
||||
helper.addClass(html, "is-link-breakpoint-lg");
|
||||
break
|
||||
case "xl":
|
||||
helper.addClass(html, "is-link-breakpoint-xl");
|
||||
break
|
||||
case "xxl":
|
||||
helper.addClass(html, "is-link-breakpoint-xxl");
|
||||
break
|
||||
};
|
||||
},
|
||||
remove: function() {
|
||||
var html = helper.e("html");
|
||||
helper.removeClass(html, "is-link-breakpoint-xs");
|
||||
helper.removeClass(html, "is-link-breakpoint-sm");
|
||||
helper.removeClass(html, "is-link-breakpoint-md");
|
||||
helper.removeClass(html, "is-link-breakpoint-lg");
|
||||
helper.removeClass(html, "is-link-breakpoint-xl");
|
||||
helper.removeClass(html, "is-link-breakpoint-xxl");
|
||||
},
|
||||
update: function() {
|
||||
render.breakpoint.remove();
|
||||
render.breakpoint.add();
|
||||
}
|
||||
};
|
||||
|
||||
var add = {
|
||||
item: {
|
||||
open: function() {
|
||||
|
|
@ -3217,11 +3368,15 @@ var link = (function() {
|
|||
};
|
||||
|
||||
var groupAndItems = function() {
|
||||
if (helper.e(".link-area")) {
|
||||
bind.resize.unobserve(helper.e(".link-area"));
|
||||
};
|
||||
render.clear.item();
|
||||
render.clear.group();
|
||||
render.all();
|
||||
render.group.tabindex();
|
||||
render.item.tabindex();
|
||||
bind.resize.observe(helper.e(".link-area"));
|
||||
if (!state.get.current().search) {
|
||||
bind.sort.group();
|
||||
bind.sort.item();
|
||||
|
|
|
|||
|
|
@ -256,7 +256,8 @@ var state = (function() {
|
|||
add: false,
|
||||
edit: false,
|
||||
style: "block",
|
||||
orientation: "bottom"
|
||||
orientation: "bottom",
|
||||
breakpoint: "xs"
|
||||
},
|
||||
group: {
|
||||
area: {
|
||||
|
|
|
|||
|
|
@ -1102,6 +1102,16 @@ var update = (function() {
|
|||
opacity: 1
|
||||
};
|
||||
return data;
|
||||
},
|
||||
"5.46.0": function(data) {
|
||||
data.bookmarks.forEach(function(arrayItem, index) {
|
||||
arrayItem.items.forEach(function(arrayItem, index) {
|
||||
arrayItem.wide = false;
|
||||
arrayItem.tall = false;
|
||||
});
|
||||
});
|
||||
data.state.link.breakpoint = "xs";
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue