mirror of
https://github.com/GuySandler/CanvasRefined.git
synced 2026-11-03 13:57:17 +01:00
ligth changes to widgets
This commit is contained in:
Guy Sandler
parent
08e5d68632
commit
718f7869d5
@ -1913,6 +1913,12 @@
|
||||
"quick_links": {
|
||||
"message": "Quick Links"
|
||||
},
|
||||
"quick_links_font_size": {
|
||||
"message": "Link label size"
|
||||
},
|
||||
"quick_links_icon_size": {
|
||||
"message": "Icon size"
|
||||
},
|
||||
"quick_links_hint_edit": {
|
||||
"message": "Click a link to edit it."
|
||||
},
|
||||
|
||||
@ -566,8 +566,12 @@
|
||||
.canvasrefined-widget-slot .canvasrefined-widget-card {width:100%;margin:0;height:100%;}
|
||||
.cr-widget-head {display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;border-bottom:1px solid var(--bcborders,#c7cdd1);}
|
||||
.cr-widget-title {font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bctext-2,#9aa3ab);}
|
||||
.cr-widget-btn {flex:1;border:none;border-radius:8px;padding:9px 12px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;background:var(--ic-brand-primary,#0374b5);color:#fff;}
|
||||
.cr-widget-btn:hover {filter:brightness(1.07);}
|
||||
/* Primary action uses the dark palette's "Background Other" surface
|
||||
(--bcbackground-2) instead of Canvas' brand color, which stays light-theme
|
||||
blue against the always-dark widget card. */
|
||||
.cr-widget-btn {flex:1;border:1px solid var(--bcborders,#c7cdd1);border-radius:8px;padding:9px 12px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;background:var(--bcbackground-2,#d9d9d9);color:var(--bctext-0,#2d3b45);}
|
||||
.cr-widget-btn:hover {background:color-mix(in srgb, var(--bcbackground-2,#d9d9d9) 80%, var(--bctext-0,#2d3b45));}
|
||||
.cr-widget-btn:focus-visible {outline:2px solid color-mix(in srgb, var(--bclinks,#0374b5) 70%, transparent);outline-offset:2px;}
|
||||
.cr-widget-btn-ghost {background:transparent;color:var(--bctext-0,#2d3b45);border:1px solid var(--bcborders,#c7cdd1);}
|
||||
.cr-time-box {position:relative;margin:14px 14px 0;border-radius:12px;background:color-mix(in srgb, var(--bctext-0,#2d3b45) 6%, transparent);border:1px solid var(--bcborders,#c7cdd1);overflow:hidden;}
|
||||
/* the time rectangle is the progress bar, tinted with the theme link color */
|
||||
@ -649,19 +653,21 @@
|
||||
.cr-ql-tile:active {transform:scale(.97);}
|
||||
.cr-ql-tile:focus-visible {outline:2px solid var(--bclinks,#0374b5);outline-offset:2px;}
|
||||
.cr-ql-tile.is-editing {cursor:pointer;}
|
||||
.cr-ql-icon {display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:10px;overflow:hidden;background:color-mix(in srgb, var(--bclinks,#0374b5) 12%, transparent);color:var(--bclinks,#0374b5);}
|
||||
.cr-ql-icon svg {width:21px;height:21px;display:block;}
|
||||
/* --cr-ql-icon-size is set by the content script (Quick Links settings); the
|
||||
glyphs scale with the box so preset and custom icons stay proportionate. */
|
||||
.cr-ql-icon {display:flex;align-items:center;justify-content:center;width:var(--cr-ql-icon-size,36px);height:var(--cr-ql-icon-size,36px);flex:none;border-radius:10px;overflow:hidden;background:color-mix(in srgb, var(--bclinks,#0374b5) 12%, transparent);color:var(--bclinks,#0374b5);}
|
||||
.cr-ql-icon svg {width:calc(var(--cr-ql-icon-size,36px) * .5833);height:calc(var(--cr-ql-icon-size,36px) * .5833);display:block;}
|
||||
.cr-ql-icon img {width:100%;height:100%;object-fit:contain;display:block;}
|
||||
.cr-ql-icon-letter {display:none;font-size:16px;font-weight:800;line-height:1;color:var(--bclinks,#0374b5);}
|
||||
.cr-ql-icon-letter {display:none;font-size:calc(var(--cr-ql-icon-size,36px) * .4444);font-weight:800;line-height:1;color:var(--bclinks,#0374b5);}
|
||||
.cr-ql-tile.cr-ql-img-broken .cr-ql-icon img,
|
||||
.cr-ql-tile.cr-ql-img-broken .cr-ql-icon svg {display:none;}
|
||||
.cr-ql-tile.cr-ql-img-broken .cr-ql-icon-letter {display:block;}
|
||||
.cr-ql-label {display:-webkit-box;max-width:100%;overflow:hidden;font-size:12px;font-weight:600;line-height:1.25;text-align:center;word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
|
||||
.cr-ql-label {display:-webkit-box;max-width:100%;overflow:hidden;font-size:var(--cr-ql-label-size,12px);font-weight:600;line-height:1.25;text-align:center;word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
|
||||
.cr-ql-tile-delete {position:absolute;top:4px;right:4px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:6px;background:transparent;color:var(--bctext-2,#9aa3ab);font-size:14px;line-height:1;cursor:pointer;}
|
||||
.cr-ql-tile-delete:hover {background:color-mix(in srgb, #e5484d 18%, transparent);color:#e5484d !important;}
|
||||
.cr-ql-add {border-style:dashed;color:var(--bctext-2,#9aa3ab);}
|
||||
.cr-ql-add:hover {color:var(--bclinks,#0374b5) !important;}
|
||||
.cr-ql-add-plus {display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb, var(--bctext-0,#2d3b45) 7%, transparent);font-size:22px;font-weight:400;line-height:1;}
|
||||
.cr-ql-add-plus {display:flex;align-items:center;justify-content:center;width:var(--cr-ql-icon-size,36px);height:var(--cr-ql-icon-size,36px);border-radius:10px;background:color-mix(in srgb, var(--bctext-0,#2d3b45) 7%, transparent);font-size:calc(var(--cr-ql-icon-size,36px) * .6111);font-weight:400;line-height:1;}
|
||||
.cr-ql-empty {display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px 6px;text-align:center;color:var(--bctext-2,#9aa3ab);font-size:12px;}
|
||||
.cr-ql-empty .cr-widget-btn {flex:none;}
|
||||
.cr-ql-hint {margin:0 0 8px;color:var(--bctext-2,#9aa3ab);font-size:11px;}
|
||||
|
||||
@ -22,8 +22,8 @@ h2 {font-size:24px;}
|
||||
.header {font-size: 16px;display: flex;align-items: center;gap:12px; margin-bottom:14px;}
|
||||
.header h1 { font-weight: 600; font-size:24px; }
|
||||
#bclogo {height: 30px;width:30px;filter: none}
|
||||
#numAssignmentsSlider, #numTodoItemsSlider, #sidebarScaleSlider, #customBackgroundScale, #bgOpacitySlider, #sidebarOpacitySlider, #bgBlurSlider, #sidebarBlurSlider, #cardOpacitySlider, #cardBlurSlider {display: block;margin-top: 14px;width: 100%;-webkit-appearance: none; appearance: none;background:var(--inputbg);outline: none;height:6px;border-radius:20px;}
|
||||
#numAssignmentsSlider::-webkit-slider-thumb, #numTodoItemsSlider::-webkit-slider-thumb, #sidebarScaleSlider::-webkit-slider-thumb, #customBackgroundScale::-webkit-slider-thumb, #bgOpacitySlider::-webkit-slider-thumb, #sidebarOpacitySlider::-webkit-slider-thumb, #bgBlurSlider::-webkit-slider-thumb, #sidebarBlurSlider::-webkit-slider-thumb, #cardOpacitySlider::-webkit-slider-thumb, #cardBlurSlider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none;height: 18px; width: 18px;background: #727272;cursor: pointer;border-radius:30px;}
|
||||
#numAssignmentsSlider, #numTodoItemsSlider, #sidebarScaleSlider, #customBackgroundScale, #bgOpacitySlider, #sidebarOpacitySlider, #bgBlurSlider, #sidebarBlurSlider, #cardOpacitySlider, #cardBlurSlider, #quickLinksFontSizeSlider, #quickLinksIconSizeSlider {display: block;margin-top: 14px;width: 100%;-webkit-appearance: none; appearance: none;background:var(--inputbg);outline: none;height:6px;border-radius:20px;}
|
||||
#numAssignmentsSlider::-webkit-slider-thumb, #numTodoItemsSlider::-webkit-slider-thumb, #sidebarScaleSlider::-webkit-slider-thumb, #customBackgroundScale::-webkit-slider-thumb, #bgOpacitySlider::-webkit-slider-thumb, #sidebarOpacitySlider::-webkit-slider-thumb, #bgBlurSlider::-webkit-slider-thumb, #sidebarBlurSlider::-webkit-slider-thumb, #cardOpacitySlider::-webkit-slider-thumb, #cardBlurSlider::-webkit-slider-thumb, #quickLinksFontSizeSlider::-webkit-slider-thumb, #quickLinksIconSizeSlider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none;height: 18px; width: 18px;background: #727272;cursor: pointer;border-radius:30px;}
|
||||
.option-container {font-size: 14px; margin-top: 8px;background: var(--containerbg);padding: 18px;border-radius: 14px;box-sizing:border-box}
|
||||
.options .option-container {padding: 14px;}
|
||||
.options .option-container > .option + .option {margin-top: 10px;}
|
||||
|
||||
@ -1376,6 +1376,16 @@
|
||||
<input type="number" id="quick_links_height" class="card-input" min="0" max="2000" data-i18n-placeholder="auto" placeholder="auto" style="width:92px;margin:0;">
|
||||
<span class="sub-text">px</span>
|
||||
</div>
|
||||
<div class="sub-option widget-inline-row" style="margin-top:6px;">
|
||||
<label for="quickLinksFontSizeSlider" class="sub-text widget-inline-label" data-i18n="quick_links_font_size">Link label size</label>
|
||||
<span class="sub-text" id="quickLinksFontSizeValue" style="margin-left:auto;">12px</span>
|
||||
</div>
|
||||
<input type="range" min="8" max="24" step="1" id="quickLinksFontSizeSlider" data-i18n-aria-label="quick_links_font_size" aria-label="Link label size">
|
||||
<div class="sub-option widget-inline-row" style="margin-top:6px;">
|
||||
<label for="quickLinksIconSizeSlider" class="sub-text widget-inline-label" data-i18n="quick_links_icon_size">Icon size</label>
|
||||
<span class="sub-text" id="quickLinksIconSizeValue" style="margin-left:auto;">36px</span>
|
||||
</div>
|
||||
<input type="range" min="20" max="64" step="1" id="quickLinksIconSizeSlider" data-i18n-aria-label="quick_links_icon_size" aria-label="Icon size">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -63,6 +63,8 @@ chrome.runtime.onInstalled.addListener(function () {
|
||||
"breathing_height": 0,
|
||||
"daily_quotes_height": 0,
|
||||
"quick_links_height": 0,
|
||||
"quick_links_font_size": 12,
|
||||
"quick_links_icon_size": 36,
|
||||
"better_todo": true,
|
||||
"todo_hr24": false,
|
||||
"todo_separate_scrollbar": false,
|
||||
|
||||
@ -1110,6 +1110,10 @@ function applyOptionsChanges(changes) {
|
||||
case "quick_links_height":
|
||||
loadQuickLinksWidget();
|
||||
break;
|
||||
case "quick_links_font_size":
|
||||
case "quick_links_icon_size":
|
||||
document.querySelectorAll(".canvasrefined-quick-links").forEach(quickLinksApplySizes);
|
||||
break;
|
||||
case "quick_links_items":
|
||||
updateQuickLinksWidget();
|
||||
break;
|
||||
@ -8563,6 +8567,26 @@ function quickLinksItems() {
|
||||
return raw.map(quickLinksSanitizeItem).filter(Boolean);
|
||||
}
|
||||
|
||||
// Per-tile sizes (px): stored per setting, exposed as CSS vars on the widget so
|
||||
// the grid, edit mode and the "add" tile all follow one value. Unset keeps the
|
||||
// stylesheet default.
|
||||
const QUICK_LINKS_SIZE_SETTINGS = [
|
||||
{ key: "quick_links_font_size", cssVar: "--cr-ql-label-size", min: 8, max: 24 },
|
||||
{ key: "quick_links_icon_size", cssVar: "--cr-ql-icon-size", min: 20, max: 64 },
|
||||
];
|
||||
|
||||
function quickLinksApplySizes(el) {
|
||||
if (!el) return;
|
||||
QUICK_LINKS_SIZE_SETTINGS.forEach(({ key, cssVar, min, max }) => {
|
||||
const n = parseInt(options[key], 10);
|
||||
if (!Number.isFinite(n) || n <= 0) {
|
||||
el.style.removeProperty(cssVar);
|
||||
return;
|
||||
}
|
||||
el.style.setProperty(cssVar, Math.min(max, Math.max(min, n)) + "px");
|
||||
});
|
||||
}
|
||||
|
||||
function quickLinksIconMarkup(item) {
|
||||
const image = item.icon === "image" ? quickLinksSafeUrl(item.image, true) : "";
|
||||
if (image) return `<img src="${crEscapeHtml(image)}" alt="" loading="lazy">`;
|
||||
@ -8644,6 +8668,7 @@ function quickLinksEditorHtml(item) {
|
||||
|
||||
function renderQuickLinks(el) {
|
||||
if (!el) return;
|
||||
quickLinksApplySizes(el);
|
||||
const body = el.querySelector(".cr-ql-body");
|
||||
const toggle = el.querySelector(".cr-ql-edit-toggle");
|
||||
if (!body) return;
|
||||
|
||||
23
js/popup.js
23
js/popup.js
@ -37,6 +37,8 @@ const syncedSubOptions = [
|
||||
"breathing_height",
|
||||
"daily_quotes_height",
|
||||
"quick_links_height",
|
||||
"quick_links_font_size",
|
||||
"quick_links_icon_size",
|
||||
"auto_dark",
|
||||
"auto_dark_start",
|
||||
"auto_dark_end",
|
||||
@ -280,6 +282,10 @@ const defaultOptions = {
|
||||
"breathing_height": 0,
|
||||
"daily_quotes_height": 0,
|
||||
"quick_links_height": 0,
|
||||
// Quick Links tile label font size in px.
|
||||
"quick_links_font_size": 12,
|
||||
// Quick Links tile icon box size in px.
|
||||
"quick_links_icon_size": 36,
|
||||
"better_todo": true,
|
||||
"better_sidebar": false,
|
||||
"sidebar_scale": 100,
|
||||
@ -507,12 +513,13 @@ function setupSidebarScaleSlider(initial) {
|
||||
});
|
||||
}
|
||||
|
||||
// Slider 0..max; `unit` is appended to the displayed value ("%" / "px").
|
||||
function setupRangeSlider(key, sliderId, valueId, resetId, defaultValue, max, unit, initial) {
|
||||
// Slider min..max; `unit` is appended to the displayed value ("%" / "px").
|
||||
function setupRangeSlider(key, sliderId, valueId, resetId, defaultValue, max, unit, initial, min) {
|
||||
const el = document.querySelector("#" + sliderId);
|
||||
const out = document.querySelector("#" + valueId);
|
||||
if (!el || !out) return;
|
||||
const value = Math.max(0, Math.min(max, parseInt(initial)));
|
||||
const floor = Number.isFinite(parseInt(min, 10)) ? parseInt(min, 10) : 0;
|
||||
const value = Math.max(floor, Math.min(max, parseInt(initial)));
|
||||
if (isNaN(value)) return;
|
||||
el.value = value;
|
||||
out.textContent = `${value}${unit}`;
|
||||
@ -523,7 +530,7 @@ function setupRangeSlider(key, sliderId, valueId, resetId, defaultValue, max, un
|
||||
const reset = document.querySelector("#" + resetId);
|
||||
if (reset) {
|
||||
reset.addEventListener("click", () => {
|
||||
const v = Math.max(0, Math.min(max, parseInt(defaultValue)));
|
||||
const v = Math.max(floor, Math.min(max, parseInt(defaultValue)));
|
||||
el.value = v;
|
||||
out.textContent = `${v}${unit}`;
|
||||
chrome.storage.sync.set({ [key]: v });
|
||||
@ -1992,6 +1999,14 @@ async function setup() {
|
||||
identifier: "quick_links_height",
|
||||
setup: (initial) => setupWidgetHeightInput("quick_links_height", initial),
|
||||
},
|
||||
{
|
||||
identifier: "quick_links_font_size",
|
||||
setup: (initial) => setupRangeSlider("quick_links_font_size", "quickLinksFontSizeSlider", "quickLinksFontSizeValue", null, 12, 24, "px", initial, 8),
|
||||
},
|
||||
{
|
||||
identifier: "quick_links_icon_size",
|
||||
setup: (initial) => setupRangeSlider("quick_links_icon_size", "quickLinksIconSizeSlider", "quickLinksIconSizeValue", null, 36, 64, "px", initial, 20),
|
||||
},
|
||||
{
|
||||
identifier: "focus_timer_preset_1",
|
||||
setup: (initial) => setupWidgetTimeInput("focus_timer_preset_1", initial),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user