forked from Shinonome/dots-hyprland
Initial commit
This commit is contained in:
end-4
@@ -0,0 +1,245 @@
|
||||
// Not yet used. For cool drag and drop stuff. Thanks DevAlien
|
||||
|
||||
const Toggles = {};
|
||||
Toggles.Wifi = NetworkToggle;
|
||||
Toggles.Bluetooth = BluetoothToggle;
|
||||
Toggles.DND = DNDToggle;
|
||||
Toggles.ThemeToggle = ThemeToggle;
|
||||
Toggles.ProfileToggle = ProfileToggle;
|
||||
// Toggles.Record = RecordToggle;
|
||||
// Toggles.Airplane = AirplaneToggle;
|
||||
// Toggles.DoNotDisturb = DoNotDisturbToggle;
|
||||
const TARGET = [Gtk.TargetEntry.new("text/plain", Gtk.TargetFlags.SAME_APP, 0)];
|
||||
|
||||
export class ActionCenter extends Gtk.Box {
|
||||
static {
|
||||
GObject.registerClass({
|
||||
GTypeName: 'ActionCenter',
|
||||
Properties: {
|
||||
|
||||
},
|
||||
}, this);
|
||||
}
|
||||
|
||||
constructor({ className = "ActionCenter", toggles, ...rest }) {
|
||||
super(rest);
|
||||
this.toggles = Toggles
|
||||
this.currentToggles = Settings.getSetting("toggles", []);
|
||||
this.mainFlowBox = this._setupFlowBox(className + QSView.editing && className + "Editing");
|
||||
this.mainFlowBox.connect("drag_motion", this._dragMotionMain);
|
||||
this.mainFlowBox.connect("drag_drop", this._dragDropMain);
|
||||
this._dragged = {};
|
||||
this._draggedExtra = {};
|
||||
|
||||
this._dragged;
|
||||
this._currentPosition = 0;
|
||||
this._orderedState;
|
||||
this._draggedName;
|
||||
|
||||
this.updateList(toggles, this.mainFlowBox)
|
||||
|
||||
this.set_orientation(Gtk.Orientation.VERTICAL);
|
||||
this.add(this.mainFlowBox)
|
||||
this.mainFlowBox.set_size_request(1, 30)
|
||||
if (QSView.editing) {
|
||||
this.extraFlowBox = this._setupFlowBox(className);
|
||||
this.extraFlowBox.connect("drag_motion", this._dragMotionExtra);
|
||||
this.extraFlowBox.connect("drag_drop", this._dragDropExtra);
|
||||
this.updateList(this._getExtraToggles(), this.extraFlowBox)
|
||||
this.add(Box({
|
||||
vertical: true,
|
||||
children: [
|
||||
Label("Extra widgets"),
|
||||
Label("Drop here to remove or drag from here to add"),
|
||||
this.extraFlowBox
|
||||
]
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
_getExtraToggles() {
|
||||
let toggles = { ...this.toggles }
|
||||
this.currentToggles.map(t => {
|
||||
if (toggles[t]) {
|
||||
delete toggles[t];
|
||||
}
|
||||
});
|
||||
return Object.keys(toggles);
|
||||
}
|
||||
|
||||
_setupFlowBox(className) {
|
||||
const flowBox = new Gtk.FlowBox();
|
||||
flowBox.set_valign(Gtk.Align.FILL);
|
||||
flowBox.set_min_children_per_line(2);
|
||||
flowBox.set_max_children_per_line(2);
|
||||
flowBox.set_selection_mode(Gtk.SelectionMode.NONE);
|
||||
flowBox.get_style_context().add_class(className);
|
||||
flowBox.set_homogeneous(true);
|
||||
flowBox.drag_dest_set(Gtk.DestDefaults.ALL, TARGET, Gdk.DragAction.COPY);
|
||||
|
||||
return flowBox;
|
||||
}
|
||||
|
||||
createWidget = (name, index, type) => {
|
||||
const editSetup = (widget) => {
|
||||
widget.drag_source_set(
|
||||
Gdk.ModifierType.BUTTON1_MASK,
|
||||
TARGET,
|
||||
Gdk.DragAction.COPY
|
||||
);
|
||||
|
||||
widget.connect("drag-begin", (w, context) => {
|
||||
const widgetContainer = widget.get_parent();
|
||||
|
||||
Gtk.drag_set_icon_surface(context, createSurfaceFromWidget(widgetContainer));
|
||||
this._dragged = {
|
||||
widget: widgetContainer.get_parent().get_parent(),
|
||||
container: widgetContainer,
|
||||
name: name,
|
||||
currentPosition: type === "Main" ? index : null,
|
||||
currentPositionExtra: type === "Extra" ? index : null,
|
||||
from: type,
|
||||
}
|
||||
widgetContainer.get_style_context().add_class("hidden");
|
||||
if (type !== "Main") {
|
||||
this.extraFlowBox.remove(this._dragged.widget);
|
||||
}
|
||||
|
||||
|
||||
return true;
|
||||
});
|
||||
widget.connect("drag-failed", () => {
|
||||
this.updateList(Settings.getSetting("toggles"), this.mainFlowBox)
|
||||
this.updateList(this._getExtraToggles(), this.extraFlowBox)
|
||||
});
|
||||
}
|
||||
|
||||
let row = new Gtk.FlowBoxChild({ visible: true });
|
||||
row.add(Toggles[name]({ setup: QSView.editing && editSetup, QSView: QSView }));
|
||||
row._index = index;
|
||||
row._name = name;
|
||||
return row;
|
||||
}
|
||||
|
||||
updateList(toggles, flowBox) {
|
||||
let type = flowBox === this.mainFlowBox ? "Main" : "Extra"
|
||||
var childrenBox = flowBox.get_children();
|
||||
childrenBox.forEach((element) => {
|
||||
flowBox.remove(element);
|
||||
element.destroy();
|
||||
});
|
||||
|
||||
if (!toggles) return;
|
||||
|
||||
toggles.forEach((name, i) => {
|
||||
if (Toggles[name])
|
||||
flowBox.add(this.createWidget(name, i, type));
|
||||
});
|
||||
flowBox.show_all();
|
||||
}
|
||||
|
||||
|
||||
_dragMotionMain = (widget, context, x, y, time) => {
|
||||
if (this._dragged.currentPositionExtra !== null) {
|
||||
this._dragged.currentPositionExtra = null;
|
||||
if (this._isChild(this.extraFlowBox, this._dragged.widget)) {
|
||||
this.extraFlowBox.remove(this._dragged.widget);
|
||||
}
|
||||
}
|
||||
const children = this.mainFlowBox.get_children();
|
||||
const sampleItem = children[0];
|
||||
const sampleWidth = sampleItem.get_allocation().width;
|
||||
const sampleHeight = sampleItem.get_allocated_height();
|
||||
const perLine = Math.floor(this.mainFlowBox.get_allocation().width / sampleWidth);
|
||||
const pos = Math.floor(y / sampleHeight) * perLine + Math.floor(x / sampleWidth);
|
||||
if (pos >= children.length && pos !== 0) return false;
|
||||
|
||||
if (this._dragged.currentPosition === null) {
|
||||
this.mainFlowBox.insert(this._dragged.widget, pos);
|
||||
|
||||
this._dragged.currentPosition = pos;
|
||||
} else if (this._dragged.currentPosition !== pos) {
|
||||
if (this._isChild(this.mainFlowBox, this._dragged.widget)) {
|
||||
this.mainFlowBox.remove(this._dragged.widget);
|
||||
}
|
||||
|
||||
this.mainFlowBox.insert(this._dragged.widget, pos);
|
||||
|
||||
this._dragged.currentPosition = pos;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
_dragDropMain = () => {
|
||||
if (this._dragged.from !== "Main") {
|
||||
this.currentToggles.splice(this._dragged.currentPosition, 0, this._dragged.name);
|
||||
} else {
|
||||
const indexCurrentToggle = this.currentToggles.indexOf(this._dragged.name);
|
||||
this.currentToggles.splice(indexCurrentToggle, 1);
|
||||
this.currentToggles.splice(this._dragged.currentPosition, 0, this._dragged.name);
|
||||
}
|
||||
|
||||
Settings.setSetting("toggles", this.currentToggles);
|
||||
this._dragged.container.get_style_context().remove_class("hidden");
|
||||
return true;
|
||||
}
|
||||
|
||||
_dragDropExtra = () => {
|
||||
if (this._dragged.from === "Main") {
|
||||
const indexCurrentToggle = this.currentToggles.indexOf(this._dragged.name);
|
||||
this.currentToggles.splice(indexCurrentToggle, 1);
|
||||
}
|
||||
|
||||
Settings.setSetting("toggles", this.currentToggles);
|
||||
this._dragged.container.get_style_context().remove_class("hidden");
|
||||
return true;
|
||||
}
|
||||
|
||||
_dragMotionExtra = (widget, context, x, y, time) => {
|
||||
if (this._dragged.currentPosition !== null) {
|
||||
this._dragged.currentPosition = null;
|
||||
if (this._isChild(this.mainFlowBox, this._dragged.widget)) {
|
||||
this.mainFlowBox.remove(this._dragged.widget);
|
||||
}
|
||||
}
|
||||
|
||||
const children = this.extraFlowBox.get_children();
|
||||
const sampleItem = children[0];
|
||||
let pos = 0;
|
||||
if (sampleItem) {
|
||||
const sampleWidth = sampleItem.get_allocation().width;
|
||||
const sampleHeight = sampleItem.get_allocated_height();
|
||||
const perLine = Math.floor(this.extraFlowBox.get_allocation().width / sampleWidth);
|
||||
pos = Math.floor(y / sampleHeight) * perLine + Math.floor(x / sampleWidth);
|
||||
}
|
||||
|
||||
if (pos >= children.length && pos !== 0) return false;
|
||||
|
||||
if (this._dragged.currentPositionExtra === null) {
|
||||
this.extraFlowBox.insert(this._dragged.widget, pos);
|
||||
|
||||
this._dragged.currentPositionExtra = pos;
|
||||
}
|
||||
|
||||
if (this._dragged.currentPositionExtra !== pos) {
|
||||
if (this._isChild(this.extraFlowBox, this._dragged.widget)) {
|
||||
this.extraFlowBox.remove(this._dragged.widget);
|
||||
}
|
||||
|
||||
this.extraFlowBox.insert(this._dragged.widget, pos);
|
||||
|
||||
this._dragged.currentPositionExtra = pos;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
_isChild(container, widget) {
|
||||
let found = false;
|
||||
container.get_children().forEach((c) => {
|
||||
if (c === widget) found = true;
|
||||
})
|
||||
return found;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
const { Gdk, Gtk } = imports.gi;
|
||||
const GObject = imports.gi.GObject;
|
||||
const Lang = imports.lang;
|
||||
import { Utils, Widget } from '../imports.js';
|
||||
|
||||
// -- Styling --
|
||||
// min-height for diameter
|
||||
// min-width for trough stroke
|
||||
// padding for space between trough and progress
|
||||
// margin for space between widget and parent
|
||||
// background-color for trough color
|
||||
// color for progress color
|
||||
// -- Usage --
|
||||
// font size for progress value (0-100px) (hacky i know, but i want animations)
|
||||
export const AnimatedCircProg = ({
|
||||
initFrom = 0,
|
||||
initTo = 0,
|
||||
initAnimTime = 2900,
|
||||
initAnimPoints = 1,
|
||||
...rest
|
||||
}) => Widget.DrawingArea({
|
||||
...rest,
|
||||
css: `${initFrom != initTo ? 'font-size: ' + initFrom + 'px; transition: ' + initAnimTime + 'ms linear;' : ''}`,
|
||||
setup: (area) => {
|
||||
const styleContext = area.get_style_context();
|
||||
const width = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
|
||||
const height = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
|
||||
const padding = styleContext.get_padding(Gtk.StateFlags.NORMAL).left;
|
||||
const marginLeft = styleContext.get_margin(Gtk.StateFlags.NORMAL).left;
|
||||
const marginRight = styleContext.get_margin(Gtk.StateFlags.NORMAL).right;
|
||||
const marginTop = styleContext.get_margin(Gtk.StateFlags.NORMAL).top;
|
||||
const marginBottom = styleContext.get_margin(Gtk.StateFlags.NORMAL).bottom;
|
||||
area.set_size_request(width + marginLeft + marginRight, height + marginTop + marginBottom);
|
||||
area.connect('draw', Lang.bind(area, (area, cr) => {
|
||||
const styleContext = area.get_style_context();
|
||||
const width = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
|
||||
const height = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
|
||||
const padding = styleContext.get_padding(Gtk.StateFlags.NORMAL).left;
|
||||
const marginLeft = styleContext.get_margin(Gtk.StateFlags.NORMAL).left;
|
||||
const marginRight = styleContext.get_margin(Gtk.StateFlags.NORMAL).right;
|
||||
const marginTop = styleContext.get_margin(Gtk.StateFlags.NORMAL).top;
|
||||
const marginBottom = styleContext.get_margin(Gtk.StateFlags.NORMAL).bottom;
|
||||
area.set_size_request(width + marginLeft + marginRight, height + marginTop + marginBottom);
|
||||
|
||||
const progressValue = styleContext.get_property('font-size', Gtk.StateFlags.NORMAL) / 100.0;
|
||||
|
||||
const bg_stroke = styleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
|
||||
const fg_stroke = bg_stroke - padding;
|
||||
const radius = Math.min(width, height) / 2.0 - Math.max(bg_stroke, fg_stroke) / 2.0;
|
||||
const center_x = width / 2.0 + marginLeft;
|
||||
const center_y = height / 2.0 + marginTop;
|
||||
const start_angle = -Math.PI / 2.0;
|
||||
const end_angle = start_angle + (2 * Math.PI * progressValue);
|
||||
const start_x = center_x + Math.cos(start_angle) * radius;
|
||||
const start_y = center_y + Math.sin(start_angle) * radius;
|
||||
const end_x = center_x + Math.cos(end_angle) * radius;
|
||||
const end_y = center_y + Math.sin(end_angle) * radius;
|
||||
|
||||
// Draw background
|
||||
const background_color = styleContext.get_property('background-color', Gtk.StateFlags.NORMAL);
|
||||
cr.setSourceRGBA(background_color.red, background_color.green, background_color.blue, background_color.alpha);
|
||||
cr.arc(center_x, center_y, radius, 0, 2 * Math.PI);
|
||||
cr.setLineWidth(bg_stroke);
|
||||
cr.stroke();
|
||||
|
||||
if (progressValue == 0) return;
|
||||
|
||||
// Draw progress
|
||||
const color = styleContext.get_property('color', Gtk.StateFlags.NORMAL);
|
||||
cr.setSourceRGBA(color.red, color.green, color.blue, color.alpha);
|
||||
cr.arc(center_x, center_y, radius, start_angle, end_angle);
|
||||
cr.setLineWidth(fg_stroke);
|
||||
cr.stroke();
|
||||
|
||||
// Draw rounded ends for progress arcs
|
||||
cr.setLineWidth(0);
|
||||
cr.arc(start_x, start_y, fg_stroke / 2, 0, 0 - 0.01);
|
||||
cr.fill();
|
||||
cr.arc(end_x, end_y, fg_stroke / 2, 0, 0 - 0.01);
|
||||
cr.fill();
|
||||
}));
|
||||
|
||||
// Init animation
|
||||
if (initFrom != initTo) {
|
||||
// area.css = `font-size: ${initFrom}px; transition: ${initAnimTime}ms linear;`;
|
||||
Utils.timeout(20, () => {
|
||||
area.css = `font-size: ${initTo}px;`;
|
||||
})
|
||||
// const transitionDistance = initTo - initFrom;
|
||||
// const oneStep = initAnimTime / initAnimPoints;
|
||||
// area.css = `
|
||||
// font-size: ${initFrom}px;
|
||||
// transition: ${oneStep}ms linear;
|
||||
// `;
|
||||
// for (let i = 0; i < initAnimPoints; i++) {
|
||||
// Utils.timeout(Math.max(10, i * oneStep), () => {
|
||||
// if(!area) return;
|
||||
// area.css = `${initFrom != initTo ? 'font-size: ' + (initFrom + (transitionDistance / initAnimPoints * (i + 1))) + 'px;' : ''}`;
|
||||
// });
|
||||
// }
|
||||
}
|
||||
else area.css = 'font-size: 0px;';
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,87 @@
|
||||
const { GLib, Gio } = imports.gi;
|
||||
|
||||
function checkLeapYear(year) {
|
||||
return (
|
||||
year % 400 == 0 ||
|
||||
(year % 4 == 0 && year % 100 != 0));
|
||||
}
|
||||
|
||||
function getMonthDays(month, year) {
|
||||
const leapYear = checkLeapYear(year);
|
||||
if ((month <= 7 && month % 2 == 1) || (month >= 8 && month % 2 == 0)) return 31;
|
||||
if (month == 2 && leapYear) return 29;
|
||||
if (month == 2 && !leapYear) return 28;
|
||||
return 30;
|
||||
}
|
||||
|
||||
function getNextMonthDays(month, year) {
|
||||
const leapYear = checkLeapYear(year);
|
||||
if (month == 1 && leapYear) return 29;
|
||||
if (month == 1 && !leapYear) return 28;
|
||||
if (month == 12) return 31;
|
||||
if ((month <= 7 && month % 2 == 1) || (month >= 8 && month % 2 == 0)) return 30;
|
||||
return 31;
|
||||
}
|
||||
|
||||
function getPrevMonthDays(month, year) {
|
||||
const leapYear = checkLeapYear(year);
|
||||
if (month == 3 && leapYear) return 29;
|
||||
if (month == 3 && !leapYear) return 28;
|
||||
if (month == 1) return 31;
|
||||
if ((month <= 7 && month % 2 == 1) || (month >= 8 && month % 2 == 0)) return 30;
|
||||
return 31;
|
||||
}
|
||||
|
||||
export function getCalendarLayout(dateObject, highlight) {
|
||||
if (!dateObject) dateObject = new Date();
|
||||
const weekday = (dateObject.getDay() + 6) % 7; // MONDAY IS THE FIRST DAY OF THE WEEK
|
||||
const day = dateObject.getDate();
|
||||
const month = dateObject.getMonth() + 1;
|
||||
const year = dateObject.getFullYear();
|
||||
const weekdayOfMonthFirst = (weekday + 35 - (day - 1)) % 7;
|
||||
const daysInMonth = getMonthDays(month, year);
|
||||
const daysInNextMonth = getNextMonthDays(month, year);
|
||||
const daysInPrevMonth = getPrevMonthDays(month, year);
|
||||
|
||||
// Fill
|
||||
var monthDiff = (weekdayOfMonthFirst == 0 ? 0 : -1);
|
||||
var toFill, dim;
|
||||
if(weekdayOfMonthFirst == 0) {
|
||||
toFill = 1;
|
||||
dim = daysInMonth;
|
||||
}
|
||||
else {
|
||||
toFill = (daysInPrevMonth - (weekdayOfMonthFirst - 1));
|
||||
dim = daysInPrevMonth;
|
||||
}
|
||||
var calendar = [...Array(6)].map(() => Array(7));
|
||||
var i = 0, j = 0;
|
||||
while (i < 6 && j < 7) {
|
||||
calendar[i][j] = {
|
||||
"day": toFill,
|
||||
"today": ((toFill == day && monthDiff == 0 && highlight) ? 1 : (
|
||||
monthDiff == 0 ? 0 :
|
||||
-1
|
||||
))
|
||||
};
|
||||
// Increment
|
||||
toFill++;
|
||||
if (toFill > dim) { // Next month?
|
||||
monthDiff++;
|
||||
if (monthDiff == 0)
|
||||
dim = daysInMonth;
|
||||
else if (monthDiff == 1)
|
||||
dim = daysInNextMonth;
|
||||
toFill = 1;
|
||||
}
|
||||
// Next tile
|
||||
j++;
|
||||
if (j == 7) {
|
||||
j = 0;
|
||||
i++;
|
||||
}
|
||||
|
||||
}
|
||||
return calendar;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
const { Gdk, Gtk } = imports.gi;
|
||||
import { App, Service, Utils, Variable, Widget } from '../imports.js';
|
||||
import { MaterialIcon } from './materialicon.js';
|
||||
import { setupCursorHover } from './cursorhover.js';
|
||||
const { Box, Button, Entry, EventBox, Icon, Label, Revealer, Scrollable, Stack } = Widget;
|
||||
|
||||
export const ConfigToggle = ({ icon, name, desc = '', initValue, onChange, ...props }) => {
|
||||
let value = initValue;
|
||||
const toggleIcon = Label({
|
||||
className: `icon-material txt-bold ${value ? '' : 'txt-poof'}`,
|
||||
label: `${value ? 'check' : ''}`,
|
||||
})
|
||||
const toggleButtonIndicator = Box({
|
||||
className: `switch-fg ${value ? 'switch-fg-true' : ''}`,
|
||||
vpack: 'center',
|
||||
hpack: 'start',
|
||||
homogeneous: true,
|
||||
children: [toggleIcon,],
|
||||
});
|
||||
const toggleButton = Box({
|
||||
hpack: 'end',
|
||||
className: `switch-bg ${value ? 'switch-bg-true' : ''}`,
|
||||
homogeneous: true,
|
||||
children: [toggleButtonIndicator,],
|
||||
});
|
||||
const widgetContent = Box({
|
||||
tooltipText: desc,
|
||||
className: 'txt spacing-h-5 configtoggle-box',
|
||||
children: [
|
||||
MaterialIcon(icon, 'norm'),
|
||||
Label({
|
||||
className: 'txt txt-small',
|
||||
label: name,
|
||||
}),
|
||||
Box({ hexpand: true }),
|
||||
toggleButton,
|
||||
]
|
||||
});
|
||||
const interactionWrapper = Button({
|
||||
...props,
|
||||
child: widgetContent,
|
||||
setup: setupCursorHover,
|
||||
onClicked: () => { // mouse up/kb press
|
||||
value = !value;
|
||||
toggleIcon.toggleClassName('switch-fg-toggling-false', false);
|
||||
toggleIcon.label = `${value ? 'check' : ''}`;
|
||||
toggleIcon.toggleClassName('txt-poof', !value);
|
||||
toggleButtonIndicator.toggleClassName('switch-fg-true', value);
|
||||
toggleButton.toggleClassName('switch-bg-true', value);
|
||||
onChange(interactionWrapper, value);
|
||||
},
|
||||
setup: (button) => {
|
||||
button.connect('pressed', () => { // mouse down
|
||||
toggleIcon.toggleClassName('txt-poof', true);
|
||||
toggleIcon.toggleClassName('switch-fg-true', false);
|
||||
if(!value) toggleIcon.toggleClassName('switch-fg-toggling-false', true);
|
||||
});
|
||||
}
|
||||
});
|
||||
return interactionWrapper;
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
const { Gdk, Gtk } = imports.gi;
|
||||
|
||||
const CLICK_BRIGHTEN_AMOUNT = 0.13;
|
||||
|
||||
export function setupCursorHover(button) {
|
||||
const display = Gdk.Display.get_default();
|
||||
button.connect('enter-notify-event', () => {
|
||||
const cursor = Gdk.Cursor.new_from_name(display, 'pointer');
|
||||
button.get_window().set_cursor(cursor);
|
||||
});
|
||||
|
||||
button.connect('leave-notify-event', () => {
|
||||
const cursor = Gdk.Cursor.new_from_name(display, 'default');
|
||||
button.get_window().set_cursor(cursor);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
export function setupCursorHoverAim(button) {
|
||||
button.connect('enter-notify-event', () => {
|
||||
const display = Gdk.Display.get_default();
|
||||
const cursor = Gdk.Cursor.new_from_name(display, 'crosshair');
|
||||
button.get_window().set_cursor(cursor);
|
||||
});
|
||||
|
||||
button.connect('leave-notify-event', () => {
|
||||
const display = Gdk.Display.get_default();
|
||||
const cursor = Gdk.Cursor.new_from_name(display, 'default');
|
||||
button.get_window().set_cursor(cursor);
|
||||
});
|
||||
}
|
||||
|
||||
export function setupCursorHoverGrab(button) {
|
||||
button.connect('enter-notify-event', () => {
|
||||
const display = Gdk.Display.get_default();
|
||||
const cursor = Gdk.Cursor.new_from_name(display, 'grab');
|
||||
button.get_window().set_cursor(cursor);
|
||||
});
|
||||
|
||||
button.connect('leave-notify-event', () => {
|
||||
const display = Gdk.Display.get_default();
|
||||
const cursor = Gdk.Cursor.new_from_name(display, 'default');
|
||||
button.get_window().set_cursor(cursor);
|
||||
});
|
||||
}
|
||||
|
||||
export function setupCursorHoverInfo(button) {
|
||||
const display = Gdk.Display.get_default();
|
||||
button.connect('enter-notify-event', () => {
|
||||
const cursor = Gdk.Cursor.new_from_name(display, 'help');
|
||||
button.get_window().set_cursor(cursor);
|
||||
});
|
||||
|
||||
button.connect('leave-notify-event', () => {
|
||||
const cursor = Gdk.Cursor.new_from_name(display, 'default');
|
||||
button.get_window().set_cursor(cursor);
|
||||
});
|
||||
}
|
||||
|
||||
// failed radial ripple experiment
|
||||
//
|
||||
// var clicked = false;
|
||||
// var dummy = false;
|
||||
// var cursorX = 0;
|
||||
// var cursorY = 0;
|
||||
// const styleContext = button.get_style_context();
|
||||
// var clickColor = styleContext.get_property('background-color', Gtk.StateFlags.HOVER);
|
||||
// clickColor.green += CLICK_BRIGHTEN_AMOUNT;
|
||||
// clickColor.blue += CLICK_BRIGHTEN_AMOUNT;
|
||||
// clickColor.red += CLICK_BRIGHTEN_AMOUNT;
|
||||
// clickColor = clickColor.to_string();
|
||||
// button.add_events(Gdk.EventMask.POINTER_MOTION_MASK);
|
||||
// button.connect('motion-notify-event', (widget, event) => {
|
||||
// [dummy, cursorX, cursorY] = event.get_coords(); // Get the mouse coordinates relative to the widget
|
||||
// if(!clicked) widget.css = `
|
||||
// background-image: radial-gradient(circle at ${cursorX}px ${cursorY}px, rgba(0,0,0,0), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, ${clickColor} 0%, ${clickColor} 0%, ${clickColor} 0%, ${clickColor} 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%);
|
||||
// `;
|
||||
// });
|
||||
|
||||
// button.connect('button-press-event', (widget, event) => {
|
||||
// clicked = true;
|
||||
// [dummy, cursorX, cursorY] = event.get_coords(); // Get the mouse coordinates relative to the widget
|
||||
// cursorX = Math.round(cursorX); cursorY = Math.round(cursorY);
|
||||
// widget.css = `
|
||||
// background-image: radial-gradient(circle at ${cursorX}px ${cursorY}px, rgba(0,0,0,0), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, ${clickColor} 0%, ${clickColor} 0%, ${clickColor} 0%, ${clickColor} 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%);
|
||||
// `;
|
||||
// widget.toggleClassName('growingRadial', true);
|
||||
// widget.css = `
|
||||
// background-image: radial-gradient(circle at ${cursorX}px ${cursorY}px, rgba(0,0,0,0), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, ${clickColor} 0%, ${clickColor} 0%, ${clickColor} 70%, ${clickColor} 70%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 70%);
|
||||
// `
|
||||
// });
|
||||
// button.connect('button-release-event', (widget, event) => {
|
||||
// widget.toggleClassName('growingRadial', false);
|
||||
// widget.toggleClassName('fadingRadial', false);
|
||||
// widget.css = `
|
||||
// background-image: radial-gradient(circle at ${cursorX}px ${cursorY}px, rgba(0,0,0,0), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 70%);
|
||||
// `
|
||||
// clicked = false;
|
||||
// });
|
||||
@@ -0,0 +1,24 @@
|
||||
const { Gdk, Gtk } = imports.gi;
|
||||
import { App, Service, Utils, Variable, Widget } from '../imports.js';
|
||||
|
||||
// TODO: Allow reveal update. Currently this just helps at declaration
|
||||
export const DoubleRevealer = ({
|
||||
transition1 = 'slide_right',
|
||||
transition2 = 'slide_left',
|
||||
duration1 = 150,
|
||||
duration2 = 150,
|
||||
child,
|
||||
revealChild,
|
||||
}) => {
|
||||
return Widget.Revealer({
|
||||
transition: transition1,
|
||||
transitionDuration: duration1,
|
||||
revealChild: revealChild,
|
||||
child: Widget.Revealer({
|
||||
transition: transition2,
|
||||
transitionDuration: duration2,
|
||||
revealChild: revealChild,
|
||||
child: child,
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { Widget } from '../imports.js';
|
||||
|
||||
export const MaterialIcon = (icon, size, props = {}) => Widget.Label({
|
||||
className: `icon-material txt-${size}`,
|
||||
label: icon,
|
||||
...props,
|
||||
})
|
||||
@@ -0,0 +1,255 @@
|
||||
// SPDX-FileCopyrightText: 2021 Uwe Jugel
|
||||
// SPDX-License-Identifier: MIT
|
||||
// This file is part of md2pango (https://github.com/ubunatic/md2pango).
|
||||
|
||||
const monospaceFonts = 'JetBrains Mono NF, JetBrains Mono Nerd Font, JetBrains Mono NL, SpaceMono NF, SpaceMono Nerd Font, monospace'
|
||||
|
||||
const H1 = "H1", H2 = "H2", H3 = "H3", H4 = "H4", H5 = "H5", BULLET = "BULLET", NUMBERING = "NUMBERING", CODE = "CODE"
|
||||
const BOLD = "BOLD", EMPH = "EMPH", INLCODE = "INLCODE", LINK = "LINK", HEXCOLOR = "HEXCOLOR", UND = "UND"
|
||||
|
||||
let sub_h1, sub_h2, sub_h3, sub_h4, sub_h5
|
||||
|
||||
// m2p_sections defines how to detect special markdown sections.
|
||||
// These expressions scan the full line to detect headings, lists, and code.
|
||||
const m2p_sections = [
|
||||
// h1 is actually 210% on github, but it's unecessary large imo
|
||||
sub_h1 = { name: H1, re: /^(#\s+)(.*)(\s*)$/, sub: "<span font_weight='bold' size='150%'>$2</span>" },
|
||||
sub_h2 = { name: H2, re: /^(##\s+)(.*)(\s*)$/, sub: "<span font_weight='bold' size='125%'>$2</span>" },
|
||||
sub_h3 = { name: H3, re: /^(###\s+)(.*)(\s*)$/, sub: "<span font_weight='bold' size='100%'>$2</span>" },
|
||||
sub_h4 = { name: H4, re: /^(####\s+)(.*)(\s*)$/, sub: "<span font_weight='bold' size='90%'>$2</span>" },
|
||||
sub_h5 = { name: H5, re: /^(#####\s+)(.*)(\s*)$/, sub: "<span font_weight='bold' size='80%'>$2</span>" },
|
||||
{ name: BULLET, re: /^(\s*)([\*\-]\s)(.*)(\s*)$/, sub: "$1• $3" },
|
||||
{ name: NUMBERING, re: /^(\s*[0-9]+\.\s)(.*)(\s*)$/, sub: " $1$2" },
|
||||
]
|
||||
|
||||
// m2p_styles defines how to replace inline styled text
|
||||
const m2p_styles = [
|
||||
{ name: BOLD, re: /(\*\*)(\S[\s\S]*?\S)(\*\*)/g, sub: "<b>$2</b>" },
|
||||
{ name: UND, re: /(__)(\S[\s\S]*?\S)(__)/g, sub: "<u>$2</u>" },
|
||||
{ name: EMPH, re: /\*(\S.*?\S)\*/g, sub: "<i>$1</i>" },
|
||||
// { name: EMPH, re: /_(\S.*?\S)_/g, sub: "<i>$1</i>" },
|
||||
{ name: HEXCOLOR, re: /#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/g, sub: `<span bgcolor='#$1' fgcolor='#000000' font_family='${monospaceFonts}'> #$1 </span>` },
|
||||
{ name: INLCODE, re: /(`)([^`]*)(`)/g, sub: `<span font_weight='bold' font_family='${monospaceFonts}' bgcolor='#000000' fgcolor='#ffffff'> $2 </span>` },
|
||||
// { name: UND, re: /(__|\*\*)(\S[\s\S]*?\S)(__|\*\*)/g, sub: "<u>$2</u>" },
|
||||
]
|
||||
|
||||
const re_comment = /^\s*<!--.*-->\s*$/
|
||||
const re_color = /^(\s*<!--\s*(fg|bg)=(#?[0-9a-z_A-Z-]*)\s*((fg|bg)=(#?[0-9a-z_A-Z-]*))?\s*-->\s*)$/
|
||||
const re_reset = /(<!--\/-->)/
|
||||
const re_uri = /http[s]?:\/\/[^\s']*/
|
||||
const re_href = "/href='(http[s]?:\\/\\/[^\\s]*)'"
|
||||
const re_atag = "<a\s.*>.*(http[s]?:\\/\\/[^\\s]*).*</a>/"
|
||||
const re_h1line = /^===+\s*$/
|
||||
const re_h2line = /^---+\s*$/
|
||||
|
||||
const m2p_escapes = [
|
||||
[/<!--.*-->/, ''],
|
||||
[/&/g, '&'],
|
||||
[/</g, '<'],
|
||||
[/>/g, '>'],
|
||||
]
|
||||
|
||||
const code_color_span = "<span foreground='#bbb' background='#222'>"
|
||||
|
||||
const escape_line = (line) => m2p_escapes.reduce((l, esc) => l.replace(...esc), line)
|
||||
|
||||
const pad = (lines, start = 1, end = 1) => {
|
||||
let len = lines.reduce((n, l) => l.length > n ? l.length : n, 0)
|
||||
return lines.map((l) => l.padEnd(len + end, ' ').padStart(len + end + start, ' '))
|
||||
}
|
||||
|
||||
export function convert(text) {
|
||||
let lines = text.split('\n')
|
||||
|
||||
// Indicates if the current line is within a code block
|
||||
let is_code = false
|
||||
let code_lines = []
|
||||
|
||||
let output = []
|
||||
let color_span_open = false
|
||||
let tt_must_close = false
|
||||
|
||||
const try_close_span = () => {
|
||||
if (color_span_open) {
|
||||
output.push('</span>')
|
||||
color_span_open = false
|
||||
}
|
||||
}
|
||||
|
||||
const try_open_span = () => {
|
||||
if (!color_span_open) {
|
||||
output.push('</span>')
|
||||
color_span_open = false
|
||||
}
|
||||
}
|
||||
|
||||
for (const line of lines) {
|
||||
// first parse color macros in non-code texts
|
||||
if (!is_code) {
|
||||
let colors = line.match(re_color)
|
||||
if (colors || line.match(re_reset)) {
|
||||
try_close_span()
|
||||
}
|
||||
|
||||
if (colors) {
|
||||
try_close_span()
|
||||
if (color_span_open) {
|
||||
close_span()
|
||||
}
|
||||
|
||||
let fg = colors[2] == 'fg' ? colors[3] : colors[5] == 'fg' ? colors[6] : ''
|
||||
let bg = colors[2] == 'bg' ? colors[3] : colors[5] == 'bg' ? colors[6] : ''
|
||||
let attrs = ''
|
||||
|
||||
if (fg != '') {
|
||||
attrs += ` foreground='${fg}'`
|
||||
}
|
||||
|
||||
if (bg != '') {
|
||||
attrs += ` background='${bg}'`
|
||||
}
|
||||
|
||||
if (attrs != '') {
|
||||
output.push(`<span${attrs}>`)
|
||||
color_span_open = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// all macros processed, let's remove remaining comments
|
||||
if (line.match(re_comment)) {
|
||||
continue
|
||||
}
|
||||
|
||||
// is this line an opening statement of a code block
|
||||
let code_start = false
|
||||
|
||||
// escape all non-verbatim text
|
||||
let result = is_code ? line : escape_line(line)
|
||||
|
||||
for (const { name, re, sub } of m2p_sections) {
|
||||
if (line.match(re)) {
|
||||
if (name === CODE) {
|
||||
if (!is_code) {
|
||||
// haven't been inside a code block, so ``` indicates
|
||||
// that it is starting now
|
||||
code_start = true
|
||||
is_code = true
|
||||
|
||||
if (color_span_open) {
|
||||
// cannot color
|
||||
result = '<tt>'
|
||||
tt_must_close = false
|
||||
} else {
|
||||
result = code_color_span + '<tt>'
|
||||
tt_must_close = true
|
||||
}
|
||||
} else {
|
||||
// the code block ends now
|
||||
is_code = false
|
||||
output.push(...pad(code_lines).map(escape_line))
|
||||
code_lines = []
|
||||
result = '</tt>'
|
||||
if (tt_must_close) {
|
||||
result += '</span>'
|
||||
tt_must_close = false
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (is_code) {
|
||||
result = line
|
||||
} else {
|
||||
result = line.replace(re, sub)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (is_code && !code_start) {
|
||||
code_lines.push(result)
|
||||
continue
|
||||
}
|
||||
|
||||
if (line.match(re_h1line)) {
|
||||
output.push(`# ${output.pop()}`.replace(sub_h1.re, sub_h1.sub))
|
||||
continue
|
||||
}
|
||||
|
||||
if (line.match(re_h2line)) {
|
||||
output.push(`## ${output.pop()}`.replace(sub_h2.re, sub_h2.sub))
|
||||
continue
|
||||
}
|
||||
|
||||
// all other text can be styled
|
||||
for (const style of m2p_styles) {
|
||||
result = result.replace(style.re, style.sub)
|
||||
}
|
||||
|
||||
// all raw urls can be linked if possible
|
||||
let uri = result.match(re_uri) // look for any URI
|
||||
let href = result.match(re_href) // and for URIs in href=''
|
||||
let atag = result.match(re_atag) // and for URIs in <a></a>
|
||||
href = href && href[1] == uri
|
||||
atag = href && atag[1] == uri
|
||||
if (uri && (href || atag)) {
|
||||
result = result.replace(uri, `<a href='${uri}'>${uri}</a>`)
|
||||
}
|
||||
|
||||
output.push(result)
|
||||
}
|
||||
|
||||
try_close_span()
|
||||
|
||||
// remove trailing whitespaces
|
||||
output = output.map(line => line.replace(/ +$/, ''))
|
||||
|
||||
return output.join('\n')
|
||||
}
|
||||
|
||||
const readFile = (f) => {
|
||||
// node.js only and when running from the command line
|
||||
const fs = require('fs')
|
||||
return fs.readFileSync(f, 'utf8')
|
||||
}
|
||||
|
||||
let __is_nodejs_main = false
|
||||
try {
|
||||
// node.js specific checks and exports
|
||||
__is_nodejs_main = (require.main === module)
|
||||
exports.convert = convert
|
||||
} catch (e) { }
|
||||
|
||||
if (__is_nodejs_main) {
|
||||
// running in node.js called from the CLI
|
||||
let args = process.argv.slice(2)
|
||||
if (args.length == 0 || args.find((a) => a == '-h')) {
|
||||
console.log(`Usage: ${process.argv[1]} FILE [FILE...]`)
|
||||
process.exit(0)
|
||||
}
|
||||
args.forEach((f) => process.stdout.write(convert(readFile(f))))
|
||||
}
|
||||
|
||||
export const markdownTest = `# Heading 1
|
||||
## Heading 2
|
||||
### Heading 3
|
||||
#### Heading 4
|
||||
##### Heading 5
|
||||
1. yes
|
||||
2. no
|
||||
127. well
|
||||
- Bulletpoint starting with minus
|
||||
* Bulletpoint starting with asterisk
|
||||
---
|
||||
- __Underline__ __ No underline __
|
||||
- **Bold** ** No bold **
|
||||
- _Italics1_ *Italics2* _ No Italics _
|
||||
- A color: #D6BAFF
|
||||
- nvidia green: #7ABB08
|
||||
- sub-item
|
||||
\`\`\`javascript
|
||||
// A code block!
|
||||
myArray = [23, 123, 43, 54, '6969'];
|
||||
console.log('uwu');
|
||||
\`\`\`
|
||||
To update arch lincox, run \`sudo pacman -Syu\`
|
||||
`;
|
||||
@@ -0,0 +1,72 @@
|
||||
const { Gdk, Gtk } = imports.gi;
|
||||
const GObject = imports.gi.GObject;
|
||||
const Lang = imports.lang;
|
||||
import { Utils, Widget } from '../imports.js';
|
||||
|
||||
// min-height/min-width for height/width
|
||||
// background-color/color for background/indicator color
|
||||
// padding for pad of indicator
|
||||
// font-size for selected index (0-based)
|
||||
export const NavigationIndicator = (count, vertical, props) => Widget.DrawingArea({
|
||||
...props,
|
||||
setup: (area) => {
|
||||
const styleContext = area.get_style_context();
|
||||
const width = Math.max(styleContext.get_property('min-width', Gtk.StateFlags.NORMAL), area.get_allocated_width());
|
||||
const height = Math.max(styleContext.get_property('min-height', Gtk.StateFlags.NORMAL), area.get_allocated_height());
|
||||
area.set_size_request(width, height);
|
||||
|
||||
area.connect('draw', Lang.bind(area, (area, cr) => {
|
||||
const styleContext = area.get_style_context();
|
||||
const width = Math.max(styleContext.get_property('min-width', Gtk.StateFlags.NORMAL), area.get_allocated_width());
|
||||
const height = Math.max(styleContext.get_property('min-height', Gtk.StateFlags.NORMAL), area.get_allocated_height());
|
||||
// console.log('allocated width/height:', area.get_allocated_width(), '/', area.get_allocated_height())
|
||||
area.set_size_request(width, height);
|
||||
const paddingLeft = styleContext.get_padding(Gtk.StateFlags.NORMAL).left;
|
||||
const paddingRight = styleContext.get_padding(Gtk.StateFlags.NORMAL).right;
|
||||
const paddingTop = styleContext.get_padding(Gtk.StateFlags.NORMAL).top;
|
||||
const paddingBottom = styleContext.get_padding(Gtk.StateFlags.NORMAL).bottom;
|
||||
|
||||
const selectedCell = styleContext.get_property('font-size', Gtk.StateFlags.NORMAL);
|
||||
|
||||
let cellWidth = width;
|
||||
let cellHeight = height;
|
||||
if (vertical) cellHeight /= count;
|
||||
else cellWidth /= count;
|
||||
const indicatorWidth = cellWidth - paddingLeft - paddingRight;
|
||||
const indicatorHeight = cellHeight - paddingTop - paddingBottom;
|
||||
|
||||
const background_color = styleContext.get_property('background-color', Gtk.StateFlags.NORMAL);
|
||||
const color = styleContext.get_property('color', Gtk.StateFlags.NORMAL);
|
||||
cr.setLineWidth(2);
|
||||
// Background
|
||||
cr.setSourceRGBA(background_color.red, background_color.green, background_color.blue, background_color.alpha);
|
||||
cr.rectangle(0, 0, width, height);
|
||||
cr.fill();
|
||||
|
||||
// The indicator line
|
||||
cr.setSourceRGBA(color.red, color.green, color.blue, color.alpha);
|
||||
if (vertical) {
|
||||
cr.rectangle(paddingLeft, paddingTop + cellHeight * selectedCell + indicatorWidth / 2, indicatorWidth, indicatorHeight - indicatorWidth);
|
||||
cr.stroke();
|
||||
cr.rectangle(paddingLeft, paddingTop + cellHeight * selectedCell + indicatorWidth / 2, indicatorWidth, indicatorHeight - indicatorWidth);
|
||||
cr.fill();
|
||||
cr.arc(paddingLeft + indicatorWidth / 2, paddingTop + cellHeight * selectedCell + indicatorWidth / 2, indicatorWidth / 2, Math.PI, 2 * Math.PI);
|
||||
cr.fill();
|
||||
cr.arc(paddingLeft + indicatorWidth / 2, paddingTop + cellHeight * selectedCell + indicatorHeight - indicatorWidth / 2, indicatorWidth / 2, 0, Math.PI);
|
||||
cr.fill();
|
||||
}
|
||||
else {
|
||||
cr.rectangle(paddingLeft + cellWidth * selectedCell + indicatorHeight / 2, paddingTop, indicatorWidth - indicatorHeight, indicatorHeight);
|
||||
cr.stroke();
|
||||
cr.rectangle(paddingLeft + cellWidth * selectedCell + indicatorHeight / 2, paddingTop, indicatorWidth - indicatorHeight, indicatorHeight);
|
||||
cr.fill();
|
||||
cr.arc(paddingLeft + cellWidth * selectedCell + indicatorHeight / 2, paddingTop + indicatorHeight / 2, indicatorHeight / 2, 0.5 * Math.PI, 1.5 * Math.PI);
|
||||
cr.fill();
|
||||
cr.arc(paddingLeft + cellWidth * selectedCell + indicatorWidth - indicatorHeight / 2, paddingTop + indicatorHeight / 2, indicatorHeight / 2, -0.5 * Math.PI, 0.5 * Math.PI);
|
||||
cr.fill();
|
||||
}
|
||||
}))
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
@@ -0,0 +1,325 @@
|
||||
// This file is for the actual widget for each single notification
|
||||
|
||||
const { GLib, Gdk, Gtk } = imports.gi;
|
||||
import { Utils, Widget } from '../imports.js';
|
||||
const { lookUpIcon, timeout } = Utils;
|
||||
const { Box, EventBox, Icon, Overlay, Label, Button, Revealer } = Widget;
|
||||
import { MaterialIcon } from "./materialicon.js";
|
||||
import { setupCursorHover } from "./cursorhover.js";
|
||||
import { AnimatedCircProg } from "./animatedcircularprogress.js";
|
||||
|
||||
function guessMessageType(summary) {
|
||||
if (summary.includes('recording')) return 'screen_record';
|
||||
if (summary.includes('battery') || summary.includes('power')) return 'power';
|
||||
if (summary.includes('screenshot')) return 'screenshot_monitor';
|
||||
if (summary.includes('welcome')) return 'waving_hand';
|
||||
if (summary.includes('time')) return 'scheduleb';
|
||||
if (summary.includes('installed')) return 'download';
|
||||
if (summary.includes('update')) return 'update';
|
||||
if (summary.startsWith('file')) return 'folder_copy';
|
||||
return 'chat';
|
||||
}
|
||||
|
||||
const NotificationIcon = (notifObject) => {
|
||||
// { appEntry, appIcon, image }, urgency = 'normal'
|
||||
if (notifObject.image) {
|
||||
return Box({
|
||||
valign: Gtk.Align.CENTER,
|
||||
hexpand: false,
|
||||
className: 'notif-icon',
|
||||
css: `
|
||||
background-image: url("${notifObject.image}");
|
||||
background-size: auto 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
`,
|
||||
});
|
||||
}
|
||||
|
||||
let icon = 'NO_ICON';
|
||||
if (lookUpIcon(notifObject.appIcon))
|
||||
icon = notifObject.appIcon;
|
||||
if (lookUpIcon(notifObject.appEntry))
|
||||
icon = notifObject.appEntry;
|
||||
|
||||
return Box({
|
||||
valign: Gtk.Align.CENTER,
|
||||
hexpand: false,
|
||||
className: `notif-icon notif-icon-material-${notifObject.urgency}`,
|
||||
homogeneous: true,
|
||||
children: [
|
||||
(icon != 'NO_ICON' ?
|
||||
Icon({
|
||||
icon: icon,
|
||||
halign: Gtk.Align.CENTER, hexpand: true,
|
||||
valign: Gtk.Align.CENTER,
|
||||
setup: (self) => Utils.timeout(1, () => {
|
||||
const styleContext = self.get_parent().get_style_context();
|
||||
const width = styleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
|
||||
const height = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
|
||||
self.size = Math.max(width * 0.9, height * 0.9, 1); // im too lazy to add another box lol
|
||||
}),
|
||||
})
|
||||
:
|
||||
MaterialIcon(`${notifObject.urgency == 'critical' ? 'release_alert' : guessMessageType(notifObject.summary.toLowerCase())}`, 'hugerass', {
|
||||
hexpand: true,
|
||||
})
|
||||
)
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
export default ({
|
||||
notifObject,
|
||||
isPopup = false,
|
||||
popupTimeout = 3000,
|
||||
props = {},
|
||||
} = {}) => {
|
||||
const command = (isPopup ?
|
||||
() => notifObject.dismiss() :
|
||||
() => notifObject.close()
|
||||
)
|
||||
const destroyWithAnims = () => {
|
||||
widget.sensitive = false;
|
||||
notificationBox.setCss(rightAnim1);
|
||||
Utils.timeout(200, () => {
|
||||
wholeThing.revealChild = false;
|
||||
});
|
||||
Utils.timeout(400, () => {
|
||||
command();
|
||||
wholeThing.destroy();
|
||||
});
|
||||
}
|
||||
const widget = EventBox({
|
||||
onHover: (self) => {
|
||||
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
|
||||
if (!wholeThing._hovered)
|
||||
wholeThing._hovered = true;
|
||||
},
|
||||
onHoverLost: (self) => {
|
||||
self.window.set_cursor(null);
|
||||
if (wholeThing._hovered)
|
||||
wholeThing._hovered = false;
|
||||
if (isPopup) {
|
||||
command();
|
||||
}
|
||||
},
|
||||
onMiddleClick: (self) => {
|
||||
destroyWithAnims();
|
||||
}
|
||||
});
|
||||
const wholeThing = Revealer({
|
||||
properties: [
|
||||
['id', notifObject.id],
|
||||
['close', undefined],
|
||||
['hovered', false],
|
||||
['dragging', false],
|
||||
['destroyWithAnims', () => destroyWithAnims]
|
||||
],
|
||||
revealChild: false,
|
||||
transition: 'slide_down',
|
||||
transitionDuration: 200,
|
||||
child: Box({ // Box to make sure css-based spacing works
|
||||
homogeneous: true,
|
||||
})
|
||||
});
|
||||
|
||||
const display = Gdk.Display.get_default();
|
||||
const notificationContent = Box({
|
||||
...props,
|
||||
className: `${isPopup ? 'popup-' : ''}notif-${notifObject.urgency} spacing-h-10`,
|
||||
children: [
|
||||
NotificationIcon(notifObject),
|
||||
Box({
|
||||
valign: Gtk.Align.CENTER,
|
||||
vertical: true,
|
||||
hexpand: true,
|
||||
children: [
|
||||
Box({
|
||||
children: [
|
||||
Label({
|
||||
xalign: 0,
|
||||
className: 'txt-small txt-semibold titlefont',
|
||||
justify: Gtk.Justification.LEFT,
|
||||
hexpand: true,
|
||||
maxWidthChars: 24,
|
||||
truncate: 'end',
|
||||
ellipsize: 3,
|
||||
wrap: true,
|
||||
useMarkup: notifObject.summary.startsWith('<'),
|
||||
label: notifObject.summary,
|
||||
}),
|
||||
Label({
|
||||
valign: Gtk.Align.CENTER,
|
||||
className: 'txt-smaller txt-semibold',
|
||||
justify: Gtk.Justification.RIGHT,
|
||||
setup: (label) => {
|
||||
// Let's ignore how it won't work for Jan1 cuz I'm lazy
|
||||
const messageTime = GLib.DateTime.new_from_unix_local(notifObject.time);
|
||||
if (messageTime.get_day_of_year() == GLib.DateTime.new_now_local().get_day_of_year()) {
|
||||
label.label = messageTime.format('%H:%M');
|
||||
}
|
||||
else if (messageTime.get_day_of_year() == GLib.DateTime.new_now_local().get_day_of_year() - 1) {
|
||||
label.label = messageTime.format('Yesterday');
|
||||
}
|
||||
else {
|
||||
label.label = messageTime.format('%d/%m');
|
||||
}
|
||||
}
|
||||
}),
|
||||
]
|
||||
}),
|
||||
Label({
|
||||
xalign: 0,
|
||||
className: `txt-smallie notif-body-${notifObject.urgency}`,
|
||||
useMarkup: true,
|
||||
xalign: 0,
|
||||
justify: Gtk.Justification.LEFT,
|
||||
wrap: true,
|
||||
label: notifObject.body,
|
||||
}),
|
||||
]
|
||||
}),
|
||||
Overlay({
|
||||
child: AnimatedCircProg({
|
||||
className: `notif-circprog-${notifObject.urgency}`,
|
||||
valign: Gtk.Align.CENTER,
|
||||
initFrom: (isPopup ? 100 : 0),
|
||||
initTo: 0,
|
||||
initAnimTime: popupTimeout,
|
||||
}),
|
||||
overlays: [
|
||||
Button({
|
||||
className: 'notif-close-btn',
|
||||
onClicked: () => {
|
||||
destroyWithAnims()
|
||||
},
|
||||
child: MaterialIcon('close', 'large', {
|
||||
valign: Gtk.Align.CENTER,
|
||||
}),
|
||||
setup: setupCursorHover,
|
||||
}),
|
||||
]
|
||||
}),
|
||||
|
||||
// what is this? i think it should be at the bottom not on the right
|
||||
// Box({
|
||||
// className: 'actions',
|
||||
// children: actions.map(action => Button({
|
||||
// className: 'action-button',
|
||||
// onClicked: () => Notifications.invoke(id, action.id),
|
||||
// hexpand: true,
|
||||
// child: Label(action.label),
|
||||
// })),
|
||||
// }),
|
||||
]
|
||||
})
|
||||
|
||||
// Gesture stuff
|
||||
|
||||
const gesture = Gtk.GestureDrag.new(widget);
|
||||
var initialDir = 0;
|
||||
// in px
|
||||
const startMargin = 0;
|
||||
const dragThreshold = 100;
|
||||
// in rem
|
||||
const maxOffset = 10.227;
|
||||
const endMargin = 20.455;
|
||||
const disappearHeight = 6.818;
|
||||
const leftAnim1 = `transition: 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
margin-left: -${Number(maxOffset + endMargin)}rem;
|
||||
margin-right: ${Number(maxOffset + endMargin)}rem;
|
||||
opacity: 0;`;
|
||||
|
||||
const rightAnim1 = `transition: 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
margin-left: ${Number(maxOffset + endMargin)}rem;
|
||||
margin-right: -${Number(maxOffset + endMargin)}rem;
|
||||
opacity: 0;`;
|
||||
|
||||
const notificationBox = Box({
|
||||
properties: [
|
||||
['leftAnim1', leftAnim1],
|
||||
['rightAnim1', rightAnim1],
|
||||
['ready', false],
|
||||
],
|
||||
homogeneous: true,
|
||||
children: [notificationContent],
|
||||
connections: [
|
||||
[gesture, self => {
|
||||
var offset = gesture.get_offset()[1];
|
||||
if (initialDir == 0 && offset != 0)
|
||||
initialDir = (offset > 0 ? 1 : -1)
|
||||
|
||||
if (offset > 0) {
|
||||
if (initialDir < 0)
|
||||
self.setCss(`margin-left: 0px; margin-right: 0px;`);
|
||||
else
|
||||
self.setCss(`
|
||||
margin-left: ${Number(offset + startMargin)}px;
|
||||
margin-right: -${Number(offset + startMargin)}px;
|
||||
`);
|
||||
}
|
||||
else if (offset < 0) {
|
||||
if (initialDir > 0)
|
||||
self.setCss(`margin-left: 0px; margin-right: 0px;`);
|
||||
else {
|
||||
offset = Math.abs(offset);
|
||||
self.setCss(`
|
||||
margin-right: ${Number(offset + startMargin)}px;
|
||||
margin-left: -${Number(offset + startMargin)}px;
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
wholeThing._dragging = Math.abs(offset) > 10;
|
||||
|
||||
if (widget.window)
|
||||
widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
|
||||
}, 'drag-update'],
|
||||
|
||||
[gesture, self => {
|
||||
if (!self._ready) {
|
||||
wholeThing.revealChild = true;
|
||||
self._ready = true;
|
||||
return;
|
||||
}
|
||||
const offset = gesture.get_offset()[1];
|
||||
|
||||
if (Math.abs(offset) > dragThreshold && offset * initialDir > 0) {
|
||||
if (offset > 0) {
|
||||
self.setCss(rightAnim1);
|
||||
widget.sensitive = false;
|
||||
}
|
||||
else {
|
||||
self.setCss(leftAnim1);
|
||||
widget.sensitive = false;
|
||||
}
|
||||
Utils.timeout(200, () => {
|
||||
wholeThing.revealChild = false
|
||||
});
|
||||
Utils.timeout(400, () => {
|
||||
command();
|
||||
wholeThing.destroy();
|
||||
});
|
||||
}
|
||||
else {
|
||||
self.setCss(`transition: margin 200ms cubic-bezier(0.05, 0.7, 0.1, 1), opacity 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
margin-left: ${startMargin}px;
|
||||
margin-right: ${startMargin}px;
|
||||
margin-bottom: unset; margin-top: unset;
|
||||
opacity: 1;`);
|
||||
if (widget.window)
|
||||
widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
|
||||
|
||||
wholeThing._dragging = false;
|
||||
}
|
||||
initialDir = 0;
|
||||
}, 'drag-end'],
|
||||
|
||||
],
|
||||
})
|
||||
widget.add(notificationBox);
|
||||
wholeThing.child.children = [widget];
|
||||
|
||||
return wholeThing;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { App, Widget } from '../imports.js';
|
||||
const { Box, Window } = Widget;
|
||||
|
||||
|
||||
export default ({
|
||||
name,
|
||||
child,
|
||||
showClassName,
|
||||
hideClassName,
|
||||
...props
|
||||
}) => Window({
|
||||
name,
|
||||
popup: true,
|
||||
visible: false,
|
||||
layer: 'overlay',
|
||||
...props,
|
||||
|
||||
child: Box({
|
||||
className: `${showClassName} ${hideClassName}`,
|
||||
connections: [[App, (self, currentName, visible) => {
|
||||
if (currentName === name) {
|
||||
self.toggleClassName(hideClassName, !visible);
|
||||
}
|
||||
}]],
|
||||
child: child,
|
||||
}),
|
||||
});
|
||||
@@ -0,0 +1,50 @@
|
||||
import { Widget } from '../imports.js';
|
||||
const { Gtk } = imports.gi;
|
||||
const Lang = imports.lang;
|
||||
|
||||
export const RoundedCorner = (place, props) => Widget.DrawingArea({
|
||||
...props,
|
||||
hpack: place.includes('left') ? 'start' : 'end',
|
||||
vpack: place.includes('top') ? 'start' : 'end',
|
||||
setup: (widget) => Utils.timeout(1, () => {
|
||||
const c = widget.get_style_context().get_property('background-color', Gtk.StateFlags.NORMAL);
|
||||
const r = widget.get_style_context().get_property('border-radius', Gtk.StateFlags.NORMAL);
|
||||
widget.set_size_request(r, r);
|
||||
widget.connect('draw', Lang.bind(widget, (widget, cr) => {
|
||||
const c = widget.get_style_context().get_property('background-color', Gtk.StateFlags.NORMAL);
|
||||
const r = widget.get_style_context().get_property('border-radius', Gtk.StateFlags.NORMAL);
|
||||
// const borderColor = widget.get_style_context().get_property('color', Gtk.StateFlags.NORMAL);
|
||||
// const borderWidth = widget.get_style_context().get_border(Gtk.StateFlags.NORMAL).left; // ur going to write border-width: something anyway
|
||||
widget.set_size_request(r, r);
|
||||
|
||||
switch (place) {
|
||||
case 'topleft':
|
||||
cr.arc(r, r, r, Math.PI, 3 * Math.PI / 2);
|
||||
cr.lineTo(0, 0);
|
||||
break;
|
||||
|
||||
case 'topright':
|
||||
cr.arc(0, r, r, 3 * Math.PI / 2, 2 * Math.PI);
|
||||
cr.lineTo(r, 0);
|
||||
break;
|
||||
|
||||
case 'bottomleft':
|
||||
cr.arc(r, 0, r, Math.PI / 2, Math.PI);
|
||||
cr.lineTo(0, r);
|
||||
break;
|
||||
|
||||
case 'bottomright':
|
||||
cr.arc(0, 0, r, 0, Math.PI / 2);
|
||||
cr.lineTo(r, r);
|
||||
break;
|
||||
}
|
||||
|
||||
cr.closePath();
|
||||
cr.setSourceRGBA(c.red, c.green, c.blue, c.alpha);
|
||||
cr.fill();
|
||||
// cr.setLineWidth(borderWidth);
|
||||
// cr.setSourceRGBA(borderColor.red, borderColor.green, borderColor.blue, borderColor.alpha);
|
||||
// cr.stroke();
|
||||
}));
|
||||
}),
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
import { App, Service, Utils, Widget } from '../imports.js';
|
||||
|
||||
export const separatorLine = Widget.Box({
|
||||
className: 'separator-line',
|
||||
})
|
||||
@@ -0,0 +1,223 @@
|
||||
import { App, Service, Utils, Widget } from '../imports.js';
|
||||
import { MaterialIcon } from './materialicon.js';
|
||||
import Bluetooth from 'resource:///com/github/Aylur/ags/service/bluetooth.js';
|
||||
import Network from 'resource:///com/github/Aylur/ags/service/network.js';
|
||||
import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js';
|
||||
import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
|
||||
import { languages } from '../data/languages.js';
|
||||
|
||||
// A guessing func to try to support langs not listed in data/languages.js
|
||||
function isLanguageMatch(abbreviation, word) {
|
||||
const lowerAbbreviation = abbreviation.toLowerCase();
|
||||
const lowerWord = word.toLowerCase();
|
||||
let j = 0;
|
||||
for (let i = 0; i < lowerWord.length; i++) {
|
||||
if (lowerWord[i] === lowerAbbreviation[j]) {
|
||||
j++;
|
||||
}
|
||||
if (j === lowerAbbreviation.length) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export const NotificationIndicator = (notifCenterName = 'sideright') => {
|
||||
const widget = Widget.Revealer({
|
||||
transition: 150,
|
||||
transition: 'slide_left',
|
||||
revealChild: false,
|
||||
connections: [
|
||||
[Notifications, (self, id) => {
|
||||
if (!id || Notifications.dnd) return;
|
||||
if (!Notifications.getNotification(id)) return;
|
||||
self.revealChild = true;
|
||||
}, 'notified'],
|
||||
[App, (self, currentName, visible) => {
|
||||
if (visible && currentName === notifCenterName) {
|
||||
self.revealChild = false;
|
||||
}
|
||||
}],
|
||||
],
|
||||
child: Widget.Box({
|
||||
children: [
|
||||
MaterialIcon('notifications', 'norm'),
|
||||
Widget.Label({
|
||||
className: 'txt-small titlefont',
|
||||
properties: [
|
||||
['increment', (self) => self._unreadCount++],
|
||||
['markread', (self) => self._unreadCount = 0],
|
||||
['update', (self) => self.label = `${self._unreadCount}`],
|
||||
['unreadCount', 0],
|
||||
],
|
||||
connections: [
|
||||
[Notifications, (self, id) => {
|
||||
if (!id || Notifications.dnd) return;
|
||||
if (!Notifications.getNotification(id)) return;
|
||||
self._increment(self);
|
||||
self._update(self);
|
||||
}, 'notified'],
|
||||
[App, (self, currentName, visible) => {
|
||||
if (visible && currentName === notifCenterName) {
|
||||
self._markread(self);
|
||||
self._update(self);
|
||||
}
|
||||
}],
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
});
|
||||
return widget;
|
||||
}
|
||||
|
||||
export const BluetoothIndicator = () => Widget.Stack({
|
||||
transition: 'slide_up_down',
|
||||
items: [
|
||||
['true', Widget.Label({ className: 'txt-norm icon-material', label: 'bluetooth' })],
|
||||
['false', Widget.Label({ className: 'txt-norm icon-material', label: 'bluetooth_disabled' })],
|
||||
],
|
||||
connections: [[Bluetooth, stack => { stack.shown = String(Bluetooth.enabled); }]],
|
||||
});
|
||||
|
||||
|
||||
const NetworkWiredIndicator = () => Widget.Stack({
|
||||
transition: 'slide_up_down',
|
||||
items: [
|
||||
['fallback', SimpleNetworkIndicator()],
|
||||
['unknown', Widget.Label({ className: 'txt-norm icon-material', label: 'wifi_off' })],
|
||||
['disconnected', Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_off' })],
|
||||
['connected', Widget.Label({ className: 'txt-norm icon-material', label: 'lan' })],
|
||||
['connecting', Widget.Label({ className: 'txt-norm icon-material', label: 'settings_ethernet' })],
|
||||
],
|
||||
connections: [[Network, stack => {
|
||||
if (!Network.wired)
|
||||
return;
|
||||
|
||||
const { internet } = Network.wired;
|
||||
if (internet === 'connected' || internet === 'connecting')
|
||||
stack.shown = internet;
|
||||
else if (Network.connectivity !== 'full')
|
||||
stack.shown = 'disconnected';
|
||||
else
|
||||
stack.shown = 'fallback';
|
||||
}]],
|
||||
});
|
||||
|
||||
const SimpleNetworkIndicator = () => Widget.Icon({
|
||||
connections: [[Network, self => {
|
||||
const icon = Network[Network.primary || 'wifi']?.iconName;
|
||||
self.icon = icon || '';
|
||||
self.visible = icon;
|
||||
}]],
|
||||
});
|
||||
|
||||
const NetworkWifiIndicator = () => Widget.Stack({
|
||||
transition: 'slide_up_down',
|
||||
items: [
|
||||
['disabled', Widget.Label({ className: 'txt-norm icon-material', label: 'wifi_off' })],
|
||||
['disconnected', Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_off' })],
|
||||
['connecting', Widget.Label({ className: 'txt-norm icon-material', label: 'settings_ethernet' })],
|
||||
['0', Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_0_bar' })],
|
||||
['1', Widget.Label({ className: 'txt-norm icon-material', label: 'network_wifi_1_bar' })],
|
||||
['2', Widget.Label({ className: 'txt-norm icon-material', label: 'network_wifi_2_bar' })],
|
||||
['3', Widget.Label({ className: 'txt-norm icon-material', label: 'network_wifi_3_bar' })],
|
||||
['4', Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_4_bar' })],
|
||||
],
|
||||
connections: [[Network, (stack) => {
|
||||
if (!Network.wifi) {
|
||||
return;
|
||||
}
|
||||
if (Network.wifi.internet == 'connected') {
|
||||
stack.shown = String(Math.ceil(Network.wifi.strength / 25));
|
||||
}
|
||||
else if (Network.wifi.internet == 'disconnected' || Network.wifi.internet == 'connecting') {
|
||||
stack.shown = Network.wifi.internet;
|
||||
}
|
||||
}]],
|
||||
});
|
||||
|
||||
export const NetworkIndicator = () => Widget.Stack({
|
||||
transition: 'slide_up_down',
|
||||
items: [
|
||||
['fallback', SimpleNetworkIndicator()],
|
||||
['wifi', NetworkWifiIndicator()],
|
||||
['wired', NetworkWiredIndicator()],
|
||||
],
|
||||
connections: [[Network, stack => {
|
||||
let primary = Network.primary || 'fallback';
|
||||
if (primary == 'wifi' || primary == 'wired')
|
||||
stack.shown = primary;
|
||||
else
|
||||
stack.shown = 'fallback';
|
||||
}]],
|
||||
});
|
||||
|
||||
const KeyboardLayout = ({ useFlag } = {}) => {
|
||||
var initLangs = [];
|
||||
var languageStackArray = [];
|
||||
var currentKeyboard;
|
||||
|
||||
const updateCurrentKeyboards = () => {
|
||||
currentKeyboard = JSON.parse(Utils.exec('hyprctl -j devices')).keyboards
|
||||
.find(device => device.name === 'at-translated-set-2-keyboard');
|
||||
if (currentKeyboard) {
|
||||
initLangs = currentKeyboard.layout.split(',').map(lang => lang.trim());
|
||||
}
|
||||
languageStackArray = Array.from({ length: initLangs.length }, (_, i) => {
|
||||
const lang = languages.find(lang => lang.layout == initLangs[i]);
|
||||
if (!lang) return [
|
||||
initLangs[i],
|
||||
Widget.Label({ label: initLangs[i] })
|
||||
];
|
||||
return [
|
||||
lang.layout,
|
||||
Widget.Label({ label: (useFlag ? lang.flag : lang.layout) })
|
||||
];
|
||||
});
|
||||
};
|
||||
updateCurrentKeyboards();
|
||||
const widgetRevealer = Widget.Revealer({
|
||||
transition: 150,
|
||||
transition: 'slide_left',
|
||||
revealChild: languageStackArray.length > 1,
|
||||
});
|
||||
const widgetContent = Widget.Stack({
|
||||
transition: 'slide_up_down',
|
||||
items: [
|
||||
...languageStackArray,
|
||||
['undef', Widget.Label({ label: '?' })]
|
||||
],
|
||||
connections: [
|
||||
[Hyprland, (stack, kbName, layoutName) => {
|
||||
if (!kbName) {
|
||||
return;
|
||||
}
|
||||
var lang = languages.find(lang => layoutName.includes(lang.name));
|
||||
if (lang) {
|
||||
widgetContent.shown = lang.layout;
|
||||
}
|
||||
else { // Attempt to support langs not listed
|
||||
lang = languageStackArray.find(lang => isLanguageMatch(lang[0], layoutName));
|
||||
if (!lang) stack.shown = 'undef';
|
||||
else stack.shown = lang[0];
|
||||
}
|
||||
}, 'keyboard-layout']
|
||||
],
|
||||
});
|
||||
widgetRevealer.child = widgetContent;
|
||||
return widgetRevealer;
|
||||
}
|
||||
|
||||
export const StatusIcons = (props = {}) => Widget.Box({
|
||||
...props,
|
||||
child: Widget.Box({
|
||||
className: 'spacing-h-15',
|
||||
children: [
|
||||
KeyboardLayout({ useFlag: false }),
|
||||
NotificationIndicator(),
|
||||
BluetoothIndicator(),
|
||||
NetworkIndicator(),
|
||||
]
|
||||
})
|
||||
});
|
||||
Reference in New Issue
Block a user