significant palette overhaul, w. addition of +3 new palettes; new swatch preview appearance; expanded palette toggle functionality; repaired test suite accordingly
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
@@ -303,7 +303,8 @@ class SetPaletteTest(TestCase):
|
||||
response = self.client.get(self.url)
|
||||
parsed = lxml.html.fromstring(response.content)
|
||||
forms = parsed.cssselect('form[action="/dashboard/set_palette"]')
|
||||
self.assertEqual(len(forms), 1)
|
||||
unlocked = [p for p in response.context["palettes"] if not p["locked"]]
|
||||
self.assertEqual(len(forms), len(unlocked))
|
||||
|
||||
def test_active_palette_swatch_has_active_class(self):
|
||||
response = self.client.get(self.url)
|
||||
|
||||
@@ -17,9 +17,17 @@ from apps.lyric.models import PaymentMethod, Token, User, Wallet
|
||||
|
||||
|
||||
APPLET_ORDER = ["wallet", "new-note", "my-notes", "username", "palette"]
|
||||
UNLOCKED_PALETTES = frozenset(["palette-default"])
|
||||
UNLOCKED_PALETTES = frozenset([
|
||||
"palette-default",
|
||||
"palette-monochrome-light",
|
||||
"palette-monochrome-dark",
|
||||
"palette-sepia",
|
||||
])
|
||||
PALETTES = [
|
||||
{"name": "palette-default", "label": "Earthman", "locked": False},
|
||||
{"name": "palette-monochrome-light", "label": "Monochrome (Light)", "locked": False},
|
||||
{"name": "palette-monochrome-dark", "label": "Monochrome (Dark)", "locked": False},
|
||||
{"name": "palette-sepia", "label": "Sepia", "locked": False},
|
||||
{"name": "palette-nirvana", "label": "Nirvana", "locked": True},
|
||||
{"name": "palette-sheol", "label": "Sheol", "locked": True},
|
||||
{"name": "palette-inferno", "label": "Inferno", "locked": True},
|
||||
|
||||
@@ -9,19 +9,25 @@ class LayoutAndStylingTest(FunctionalTest):
|
||||
note_page = NotePage(self)
|
||||
|
||||
self.browser.set_window_size(1024, 768)
|
||||
# print("Viewport width:", self.browser.execute_script("return window.innerWidth"))
|
||||
|
||||
def section_center(el):
|
||||
return self.browser.execute_script("""
|
||||
var el = arguments[0];
|
||||
var ancestor = el.parentElement;
|
||||
while (ancestor && ancestor.tagName !== 'SECTION'
|
||||
&& !ancestor.classList.contains('container')) {
|
||||
ancestor = ancestor.parentElement;
|
||||
}
|
||||
var s = (ancestor || document.body).getBoundingClientRect();
|
||||
var r = arguments[0].getBoundingClientRect();
|
||||
return [r.x + r.width / 2, s.x + s.width / 2];
|
||||
""", el)
|
||||
|
||||
inputbox = note_page.get_item_input_box()
|
||||
self.assertAlmostEqual(
|
||||
inputbox.location['x'] + inputbox.size['width'] / 2,
|
||||
512,
|
||||
delta=10,
|
||||
)
|
||||
input_c, section_c = section_center(inputbox)
|
||||
self.assertAlmostEqual(input_c, section_c, delta=10)
|
||||
|
||||
note_page.add_note_item("testing")
|
||||
inputbox = note_page.get_item_input_box()
|
||||
self.assertAlmostEqual(
|
||||
inputbox.location['x'] + inputbox.size['width'] / 2,
|
||||
512,
|
||||
delta=10,
|
||||
)
|
||||
input_c, section_c = section_center(inputbox)
|
||||
self.assertAlmostEqual(input_c, section_c, delta=10)
|
||||
|
||||
@@ -27,11 +27,13 @@
|
||||
border-radius: 0.5rem;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(var(--terUser), 1) 0%,
|
||||
rgba(var(--terUser), 1) 33%,
|
||||
rgba(var(--priUser), 1) 33%,
|
||||
rgba(var(--priUser), 1) 66%,
|
||||
rgba(var(--quiUser), 1) 66%,
|
||||
rgba(var(--secUser), 1) 0%,
|
||||
rgba(var(--secUser), 1) 30%,
|
||||
rgba(var(--priUser), 1) 30%,
|
||||
rgba(var(--priUser), 1) 70%,
|
||||
rgba(var(--terUser), 1) 70%,
|
||||
rgba(var(--terUser), 1) 85%,
|
||||
rgba(var(--quiUser), 1) 85%,
|
||||
rgba(var(--quiUser), 1) 100%
|
||||
);
|
||||
border: 0.15rem solid rgba(var(--secUser), 0.5);
|
||||
|
||||
@@ -236,8 +236,8 @@
|
||||
--terSwp: 102, 92, 67;
|
||||
--quaSwp: 43, 46, 37;
|
||||
// blood (Tyche's Phlegethon)
|
||||
--priBld: 190, 69, 40;
|
||||
--secBld: 167, 53, 42;
|
||||
--priBld: 200, 79, 50;
|
||||
--secBld: 177, 63, 52;
|
||||
--terBld: 120, 37, 33;
|
||||
--quaBld: 77, 23, 13;
|
||||
// ice (Daimon's Cocytus)
|
||||
@@ -318,12 +318,12 @@
|
||||
.palette-sheol {
|
||||
--priUser: var(--priPu);
|
||||
--secUser: var(--quiPu);
|
||||
--terUser: var(--terFs);
|
||||
--terUser: var(--priFs);
|
||||
--quaUser: var(--priCfw);
|
||||
--quiUser: var(--terCfw);
|
||||
--sixUser: var(--terId);
|
||||
--sepUser: var(--secId);
|
||||
--octUser: var(--priFs);
|
||||
--octUser: var(--terFs);
|
||||
--ninUser: var(--sixPu);
|
||||
--decUser: var(--terPu);
|
||||
}
|
||||
@@ -331,12 +331,12 @@
|
||||
.palette-nirvana {
|
||||
--priUser: var(--priU);
|
||||
--secUser: var(--quiU);
|
||||
--terUser: var(--terMe);
|
||||
--terUser: var(--priMe);
|
||||
--quaUser: var(--quiCu);
|
||||
--quiUser: var(--terCu);
|
||||
--sixUser: var(--terKhk);
|
||||
--sepUser: var(--priKhk);
|
||||
--octUser: var(--priMe);
|
||||
--octUser: var(--terMe);
|
||||
--ninUser: var(--sixCu);
|
||||
--decUser: var(--terU);
|
||||
}
|
||||
@@ -344,12 +344,12 @@
|
||||
.palette-inferno {
|
||||
--priUser: var(--quaSwp);
|
||||
--secUser: var(--priSwp);
|
||||
--terUser: var(--terBld);
|
||||
--terUser: var(--secBld);
|
||||
--quaUser: var(--priIce);
|
||||
--quiUser: var(--quaIce);
|
||||
--sixUser: var(--priTrs);
|
||||
--sepUser: var(--terTrs);
|
||||
--octUser: var(--priBld);
|
||||
--octUser: var(--terBld);
|
||||
--ninUser: var(--priMst);
|
||||
--decUser: var(--terMst);
|
||||
}
|
||||
@@ -370,16 +370,56 @@
|
||||
.palette-celestia {
|
||||
--priUser: var(--octClh);
|
||||
--secUser: var(--sixClh);
|
||||
--terUser: var(--quaClh);
|
||||
--terUser: var(--terClh);
|
||||
--quaUser: var(--decClh);
|
||||
--quiUser: var(--ninClh);
|
||||
--sixUser: var(--sepClh);
|
||||
--sepUser: var(--secClh);
|
||||
--octUser: var(--terClh);
|
||||
--ninUser: var(--priClh);
|
||||
--sepUser: var(--priClh);
|
||||
--octUser: var(--quaClh);
|
||||
--ninUser: var(--secClh);
|
||||
--decUser: var(--quiClh);
|
||||
}
|
||||
|
||||
/* Monochrome Dark Palette */
|
||||
.palette-monochrome-dark {
|
||||
--priUser: var(--priAg); /* 30,30,30 — near-black bg */
|
||||
--secUser: var(--quiAg); /* 175,175,175 — light gray text/border */
|
||||
--terUser: var(--sixAg); /* 240,240,240 — bright white accent */
|
||||
--quaUser: var(--sixAg); /* 240,240,240 — active/interactive */
|
||||
--quiUser: var(--quaAg); /* 133,133,133 — secondary action */
|
||||
--sixUser: var(--terAg); /* 100,100,100 — subtle mid */
|
||||
--sepUser: var(--secAg); /* 60,60,60 — deep subtle */
|
||||
--octUser: var(--quiPt); /* 189,190,189 — links (cooler silver) */
|
||||
--ninUser: var(--sixAg); /* 240,240,240 — glow highlight */
|
||||
--decUser: var(--terAg); /* 100,100,100 — mid tone */
|
||||
}
|
||||
/* Monochrome Light Palette */
|
||||
.palette-monochrome-light {
|
||||
--priUser: var(--sixAg); /* 240,240,240 — light gray bg */
|
||||
--secUser: var(--terAg); /* 100,100,100 — mid-dark text/border */
|
||||
--terUser: var(--secAg); /* 60,60,60 — dark accent */
|
||||
--quaUser: var(--priAg); /* 30,30,30 — near-black active */
|
||||
--quiUser: var(--quaAg); /* 133,133,133 — mid-gray action */
|
||||
--sixUser: var(--quiAg); /* 175,175,175 — subtle */
|
||||
--sepUser: var(--sixAg); /* 240,240,240 — secondary subtle */
|
||||
--octUser: var(--terNi); /* 93,95,94 — links */
|
||||
--ninUser: var(--priCtn); /* 255,251,246 — warm bright highlight */
|
||||
--decUser: var(--secPt); /* 189,190,189 — light mid */
|
||||
}
|
||||
/* Sepia Palette */
|
||||
.palette-sepia {
|
||||
--priUser: var(--priCu); /* 46,24,5 — very dark warm brown bg */
|
||||
--secUser: var(--quiCu); /* 207,173,143 — warm beige text/border */
|
||||
--terUser: var(--quiAu); /* 214,186,84 — amber gold accent */
|
||||
--quaUser: var(--quaAg); /* 195,176,145 — warm tan interactive */
|
||||
--quiUser: var(--quaSwp); /* 95,76,45 — deep khaki */
|
||||
--sixUser: var(--quaCu); /* 171,112,60 — copper mid */
|
||||
--sepUser: var(--terCu); /* 133,81,36 — deep copper */
|
||||
--octUser: var(--quaAu); /* 181,154,54 — golden links */
|
||||
--ninUser: var(--sixCu); /* 242,216,191 — warm cream highlight */
|
||||
--decUser: var(--secKhk); /* 145,126,95 — warm mid-tone */
|
||||
}
|
||||
|
||||
/* Palette Classes */
|
||||
.priUser {
|
||||
color: rgba(var(--priUser), 1);
|
||||
|
||||
Reference in New Issue
Block a user