forked from Shinonome/dots-hyprland
getting ready for more apis...
This commit is contained in:
@@ -7,105 +7,124 @@ import { setupCursorHover } from "../../lib/cursorhover.js";
|
||||
import { NavigationIndicator } from "../../lib/navigationindicator.js";
|
||||
import toolBox from './toolbox.js';
|
||||
import apiWidgets from './apiwidgets.js';
|
||||
import { chatEntry } from './apiwidgets.js';
|
||||
import apiwidgets, { chatEntry } from './apiwidgets.js';
|
||||
|
||||
const SidebarTabButton = (stack, stackItem, navIndicator, navIndex, icon, label) => Widget.Button({
|
||||
const contents = [
|
||||
{
|
||||
name: 'apis',
|
||||
content: apiWidgets,
|
||||
materialIcon: 'api',
|
||||
friendlyName: 'APIs',
|
||||
},
|
||||
{
|
||||
name: 'tools',
|
||||
content: toolBox,
|
||||
materialIcon: 'home_repair_service',
|
||||
friendlyName: 'Tools',
|
||||
},
|
||||
]
|
||||
let currentTabId = 0;
|
||||
|
||||
const contentStack = Stack({
|
||||
vexpand: true,
|
||||
transition: 'slide_left_right',
|
||||
items: contents.map(item => [item.name, item.content]),
|
||||
})
|
||||
|
||||
function switchToTab(id) {
|
||||
const allTabs = navTabs.get_children();
|
||||
const tabButton = allTabs[id];
|
||||
allTabs[currentTabId].toggleClassName('sidebar-selector-tab-active', false);
|
||||
allTabs[id].toggleClassName('sidebar-selector-tab-active', true);
|
||||
contentStack.shown = contents[id].name;
|
||||
if (tabButton) {
|
||||
// Fancy highlighter line width
|
||||
const buttonWidth = tabButton.get_allocated_width();
|
||||
const highlightWidth = tabButton.get_children()[0].get_allocated_width();
|
||||
navIndicator.css = `
|
||||
font-size: ${id}px;
|
||||
padding: 0px ${(buttonWidth - highlightWidth) / 2}px;
|
||||
`;
|
||||
}
|
||||
currentTabId = id;
|
||||
}
|
||||
const SidebarTabButton = (navIndex) => Widget.Button({
|
||||
// hexpand: true,
|
||||
className: 'sidebar-selector-tab',
|
||||
onClicked: (self) => {
|
||||
stack.shown = stackItem;
|
||||
// Add active class to self and remove for others
|
||||
const allTabs = self.get_parent().get_children();
|
||||
for (let i = 0; i < allTabs.length; i++) {
|
||||
if (allTabs[i] != self) allTabs[i].toggleClassName('sidebar-selector-tab-active', false);
|
||||
else self.toggleClassName('sidebar-selector-tab-active', true);
|
||||
}
|
||||
// Fancy highlighter line width
|
||||
const buttonWidth = self.get_allocated_width();
|
||||
const highlightWidth = self.get_children()[0].get_allocated_width();
|
||||
navIndicator.css = `
|
||||
font-size: ${navIndex}px;
|
||||
padding: 0px ${(buttonWidth - highlightWidth) / 2}px;
|
||||
`;
|
||||
switchToTab(navIndex);
|
||||
},
|
||||
child: Box({
|
||||
hpack: 'center',
|
||||
className: 'spacing-h-5',
|
||||
children: [
|
||||
MaterialIcon(icon, 'larger'),
|
||||
MaterialIcon(contents[navIndex].materialIcon, 'larger'),
|
||||
Label({
|
||||
className: 'txt txt-smallie',
|
||||
label: label,
|
||||
label: `${contents[navIndex].friendlyName}`,
|
||||
})
|
||||
]
|
||||
}),
|
||||
setup: (button) => Utils.timeout(1, () => {
|
||||
setupCursorHover(button);
|
||||
button.toggleClassName('sidebar-selector-tab-active', defaultTab === stackItem);
|
||||
button.toggleClassName('sidebar-selector-tab-active', currentTabId == navIndex);
|
||||
}),
|
||||
});
|
||||
|
||||
const defaultTab = 'apis';
|
||||
const contentStack = Stack({
|
||||
vexpand: true,
|
||||
transition: 'slide_left_right',
|
||||
items: [
|
||||
['apis', apiWidgets],
|
||||
['tools', toolBox],
|
||||
],
|
||||
})
|
||||
const navTabs = Box({
|
||||
homogeneous: true,
|
||||
children: contents.map((item, id) =>
|
||||
SidebarTabButton(id, item.materialIcon, item.friendlyName)
|
||||
),
|
||||
});
|
||||
|
||||
const navIndicator = NavigationIndicator(2, false, { // The line thing
|
||||
className: 'sidebar-selector-highlight',
|
||||
css: 'font-size: 0px; padding: 0rem 4.160rem;', // Shushhhh
|
||||
})
|
||||
});
|
||||
|
||||
const navBar = Box({
|
||||
vertical: true,
|
||||
hexpand: true,
|
||||
children: [
|
||||
Box({
|
||||
homogeneous: true,
|
||||
children: [
|
||||
SidebarTabButton(contentStack, 'apis', navIndicator, 0, 'api', 'APIs'),
|
||||
SidebarTabButton(contentStack, 'tools', navIndicator, 1, 'home_repair_service', 'Tools'),
|
||||
]
|
||||
}),
|
||||
navTabs,
|
||||
navIndicator,
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
const pinButton = Button({
|
||||
properties: [
|
||||
['enabled', false],
|
||||
['toggle', (self) => {
|
||||
self._enabled = !self._enabled;
|
||||
self.toggleClassName('sidebar-pin-enabled', self._enabled);
|
||||
|
||||
const sideleftWindow = App.getWindow('sideleft');
|
||||
const barWindow = App.getWindow('bar');
|
||||
const cornerTopLeftWindow = App.getWindow('cornertl');
|
||||
const sideleftContent = sideleftWindow.get_children()[0].get_children()[0].get_children()[1];
|
||||
|
||||
sideleftContent.toggleClassName('sidebar-pinned', self._enabled);
|
||||
|
||||
if (self._enabled) {
|
||||
sideleftWindow.layer = 'bottom';
|
||||
barWindow.layer = 'bottom';
|
||||
cornerTopLeftWindow.layer = 'bottom';
|
||||
sideleftWindow.exclusivity = 'exclusive';
|
||||
}
|
||||
else {
|
||||
sideleftWindow.layer = 'top';
|
||||
barWindow.layer = 'top';
|
||||
cornerTopLeftWindow.layer = 'top';
|
||||
sideleftWindow.exclusivity = 'normal';
|
||||
}
|
||||
}],
|
||||
],
|
||||
vpack: 'start',
|
||||
className: 'sidebar-pin',
|
||||
child: MaterialIcon('push_pin', 'larger'),
|
||||
tooltipText: 'Pin sidebar',
|
||||
onClicked: (self) => {
|
||||
self._enabled = !self._enabled;
|
||||
self.toggleClassName('sidebar-pin-enabled', self._enabled);
|
||||
|
||||
const sideleftWindow = App.getWindow('sideleft');
|
||||
const barWindow = App.getWindow('bar');
|
||||
const cornerTopLeftWindow = App.getWindow('cornertl');
|
||||
const sideleftContent = sideleftWindow.get_children()[0].get_children()[0].get_children()[1];
|
||||
|
||||
sideleftWindow.exclusivity = (self._enabled ? 'exclusive' : 'normal');
|
||||
sideleftContent.toggleClassName('sidebar-pinned', self._enabled);
|
||||
|
||||
if(self._enabled) {
|
||||
sideleftWindow.layer = 'bottom';
|
||||
barWindow.layer = 'bottom';
|
||||
cornerTopLeftWindow.layer = 'bottom';
|
||||
}
|
||||
else {
|
||||
sideleftWindow.layer = 'top';
|
||||
barWindow.layer = 'top';
|
||||
cornerTopLeftWindow.layer = 'top';
|
||||
}
|
||||
},
|
||||
onClicked: (self) => self._toggle(self),
|
||||
// QoL: Focus Pin button on open. Hit keybind -> space/enter = toggle pin state
|
||||
connections: [[App, (self, currentName, visible) => {
|
||||
if (currentName === 'sideleft' && visible) {
|
||||
@@ -128,7 +147,7 @@ export default () => Box({
|
||||
Box({
|
||||
vertical: true,
|
||||
vexpand: true,
|
||||
className: 'sidebar-left',
|
||||
className: 'sidebar-left spacing-v-10',
|
||||
children: [
|
||||
Box({
|
||||
className: 'spacing-h-10',
|
||||
@@ -147,15 +166,38 @@ export default () => Box({
|
||||
}),
|
||||
],
|
||||
connections: [
|
||||
['key-press-event', (widget, event) => { // Typing
|
||||
if (event.get_keyval()[1] >= 32 && event.get_keyval()[1] <= 126 &&
|
||||
widget != chatEntry && event.get_keyval()[1] != Gdk.KEY_space) {
|
||||
if (contentStack.shown == 'apis') {
|
||||
['key-press-event', (widget, event) => { // Handle keybinds
|
||||
if (event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) {
|
||||
// Pin sidebar
|
||||
if (event.get_keyval()[1] == Gdk.KEY_p)
|
||||
pinButton._toggle(pinButton);
|
||||
// Switch sidebar tab
|
||||
else if (event.get_keyval()[1] === Gdk.KEY_Page_Up)
|
||||
switchToTab(Math.max(currentTabId - 1), 0);
|
||||
else if (event.get_keyval()[1] === Gdk.KEY_Page_Down)
|
||||
switchToTab(Math.min(currentTabId + 1), contents.length);
|
||||
}
|
||||
if (contentStack.shown == 'apis') { // If api tab is focused
|
||||
// Automatically focus entry when typing
|
||||
if (event.get_keyval()[1] >= 32 && event.get_keyval()[1] <= 126 &&
|
||||
widget != chatEntry && event.get_keyval()[1] != Gdk.KEY_space) {
|
||||
chatEntry.grab_focus();
|
||||
chatEntry.set_text(chatEntry.text + String.fromCharCode(event.get_keyval()[1]));
|
||||
chatEntry.set_position(-1);
|
||||
}
|
||||
// Switch API type
|
||||
else if (!(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
|
||||
event.get_keyval()[1] === Gdk.KEY_Page_Down) {
|
||||
const toSwitchTab = contentStack.get_visible_child();
|
||||
toSwitchTab._nextTab();
|
||||
}
|
||||
else if (!(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
|
||||
event.get_keyval()[1] === Gdk.KEY_Page_Up) {
|
||||
const toSwitchTab = contentStack.get_visible_child();
|
||||
toSwitchTab._prevTab();
|
||||
}
|
||||
}
|
||||
|
||||
}],
|
||||
],
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user