Skip to content

Commit

Permalink
refactor: list item factory improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@diegopvlk
diegopvlk committed Dec 30, 2024
1 parent 2a415fd commit e13f787
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 124 deletions.
85 changes: 46 additions & 39 deletions src/historyFactory.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,93 +9,106 @@ import Gdk from 'gi://Gdk';
import Pango from 'gi://Pango';

import { clockIs12 } from './utils.js';
import { historyLS } from './window.js';

export const historyHeaderFactory = new Gtk.SignalListItemFactory();
export const historyItemFactory = new Gtk.SignalListItemFactory();

export let removedItem;

historyHeaderFactory.connect('setup', (factory, listHeaderItem) => {
const dateLabel = new Gtk.Label({
listHeaderItem.dateLabel = new Gtk.Label({
halign: Gtk.Align.START,
ellipsize: Pango.EllipsizeMode.END,
margin_bottom: 1,
});
listHeaderItem.set_child(dateLabel);

listHeaderItem.set_child(listHeaderItem.dateLabel);
});

historyHeaderFactory.connect('bind', (factory, listHeaderItem) => {
const item = listHeaderItem.get_item().obj;
const dateLabel = listHeaderItem.get_child();
const dateLabel = listHeaderItem.dateLabel;

const date = new Date(item.taken[0]);
const formattedDt = date.toLocaleDateString(undefined, {
weekday: 'long',
month: 'short',
day: 'numeric',
year: 'numeric',
});

dateLabel.label = formattedDt.charAt(0).toUpperCase() + formattedDt.slice(1);
});

historyItemFactory.connect('setup', (factory, listItem) => {
const box = new Gtk.Box({
css_classes: ['item-box'],
});
const deleteButton = new Gtk.Button({
listItem.box = new Gtk.Box();

listItem.deleteButton = new Gtk.Button({
css_classes: ['circular'],
valign: Gtk.Align.CENTER,
halign: Gtk.Align.CENTER,
margin_start: 11,
});
box.append(deleteButton);
const labelsBox = new Gtk.Box({

listItem.box.append(listItem.deleteButton);

listItem.labelsBox = new Gtk.Box({
valign: Gtk.Align.CENTER,
hexpand: true,
orientation: Gtk.Orientation.VERTICAL,
margin_start: 10,
margin_end: 10,
});
box.append(labelsBox);
const name = new Gtk.Label({

listItem.box.append(listItem.labelsBox);

listItem.nameLabel = new Gtk.Label({
halign: Gtk.Align.START,
ellipsize: Pango.EllipsizeMode.END,
margin_bottom: 1,
});
labelsBox.append(name);
const dose = new Gtk.Label({

listItem.labelsBox.append(listItem.nameLabel);

listItem.doseLabel = new Gtk.Label({
css_classes: ['subtitle'],
halign: Gtk.Align.START,
ellipsize: Pango.EllipsizeMode.END,
});
labelsBox.append(dose);
const takenBox = new Gtk.Box({

listItem.labelsBox.append(listItem.doseLabel);

listItem.takenBox = new Gtk.Box({
css_classes: ['badge-box'],
valign: Gtk.Align.CENTER,
margin_end: 14,
});
const takenLabel = new Gtk.Label({

listItem.takenLabel = new Gtk.Label({
css_classes: ['badge-content'],
valign: Gtk.Align.CENTER,
ellipsize: Pango.EllipsizeMode.END,
});
const takenIcon = new Gtk.Image({

listItem.takenIcon = new Gtk.Image({
css_classes: ['badge-content', 'badge-icon'],
icon_name: 'check-confirmed',
});
takenBox.append(takenLabel);
takenBox.append(takenIcon);
box.append(takenBox);
listItem.set_child(box);

deleteButton.connect('clicked', () => {
listItem.takenBox.append(listItem.takenLabel);
listItem.takenBox.append(listItem.takenIcon);
listItem.box.append(listItem.takenBox);
listItem.set_child(listItem.box);

listItem.deleteButton.connect('clicked', () => {
const item = listItem.get_item();
const listView = box.get_parent().get_parent();
const listStore = listView.get_model().get_model().get_model().get_model();
const listView = listItem.box.get_parent().get_parent();
let position = listItem.get_position();

removedItem = item;
let [, pos] = listStore.find(item);
listStore.remove(pos);
let [, pos] = historyLS.find(item);
historyLS.remove(pos);

if (listView.get_model().get_n_items() === position) {
// if it's the last position, position - 1
Expand All @@ -112,15 +125,13 @@ historyItemFactory.connect('setup', (factory, listItem) => {

historyItemFactory.connect('bind', (factory, listItem) => {
const item = listItem.get_item().obj;
const box = listItem.get_child();
const box = listItem.box;
const row = box.get_parent();
const deleteButton = box.get_first_child();
const labelsBox = box.get_first_child().get_next_sibling();
const nameLabel = labelsBox.get_first_child();
const doseLabel = nameLabel.get_next_sibling();
const takenBox = box.get_last_child();
const takenLabel = takenBox.get_first_child();
const takenIcon = takenLabel.get_next_sibling();
const deleteButton = listItem.deleteButton;
const nameLabel = listItem.nameLabel;
const doseLabel = listItem.doseLabel;
const takenLabel = listItem.takenLabel;
const takenIcon = listItem.takenIcon;
const today = new Date();
const itemDate = new Date(item.taken[0]);
const itemTime = new Date();
Expand Down Expand Up @@ -164,9 +175,5 @@ historyItemFactory.connect('bind', (factory, listItem) => {
takenLabel.remove_css_class('badge-end-border');
}

['default', 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple'].forEach(c =>
box.remove_css_class(c),
);

box.add_css_class(item.color);
box.set_css_classes(['item-box', item.color]);
});
95 changes: 50 additions & 45 deletions src/todayFactory.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,23 @@ export const todayHeaderFactory = new Gtk.SignalListItemFactory();
export const todayItemFactory = new Gtk.SignalListItemFactory();

todayHeaderFactory.connect('setup', (factory, listHeaderItem) => {
const box = new Gtk.Box({
listHeaderItem.box = new Gtk.Box({
hexpand: true,
});
const selectTimeGroupBtn = new Gtk.Button({

listHeaderItem.selectTimeGroupBtn = new Gtk.Button({
css_classes: ['time-group-selection', 'flat'],
valign: Gtk.Align.START,
});
box.append(selectTimeGroupBtn);
listHeaderItem.set_child(box);

listHeaderItem.box.append(listHeaderItem.selectTimeGroupBtn);
listHeaderItem.set_child(listHeaderItem.box);
});

todayHeaderFactory.connect('bind', (factory, listHeaderItem) => {
const item = listHeaderItem.get_item().obj;
const selectTimeGroupBtn = listHeaderItem.get_child().get_first_child();
const selectTimeGroupBtn = listHeaderItem.selectTimeGroupBtn;

const itemTime = new Date();
itemTime.setHours(item.time[0], item.time[1]);
const formatOpt = { hour: 'numeric', minute: 'numeric', hour12: clockIs12 };
Expand All @@ -50,48 +53,58 @@ todayHeaderFactory.connect('bind', (factory, listHeaderItem) => {
});

todayItemFactory.connect('setup', (factory, listItem) => {
const box = new Gtk.Box({
css_classes: ['item-box'],
});
const icon = new Gtk.Image({
listItem.box = new Gtk.Box();

listItem.icon = new Gtk.Image({
margin_start: 17,
margin_end: 4,
icon_name: 'pill-symbolic',
});
box.append(icon);
const labelsBox = new Gtk.Box({

listItem.box.append(listItem.icon);

listItem.labelsBox = new Gtk.Box({
valign: Gtk.Align.CENTER,
hexpand: true,
orientation: Gtk.Orientation.VERTICAL,
margin_start: 9,
margin_end: 12,
});
box.append(labelsBox);
const name = new Gtk.Label({

listItem.box.append(listItem.labelsBox);

listItem.nameLabel = new Gtk.Label({
halign: Gtk.Align.START,
ellipsize: Pango.EllipsizeMode.END,
margin_bottom: 1,
});
labelsBox.append(name);
const doseAndNotes = new Gtk.Label({

listItem.labelsBox.append(listItem.nameLabel);

listItem.doseAndNotes = new Gtk.Label({
css_classes: ['subtitle'],
halign: Gtk.Align.START,
ellipsize: Pango.EllipsizeMode.END,
});
labelsBox.append(doseAndNotes);
const amountBox = new Gtk.Box({

listItem.labelsBox.append(listItem.doseAndNotes);

listItem.amountBox = new Gtk.Box({
css_classes: ['spin-box', 'spin-today-amount'],
});
const amountRow = new Adw.SpinRow({

listItem.amtSpinRow = new Adw.SpinRow({
digits: 2,
adjustment: new Gtk.Adjustment({
lower: 0.25,
upper: 9999,
step_increment: 0.25,
}),
});
amountBox.append(amountRow);
const amountBtn = new Gtk.MenuButton({

listItem.amountBox.append(listItem.amtSpinRow);

listItem.amountBtn = new Gtk.MenuButton({
tooltip_text: _('Change dose'),
css_classes: ['circular', 'today-amount'],
icon_name: 'view-more-horizontal-symbolic',
Expand All @@ -104,42 +117,39 @@ todayItemFactory.connect('setup', (factory, listItem) => {
child: new Gtk.ScrolledWindow({
propagate_natural_height: true,
propagate_natural_width: true,
child: amountBox,
child: listItem.amountBox,
}),
}),
});
box.append(amountBtn);
const checkButton = new Gtk.CheckButton({

listItem.box.append(listItem.amountBtn);

listItem.checkButton = new Gtk.CheckButton({
css_classes: ['selection-mode'],
valign: Gtk.Align.CENTER,
halign: Gtk.Align.CENTER,
margin_end: 11,
can_focus: false,
can_target: false,
});
box.append(checkButton);
listItem.set_child(box);

listItem.box.append(listItem.checkButton);
listItem.set_child(listItem.box);
});

todayItemFactory.connect('bind', (factory, listItem) => {
const item = listItem.get_item().obj;
const box = listItem.get_child();
const box = listItem.box;
const row = box.get_parent();
const icon = box.get_first_child();
const labelsBox = icon.get_next_sibling();
const amtBtn = labelsBox.get_next_sibling();
const amtBtnPopover = amtBtn.get_popover();
const amtSpinRow = amtBtnPopover
.get_child()
.get_first_child()
.get_first_child()
.get_first_child();
const name = labelsBox.get_first_child();
const doseAndNotes = name.get_next_sibling();
const checkButton = box.get_last_child();
const icon = listItem.icon;
const amountBtn = listItem.amountBtn;
const amtSpinRow = listItem.amtSpinRow;
const name = listItem.nameLabel;
const doseAndNotes = listItem.doseAndNotes;
const checkButton = listItem.checkButton;

item.doseAndNotes = doseAndNotes;
item.amtBtn = amtBtn;
item.amountBtn = amountBtn;
item.amtSpinRow = amtSpinRow;
item.checkButton = checkButton;

Expand All @@ -153,12 +163,6 @@ todayItemFactory.connect('bind', (factory, listItem) => {
});
row.add_controller(keyController);

['default', 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple'].forEach(c =>
box.remove_css_class(c),
);

box.add_css_class(item.color);

name.label = item.name;
doseAndNotes.label = `${item.dose} ${item.unit}`;

Expand All @@ -167,4 +171,5 @@ todayItemFactory.connect('bind', (factory, listItem) => {
}

icon.icon_name = item.icon;
box.set_css_classes(['item-box', item.color]);
});
Loading

0 comments on commit e13f787

Please sign in to comment.