From c7c64d2c7bb749f5924c828c69c0a7cde595ea48 Mon Sep 17 00:00:00 2001
From: end-4 <97237370+end-4@users.noreply.github.com>
Date: Mon, 15 Apr 2024 23:55:37 +0700
Subject: [PATCH] add periodic table
---
.../modules/.commonwidgets/tabcontainer.js | 2 +
.../modules/.configuration/user_options.js | 4 +
.../modules/cheatsheet/data_periodictable.js | 185 +++++++++++++++++
.config/ags/modules/cheatsheet/keybinds.js | 124 ++++++-----
.config/ags/modules/cheatsheet/main.js | 47 ++++-
.../ags/modules/cheatsheet/periodictable.js | 58 ++++++
.config/ags/scss/_cheatsheet.scss | 16 +-
.config/ags/scss/_lib_classes.scss | 195 +++++++-----------
8 files changed, 451 insertions(+), 180 deletions(-)
create mode 100644 .config/ags/modules/cheatsheet/data_periodictable.js
create mode 100644 .config/ags/modules/cheatsheet/periodictable.js
diff --git a/.config/ags/modules/.commonwidgets/tabcontainer.js b/.config/ags/modules/.commonwidgets/tabcontainer.js
index abe642c51..9dc56f22e 100644
--- a/.config/ags/modules/.commonwidgets/tabcontainer.js
+++ b/.config/ags/modules/.commonwidgets/tabcontainer.js
@@ -173,6 +173,7 @@ export const ExpandingIconTabContainer = ({
icons, names, children, className = '',
setup = () => { }, onChange = () => { },
tabsHpack = 'center', tabSwitcherClassName = '',
+ transitionDuration = userOptions.animations.durationLarge,
...rest
}) => {
const shownIndex = Variable(0);
@@ -241,6 +242,7 @@ export const ExpandingIconTabContainer = ({
});
const contentStack = Stack({
transition: 'slide_left_right',
+ transitionDuration: transitionDuration,
children: children.reduce((acc, currentValue, index) => {
acc[index] = currentValue;
return acc;
diff --git a/.config/ags/modules/.configuration/user_options.js b/.config/ags/modules/.configuration/user_options.js
index 852fab71d..72f285a12 100644
--- a/.config/ags/modules/.configuration/user_options.js
+++ b/.config/ags/modules/.configuration/user_options.js
@@ -113,6 +113,10 @@ let configOptions = {
'nextTab': "Ctrl+Page_Down",
'prevTab': "Ctrl+Page_Up",
},
+ 'cheatsheet': {
+ 'nextTab': "Page_Down",
+ 'prevTab': "Page_Up",
+ }
},
}
diff --git a/.config/ags/modules/cheatsheet/data_periodictable.js b/.config/ags/modules/cheatsheet/data_periodictable.js
new file mode 100644
index 000000000..3fb3f88b7
--- /dev/null
+++ b/.config/ags/modules/cheatsheet/data_periodictable.js
@@ -0,0 +1,185 @@
+export const periodicTable = [
+ [
+ { name: 'Hydrogen', symbol: 'H', number: 1, weight: 1.008 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: 'Helium', symbol: 'He', number: 2, weight: 4.0026 },
+ ],
+ [
+ { name: 'Lithium', symbol: 'Li', number: 3, weight: 6.941 },
+ { name: 'Beryllium', symbol: 'Be', number: 4, weight: 9.012 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: 'Boron', symbol: 'B', number: 5, weight: 10.811 },
+ { name: 'Carbon', symbol: 'C', number: 6, weight: 12.011 },
+ { name: 'Nitrogen', symbol: 'N', number: 7, weight: 14.007 },
+ { name: 'Oxygen', symbol: 'O', number: 8, weight: 15.999 },
+ { name: 'Fluorine', symbol: 'F', number: 9, weight: 18.998 },
+ { name: 'Neon', symbol: 'Ne', number: 10, weight: 20.18 },
+
+
+ ],
+ [
+ { name: 'Sodium', symbol: 'Na', number: 11, weight: 22.9898 },
+ { name: 'Magnesium', symbol: 'Mg', number: 12, weight: 24.305 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: 'Aluminum', symbol: 'Al', number: 13, weight: 26.982 },
+ { name: 'Silicon', symbol: 'Si', number: 14, weight: 28.086 },
+ { name: 'Phosphorus', symbol: 'P', number: 15, weight: 30.974 },
+ { name: 'Sulfur', symbol: 'S', number: 16, weight: 32.065 },
+ { name: 'Chlorine', symbol: 'Cl', number: 17, weight: 35.453 },
+ { name: 'Argon', symbol: 'Ar', number: 18, weight: 39.948 },
+ ],
+ [
+ { name: 'Potassium', symbol: 'K', number: 19, weight: 39.098 },
+ { name: 'Calcium', symbol: 'Ca', number: 20, weight: 40.078 },
+ { name: 'Scandium', symbol: 'Sc', number: 21, weight: 44.956 },
+ { name: 'Titanium', symbol: 'Ti', number: 22, weight: 47.867 },
+ { name: 'Vanadium', symbol: 'V', number: 23, weight: 50.942 },
+ { name: 'Chromium', symbol: 'Cr', number: 24, weight: 51.996, icon: 'chromium-browser' },
+ { name: 'Manganese', symbol: 'Mn', number: 25, weight: 54.938 },
+ { name: 'Iron', symbol: 'Fe', number: 26, weight: 55.845 },
+ { name: 'Cobalt', symbol: 'Co', number: 27, weight: 58.933 },
+ { name: 'Nickel', symbol: 'Ni', number: 28, weight: 58.693 },
+ { name: 'Copper', symbol: 'Cu', number: 29, weight: 63.546 },
+ { name: 'Zinc', symbol: 'Zn', number: 30, weight: 65.38 },
+ { name: 'Gallium', symbol: 'Ga', number: 31, weight: 69.723 },
+ { name: 'Germanium', symbol: 'Ge', number: 32, weight: 72.630 },
+ { name: 'Arsenic', symbol: 'As', number: 33, weight: 74.9216 },
+ { name: 'Selenium', symbol: 'Se', number: 34, weight: 78.96 },
+ { name: 'Bromine', symbol: 'Br', number: 35, weight: 79.904 },
+ { name: 'Krypton', symbol: 'Kr', number: 36, weight: 83.798 },
+ ],
+ [
+ { name: 'Rubidium', symbol: 'Rb', number: 37, weight: 85.4678 },
+ { name: 'Strontium', symbol: 'Sr', number: 38, weight: 87.62 },
+ { name: 'Yttrium', symbol: 'Y', number: 39, weight: 88.9059 },
+ { name: 'Zirconium', symbol: 'Zr', number: 40, weight: 91.224 },
+ { name: 'Niobium', symbol: 'Nb', number: 41, weight: 92.906 },
+ { name: 'Molybdenum', symbol: 'Mo', number: 42, weight: 95.94 },
+ { name: 'Technetium', symbol: 'Tc', number: 43, weight: 98 },
+ { name: 'Ruthenium', symbol: 'Ru', number: 44, weight: 101.07 },
+ { name: 'Rhodium', symbol: 'Rh', number: 45, weight: 102.91 },
+ { name: 'Palladium', symbol: 'Pd', number: 46, weight: 106.42 },
+ { name: 'Silver', symbol: 'Ag', number: 47, weight: 107.868 },
+ { name: 'Cadmium', symbol: 'Cd', number: 48, weight: 112.411 },
+ { name: 'Indium', symbol: 'In', number: 49, weight: 114.818 },
+ { name: 'Tin', symbol: 'Sn', number: 50, weight: 118.71 },
+ { name: 'Antimony', symbol: 'Sb', number: 51, weight: 121.76 },
+ { name: 'Tellurium', symbol: 'Te', number: 52, weight: 127.6 },
+ { name: 'Iodine', symbol: 'I', number: 53, weight: 126.9 },
+ { name: 'Xenon', symbol: 'Xe', number: 54, weight: 131.29 },
+ ],
+ [
+ { name: 'Cesium', symbol: 'Cs', number: 55, weight: 132.905 },
+ { name: 'Barium', symbol: 'Ba', number: 56, weight: 137.327 },
+ { name: 'Lanthanum', symbol: 'La', number: 57, weight: 138.906 },
+ { name: 'Hafnium', symbol: 'Hf', number: 72, weight: 178.49 },
+ { name: 'Tantalum', symbol: 'Ta', number: 73, weight: 180.948 },
+ { name: 'Tungsten', symbol: 'W', number: 74, weight: 183.84 },
+ { name: 'Rhenium', symbol: 'Re', number: 75, weight: 186.207 },
+ { name: 'Osmium', symbol: 'Os', number: 76, weight: 190.23 },
+ { name: 'Iridium', symbol: 'Ir', number: 77, weight: 192.217 },
+ { name: 'Platinum', symbol: 'Pt', number: 78, weight: 195.085 },
+ { name: 'Gold', symbol: 'Au', number: 79, weight: 196.967 },
+ { name: 'Mercury', symbol: 'Hg', number: 80, weight: 200.59 },
+ { name: 'Thallium', symbol: 'Tl', number: 81, weight: 204.383 },
+ { name: 'Lead', symbol: 'Pb', number: 82, weight: 207.2 },
+ { name: 'Bismuth', symbol: 'Bi', number: 83, weight: 208.980 },
+ { name: 'Polonium', symbol: 'Po', number: 84, weight: 209 },
+ { name: 'Astatine', symbol: 'At', number: 85, weight: 210 },
+ { name: 'Radon', symbol: 'Rn', number: 86, weight: 222 },
+ ],
+ [
+ { name: 'Francium', symbol: 'Fr', number: 87, weight: 223 },
+ { name: 'Radium', symbol: 'Ra', number: 88, weight: 226 },
+ { name: 'Actinium', symbol: 'Ac', number: 89, weight: 227 },
+ { name: 'Rutherfordium', symbol: 'Rf', number: 104, weight: 267 },
+ { name: 'Dubnium', symbol: 'Db', number: 105, weight: 268 },
+ { name: 'Seaborgium', symbol: 'Sg', number: 106, weight: 271 },
+ { name: 'Bohrium', symbol: 'Bh', number: 107, weight: 272 },
+ { name: 'Hassium', symbol: 'Hs', number: 108, weight: 277 },
+ { name: 'Meitnerium', symbol: 'Mt', number: 109, weight: 278 },
+ { name: 'Darmstadtium', symbol: 'Ds', number: 110, weight: 281 },
+ { name: 'Roentgenium', symbol: 'Rg', number: 111, weight: 280 },
+ { name: 'Copernicium', symbol: 'Cn', number: 112, weight: 285 },
+ { name: 'Nihonium', symbol: 'Nh', number: 113, weight: 286 },
+ { name: 'Flerovium', symbol: 'Fl', number: 114, weight: 289 },
+ { name: 'Moscovium', symbol: 'Mc', number: 115, weight: 290 },
+ { name: 'Livermorium', symbol: 'Lv', number: 116, weight: 293 },
+ { name: 'Tennessine', symbol: 'Ts', number: 117, weight: 294 },
+ { name: 'Oganesson', symbol: 'Og', number: 118, weight: 294 },
+ ],
+]
+
+export const series = [
+ [
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: 'Cerium', symbol: 'Ce', number: 58, weight: 140.12 },
+ { name: 'Praseodymium', symbol: 'Pr', number: 59, weight: 140.91 },
+ { name: 'Neodymium', symbol: 'Nd', number: 60, weight: 144.24 },
+ { name: 'Promethium', symbol: 'Pm', number: 61, weight: 145 },
+ { name: 'Samarium', symbol: 'Sm', number: 62, weight: 150.36 },
+ { name: 'Europium', symbol: 'Eu', number: 63, weight: 151.96 },
+ { name: 'Gadolinium', symbol: 'Gd', number: 64, weight: 157.25 },
+ { name: 'Terbium', symbol: 'Tb', number: 65, weight: 158.93 },
+ { name: 'Dysprosium', symbol: 'Dy', number: 66, weight: 162.5 },
+ { name: 'Holmium', symbol: 'Ho', number: 67, weight: 164.93 },
+ { name: 'Erbium', symbol: 'Er', number: 68, weight: 167.26 },
+ { name: 'Thulium', symbol: 'Tm', number: 69, weight: 168.93 },
+ { name: 'Ytterbium', symbol: 'Yb', number: 70, weight: 173.04 },
+ { name: 'Lutetium', symbol: 'Lu', number: 71, weight: 174.97 },
+ ],
+ [
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: '', symbol: '', number: -1, weight: 0 },
+ { name: 'Thorium', symbol: 'Th', number: 90, weight: 232.04 },
+ { name: 'Protactinium', symbol: 'Pa', number: 91, weight: 231.04 },
+ { name: 'Uranium', symbol: 'U', number: 92, weight: 238.03 },
+ { name: 'Neptunium', symbol: 'Np', number: 93, weight: 237 },
+ { name: 'Plutonium', symbol: 'Pu', number: 94, weight: 244 },
+ { name: 'Americium', symbol: 'Am', number: 95, weight: 243 },
+ { name: 'Curium', symbol: 'Cm', number: 96, weight: 247 },
+ { name: 'Berkelium', symbol: 'Bk', number: 97, weight: 247 },
+ { name: 'Californium', symbol: 'Cf', number: 98, weight: 251 },
+ { name: 'Einsteinium', symbol: 'Es', number: 99, weight: 252 },
+ { name: 'Fermium', symbol: 'Fm', number: 100, weight: 257 },
+ { name: 'Mendelevium', symbol: 'Md', number: 101, weight: 258 },
+ { name: 'Nobelium', symbol: 'No', number: 102, weight: 259 },
+ { name: 'Lawrencium', symbol: 'Lr', number: 103, weight: 262 },
+ ],
+]
\ No newline at end of file
diff --git a/.config/ags/modules/cheatsheet/keybinds.js b/.config/ags/modules/cheatsheet/keybinds.js
index 1354d71a3..a069f96d1 100644
--- a/.config/ags/modules/cheatsheet/keybinds.js
+++ b/.config/ags/modules/cheatsheet/keybinds.js
@@ -1,60 +1,78 @@
+const { Gtk } = imports.gi;
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
import { keybindList } from "./data_keybinds.js";
-export default () => Widget.Box({
- vertical: false,
- className: "spacing-h-15",
- homogeneous: true,
- children: keybindList.map((group, _) => Widget.Box({ // Columns
+export default () => {
+ const Category = (category) => Widget.Box({ // Categories
vertical: true,
className: "spacing-v-15",
- children: group.map((category, _) => Widget.Box({ // Categories
+ children: [
+ Widget.Box({ // Category header
+ vertical: false,
+ className: "spacing-h-10",
+ children: [
+ Widget.Label({
+ xalign: 0,
+ className: `icon-material txt-larger cheatsheet-color-${category.id}`,
+ label: category.icon,
+ }),
+ Widget.Label({
+ xalign: 0,
+ className: "cheatsheet-category-title txt",
+ label: category.name,
+ }),
+ ]
+ }),
+ Widget.Box({
+ vertical: false,
+ className: "spacing-h-10",
+ children: [
+ Widget.Box({ // Keys
+ vertical: true,
+ homogeneous: true,
+ children: category.binds.map((keybinds, _) => Widget.Box({ // Binds
+ vertical: false,
+ children: keybinds.keys.map((key, _) => Widget.Label({ // Specific keys
+ className: `${['OR', '+'].includes(key) ? 'cheatsheet-key-notkey' : 'cheatsheet-key cheatsheet-color-' + category.id} txt-small`,
+ label: key,
+ }))
+ }))
+ }),
+ Widget.Box({ // Actions
+ vertical: true,
+ homogeneous: true,
+ children: category.binds.map((keybinds, _) => Widget.Label({ // Binds
+ xalign: 0,
+ label: keybinds.action,
+ className: "txt chearsheet-action txt-small",
+ }))
+ })
+ ]
+ })
+ ]
+ })
+ const realKeybinds = Widget.Box({
+ vertical: false,
+ className: "spacing-h-15",
+ homogeneous: true,
+ children: keybindList.map((group, _) => Widget.Box({ // Columns
vertical: true,
className: "spacing-v-15",
- children: [
- Widget.Box({ // Category header
- vertical: false,
- className: "spacing-h-10",
- children: [
- Widget.Label({
- xalign: 0,
- className: `icon-material txt-larger cheatsheet-color-${category.id}`,
- label: category.icon,
- }),
- Widget.Label({
- xalign: 0,
- className: "cheatsheet-category-title txt",
- label: category.name,
- }),
- ]
- }),
- Widget.Box({
- vertical: false,
- className: "spacing-h-10",
- children: [
- Widget.Box({ // Keys
- vertical: true,
- homogeneous: true,
- children: category.binds.map((keybinds, _) => Widget.Box({ // Binds
- vertical: false,
- children: keybinds.keys.map((key, _) => Widget.Label({ // Specific keys
- className: `${['OR', '+'].includes(key) ? 'cheatsheet-key-notkey' : 'cheatsheet-key cheatsheet-color-' + category.id} txt-small`,
- label: key,
- }))
- }))
- }),
- Widget.Box({ // Actions
- vertical: true,
- homogeneous: true,
- children: category.binds.map((keybinds, _) => Widget.Label({ // Binds
- xalign: 0,
- label: keybinds.action,
- className: "txt chearsheet-action txt-small",
- }))
- })
- ]
- })
- ]
- }))
- })),
-});
\ No newline at end of file
+ children: group.map((category, _) => Category(category))
+ })),
+ })
+ return Widget.Box({
+ vertical: true,
+ className: "spacing-v-10",
+ children: [
+ Widget.Label({
+ useMarkup: true,
+ selectable: true,
+ justify: Gtk.Justification.CENTER,
+ className: 'txt-small txt',
+ label: 'Sheet data stored in ~/.config/ags/modules/cheatsheet/data_keybinds.js\nChange keybinds in ~/.config/hypr/hyprland/keybinds.conf'
+ }),
+ realKeybinds,
+ ]
+ })
+}
\ No newline at end of file
diff --git a/.config/ags/modules/cheatsheet/main.js b/.config/ags/modules/cheatsheet/main.js
index d60577117..76433fb97 100644
--- a/.config/ags/modules/cheatsheet/main.js
+++ b/.config/ags/modules/cheatsheet/main.js
@@ -1,8 +1,23 @@
-const { Gtk } = imports.gi;
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
import { setupCursorHover } from "../.widgetutils/cursorhover.js";
import PopupWindow from '../.widgethacks/popupwindow.js';
import Keybinds from "./keybinds.js";
+import PeriodicTable from "./periodictable.js";
+import { ExpandingIconTabContainer } from '../.commonwidgets/tabcontainer.js';
+import { checkKeybind } from '../.widgetutils/keybind.js';
+
+const cheatsheets = [
+ {
+ name: 'Keybinds',
+ materialIcon: 'keyboard',
+ contentWidget: Keybinds(),
+ },
+ {
+ name: 'Periodic table',
+ materialIcon: 'experiment',
+ contentWidget: PeriodicTable(),
+ },
+];
const CheatsheetHeader = () => Widget.CenterBox({
vertical: false,
@@ -38,13 +53,6 @@ const CheatsheetHeader = () => Widget.CenterBox({
})
]
}),
- Widget.Label({
- useMarkup: true,
- selectable: true,
- justify: Gtk.Justification.CENTER,
- className: 'txt-small txt',
- label: 'Sheet data stored in ~/.config/ags/modules/cheatsheet/data_keybinds.js\nChange keybinds in ~/.config/hypr/hyprland/keybinds.conf'
- }),
]
}),
endWidget: Widget.Button({
@@ -62,6 +70,19 @@ const CheatsheetHeader = () => Widget.CenterBox({
}),
});
+export const sheetContent = ExpandingIconTabContainer({
+ tabsHpack: 'center',
+ tabSwitcherClassName: 'sidebar-icontabswitcher',
+ transitionDuration: userOptions.animations.durationLarge * 1.4,
+ icons: cheatsheets.map((api) => api.materialIcon),
+ names: cheatsheets.map((api) => api.name),
+ children: cheatsheets.map((api) => api.contentWidget),
+ onChange: (self, id) => {
+ self.shown = cheatsheets[id].name;
+ if (cheatsheets[id].onFocus) cheatsheets[id].onFocus();
+ }
+});
+
export default (id) => PopupWindow({
name: `cheatsheet${id}`,
layer: 'overlay',
@@ -72,12 +93,18 @@ export default (id) => PopupWindow({
children: [
Widget.Box({
vertical: true,
- className: "cheatsheet-bg spacing-v-15",
+ className: "cheatsheet-bg spacing-v-5",
children: [
CheatsheetHeader(),
- Keybinds(),
+ sheetContent,
]
}),
],
+ setup: (self) => self.on('key-press-event', (widget, event) => { // Typing
+ if (checkKeybind(event, userOptions.keybinds.cheatsheet.nextTab))
+ sheetContent.nextTab();
+ else if (checkKeybind(event, userOptions.keybinds.cheatsheet.prevTab))
+ sheetContent.prevTab();
+ })
})
});
diff --git a/.config/ags/modules/cheatsheet/periodictable.js b/.config/ags/modules/cheatsheet/periodictable.js
new file mode 100644
index 000000000..b60d465f6
--- /dev/null
+++ b/.config/ags/modules/cheatsheet/periodictable.js
@@ -0,0 +1,58 @@
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import { periodicTable, series } from "./data_periodictable.js";
+const { Box, Button, Label, Revealer } = Widget;
+
+export default () => {
+ const ElementTile = (element) => {
+ return Box({
+ vertical: true,
+ className: (element.name == '' ? 'cheatsheet-periodictable-empty' : 'cheatsheet-periodictable-element'),
+ children: element.name == '' ? null : [
+ Box({
+ className: 'padding-8',
+ children: [
+ Label({
+ label: `${element.number}`,
+ className: "txt txt-tiny",
+ }),
+ Box({ hexpand: true }),
+ Label({
+ label: `${element.weight}`,
+ className: "txt txt-smaller",
+ })
+ ]
+ }),
+ Label({
+ label: `${element.symbol}`,
+ className: "txt txt-large txt-bold",
+ })
+ ]
+ })
+ }
+ const mainBoard = Box({
+ hpack: 'center',
+ vertical: true,
+ className: "spacing-v-3",
+ children: periodicTable.map((row, _) => Box({ // Rows
+ className: "spacing-h-5",
+ children: row.map((element, _) => ElementTile(element))
+ })),
+ });
+ const seriesBoard = Box({
+ hpack: 'center',
+ vertical: true,
+ className: "spacing-v-3",
+ children: series.map((row, _) => Box({ // Rows
+ className: "spacing-h-5",
+ children: row.map((element, _) => ElementTile(element))
+ })),
+ });
+ return Box({
+ vertical: true,
+ className: 'spacing-v-20',
+ children: [
+ mainBoard,
+ seriesBoard
+ ]
+ })
+}
\ No newline at end of file
diff --git a/.config/ags/scss/_cheatsheet.scss b/.config/ags/scss/_cheatsheet.scss
index 70debef02..8e38257ea 100644
--- a/.config/ags/scss/_cheatsheet.scss
+++ b/.config/ags/scss/_cheatsheet.scss
@@ -60,4 +60,18 @@
.cheatsheet-category-title {
@include titlefont;
font-size: 1.705rem;
-}
\ No newline at end of file
+}
+
+.cheatsheet-periodictable-element {
+ min-width: 5.455rem;
+ min-height: 5.455rem;
+ @include small-rounding;
+ background-color: $layer1;
+ color: $onLayer1;
+}
+
+.cheatsheet-periodictable-empty {
+ min-width: 5.455rem;
+ min-height: 5.455rem;
+ @include small-rounding;
+}
diff --git a/.config/ags/scss/_lib_classes.scss b/.config/ags/scss/_lib_classes.scss
index 0e1ae440c..b4b66326f 100644
--- a/.config/ags/scss/_lib_classes.scss
+++ b/.config/ags/scss/_lib_classes.scss
@@ -1,9 +1,7 @@
.test {
- background-image: linear-gradient(
- 45deg, #f4d609 0%, #f4d609 10%, #212121 10%, #212121 20%, #f4d609 20%, #f4d609 30%, #212121 30%,
- #212121 40%, #f4d609 40%, #f4d609 50%, #212121 50%, #212121 60%, #f4d609 60%,
- #f4d609 70%, #212121 70%, #212121 80%, #f4d609 80%, #f4d609 90%, #212121 90%, #212121 100%
- );
+ background-image: linear-gradient(45deg, #f4d609 0%, #f4d609 10%, #212121 10%, #212121 20%, #f4d609 20%, #f4d609 30%, #212121 30%,
+ #212121 40%, #f4d609 40%, #f4d609 50%, #212121 50%, #212121 60%, #f4d609 60%,
+ #f4d609 70%, #212121 70%, #212121 80%, #f4d609 80%, #f4d609 90%, #212121 90%, #212121 100%);
background-repeat: repeat;
}
@@ -184,195 +182,195 @@
min-height: 0.273rem;
}
-.spacing-h-3 > * {
+.spacing-h-3>* {
margin-right: 0.205rem;
}
-.spacing-h-3 > *:last-child {
+.spacing-h-3>*:last-child {
margin-right: 0rem;
}
-.spacing-v-3 > * {
+.spacing-v-3>* {
margin-bottom: 0.205rem;
}
-.spacing-v-3 > *:last-child {
+.spacing-v-3>*:last-child {
margin-bottom: 0rem;
}
-.spacing-v-15 > * {
+.spacing-v-15>* {
margin-bottom: 1.023rem;
}
-.spacing-v-15 > *:last-child {
+.spacing-v-15>*:last-child {
margin-bottom: 0rem;
}
-.spacing-h-15 > * {
+.spacing-h-15>* {
margin-right: 1.023rem;
}
-.spacing-h-15 > *:last-child {
+.spacing-h-15>*:last-child {
margin-right: 0rem;
}
-.spacing-h-15 > revealer > * {
+.spacing-h-15>revealer>* {
margin-right: 1.023rem;
}
-.spacing-h-15 > revealer:last-child > * {
+.spacing-h-15>revealer:last-child>* {
margin-right: 0rem;
}
-.spacing-h-15 > scrolledwindow > * {
+.spacing-h-15>scrolledwindow>* {
margin-right: 1.023rem;
}
-.spacing-h-15 > scrolledwindow:last-child > * {
+.spacing-h-15>scrolledwindow:last-child>* {
margin-right: 0rem;
}
-.spacing-v-5 > box {
+.spacing-v-5>box {
margin-bottom: 0.341rem;
}
-.spacing-v-5 > box:last-child {
+.spacing-v-5>box:last-child {
margin-bottom: 0rem;
}
-.spacing-v-5 > * {
+.spacing-v-5>* {
margin-bottom: 0.341rem;
}
-.spacing-v-5 > *:last-child {
+.spacing-v-5>*:last-child {
margin-bottom: 0rem;
}
-.spacing-v-5-revealer > revealer > * {
+.spacing-v-5-revealer>revealer>* {
margin-bottom: 0.341rem;
}
-.spacing-v-5-revealer > revealer:last-child > * {
+.spacing-v-5-revealer>revealer:last-child>* {
margin-bottom: 0rem;
}
-.spacing-v-5-revealer > scrolledwindow > * {
+.spacing-v-5-revealer>scrolledwindow>* {
margin-bottom: 0.341rem;
}
-.spacing-v-5-revealer > scrolledwindow:last-child > * {
+.spacing-v-5-revealer>scrolledwindow:last-child>* {
margin-bottom: 0rem;
}
-.spacing-h-4 > * {
+.spacing-h-4>* {
margin-right: 0.273rem;
}
-.spacing-h-4 > *:last-child {
+.spacing-h-4>*:last-child {
margin-right: 0rem;
}
-.spacing-h-4 > overlay > *:first-child {
+.spacing-h-4>overlay>*:first-child {
margin-right: 0.273rem;
}
-.spacing-h-4 > overlay:last-child > * {
+.spacing-h-4>overlay:last-child>* {
margin-right: 0rem;
}
-.spacing-h-5 > * {
+.spacing-h-5>* {
margin-right: 0.341rem;
}
-.spacing-h-5 > *:last-child {
+.spacing-h-5>*:last-child {
margin-right: 0rem;
}
-.spacing-h-5 > widget > * {
+.spacing-h-5>widget>* {
margin-right: 0.341rem;
}
-.spacing-h-5 > widget:last-child > * {
+.spacing-h-5>widget:last-child>* {
margin-right: 0rem;
}
-.spacing-h-5 > revealer > * {
+.spacing-h-5>revealer>* {
margin-right: 0.341rem;
}
-.spacing-h-5 > revealer:last-child > * {
+.spacing-h-5>revealer:last-child>* {
margin-right: 0rem;
}
-.spacing-h-5 > scrolledwindow > * {
+.spacing-h-5>scrolledwindow>* {
margin-right: 0.341rem;
}
-.spacing-h-5 > scrolledwindow:last-child > * {
+.spacing-h-5>scrolledwindow:last-child>* {
margin-right: 0rem;
}
-.spacing-v-minus5 > * {
+.spacing-v-minus5>* {
margin-bottom: -0.341rem;
}
-.spacing-v-minus5 > *:last-child {
+.spacing-v-minus5>*:last-child {
margin-bottom: 0rem;
}
-.spacing-h-10 > * {
+.spacing-h-10>* {
margin-right: 0.682rem;
}
-.spacing-h-10 > *:last-child {
+.spacing-h-10>*:last-child {
margin-right: 0rem;
}
-.spacing-h-10 > revealer > * {
+.spacing-h-10>revealer>* {
margin-right: 0.682rem;
}
-.spacing-h-10 > revealer:last-child > * {
+.spacing-h-10>revealer:last-child>* {
margin-right: 0rem;
}
-.spacing-h-10 > scrolledwindow > * {
+.spacing-h-10>scrolledwindow>* {
margin-right: 0.682rem;
}
-.spacing-h-10 > scrolledwindow:last-child > * {
+.spacing-h-10>scrolledwindow:last-child>* {
margin-right: 0rem;
}
-.spacing-h-10 > flowboxchild > * {
+.spacing-h-10>flowboxchild>* {
margin-right: 0.682rem;
}
-.spacing-h-10 > flowboxchild:last-child > * {
+.spacing-h-10>flowboxchild:last-child>* {
margin-right: 0rem;
}
-.spacing-v-10 > * {
+.spacing-v-10>* {
margin-bottom: 0.682rem;
}
-.spacing-v-10 > *:last-child {
+.spacing-v-10>*:last-child {
margin-bottom: 0rem;
}
-.spacing-h-20 > * {
+.spacing-h-20>* {
margin-right: 1.364rem;
}
-.spacing-h-20 > *:last-child {
+.spacing-h-20>*:last-child {
margin-right: 0rem;
}
-.spacing-v-20 > * {
+.spacing-v-20>* {
margin-bottom: 1.364rem;
}
-.spacing-v-20 > *:last-child {
+.spacing-v-20>*:last-child {
margin-bottom: 0rem;
}
@@ -388,56 +386,15 @@
@include button-minsize;
}
-.margin-right-5 {
- margin-right: 0.341rem;
-}
-
-.margin-left-5 {
- margin-left: 0.341rem;
-}
-
-.margin-top-5 {
- margin-top: 0.341rem;
-}
-
-.margin-bottom-5 {
- margin-bottom: 0.341rem;
-}
-
-.margin-right-10 {
- margin-right: 0.682rem;
-}
-
-.margin-left-10 {
- margin-left: 0.682rem;
-}
-
-.margin-top-10 {
- margin-top: 0.682rem;
-}
-
-.margin-bottom-10 {
- margin-bottom: 0.682rem;
-}
-
-.margin-bottom-8 { // wtf
- margin-bottom: 0.545rem;
-}
-
-.margin-right-15 {
- margin-right: 1.023rem;
-}
-
-.margin-left-15 {
- margin-left: 1.023rem;
-}
-
-.margin-top-15 {
- margin-top: 1.023rem;
-}
-
-.margin-bottom-15 {
- margin-bottom: 1.023rem;
+@each $spacing in (5, 8, 10, 15) {
+ @each $dir in ("top", "bottom", "left", "right") {
+ .margin-#{$dir}-#{$spacing} {
+ margin-#{$dir}: 0.068rem * $spacing;
+ }
+ }
+ .padding-#{$spacing} {
+ padding: 0.068rem * $spacing;
+ }
}
.width-10 {
@@ -454,51 +411,51 @@
color: transparent;
}
-.spacing-h--5 > box {
+.spacing-h--5>box {
margin-right: -0.341rem;
}
-.spacing-h--5 > box:last-child {
+.spacing-h--5>box:last-child {
margin-right: 0rem;
}
-.spacing-v--5 > * {
+.spacing-v--5>* {
margin-bottom: -0.341rem;
}
-.spacing-v--5 > *:last-child {
+.spacing-v--5>*:last-child {
margin-bottom: 0rem;
}
-.spacing-h--10 > * {
+.spacing-h--10>* {
margin-left: -1.364rem;
}
-.spacing-h--10 > *:first-child {
+.spacing-h--10>*:first-child {
margin-left: 0rem;
}
-.spacing-v--10 > * {
+.spacing-v--10>* {
margin-bottom: -0.682rem;
}
-.spacing-v--10 > *:last-child {
+.spacing-v--10>*:last-child {
margin-bottom: 0rem;
}
-.spacing-v--10 > * {
+.spacing-v--10>* {
margin-bottom: -0.682rem;
}
-.spacing-v--10 > *:last-child {
+.spacing-v--10>*:last-child {
margin-bottom: 0rem;
}
-.spacing-h--20 > * {
+.spacing-h--20>* {
margin-left: -1.364rem;
}
-.spacing-h--20 > *:first-child {
+.spacing-h--20>*:first-child {
margin-left: 0rem;
}
@@ -509,21 +466,27 @@
.menu-decel {
@include menu_decel;
}
+
.element-show {
@include element_easeInOut;
}
+
.element-hide {
@include element_easeInOut;
}
+
.element-move {
@include element_easeInOut;
}
+
.element-decel {
@include element_decel;
}
+
.element-bounceout {
@include element_bounceOut;
}
+
.element-accel {
@include element_accel;
-}
+}
\ No newline at end of file