ags: add config option for gtk anim duration

This commit is contained in:
end-4 2024-03-04 22:35:07 +07:00
parent 132bc97c83
commit f5885e444c
26 changed files with 60 additions and 87 deletions

View file

@ -86,7 +86,7 @@ export const ConfigSegmentedSelection = ({
const selectedIcon = Revealer({
revealChild: id == initIndex,
transition: 'slide_right',
transitionDuration: 150,
transitionDuration: userOptions.animations.durationSmall,
child: MaterialIcon('check', 'norm')
});
return Button({

View file

@ -79,10 +79,10 @@ export default ({
const destroyWithAnims = () => {
widget.sensitive = false;
notificationBox.setCss(middleClickClose);
Utils.timeout(200, () => {
Utils.timeout(userOptions.animations.durationSmall, () => {
if (wholeThing) wholeThing.revealChild = false;
}, wholeThing);
Utils.timeout(400, () => {
Utils.timeout(userOptions.animations.durationSmall * 2, () => {
command();
if (wholeThing) {
wholeThing.destroy();
@ -135,7 +135,7 @@ export default ({
},
revealChild: false,
transition: 'slide_down',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
child: Box({ // Box to make sure css-based spacing works
homogeneous: true,
}),
@ -144,7 +144,7 @@ export default ({
const display = Gdk.Display.get_default();
const notifTextPreview = Revealer({
transition: 'slide_down',
transitionDuration: 120,
transitionDuration: userOptions.animations.durationSmall,
revealChild: true,
child: Label({
xalign: 0,
@ -159,7 +159,7 @@ export default ({
});
const notifTextExpanded = Revealer({
transition: 'slide_up',
transitionDuration: 120,
transitionDuration: userOptions.animations.durationSmall,
revealChild: false,
child: Box({
vertical: true,
@ -305,17 +305,17 @@ export default ({
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);
const leftAnim1 = `transition: ${userOptions.animations.durationSmall}ms 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);
const rightAnim1 = `transition: ${userOptions.animations.durationSmall}ms cubic-bezier(0.05, 0.7, 0.1, 1);
margin-left: ${Number(maxOffset + endMargin)}rem;
margin-right: -${Number(maxOffset + endMargin)}rem;
opacity: 0;`;
const middleClickClose = `transition: 200ms cubic-bezier(0.85, 0, 0.15, 1);
const middleClickClose = `transition: ${userOptions.animations.durationSmall}ms cubic-bezier(0.85, 0, 0.15, 1);
margin-left: ${Number(maxOffset + endMargin)}rem;
margin-right: -${Number(maxOffset + endMargin)}rem;
opacity: 0;`;
@ -400,10 +400,10 @@ export default ({
self.setCss(leftAnim1);
widget.sensitive = false;
}
Utils.timeout(200, () => {
Utils.timeout(userOptions.animations.durationSmall, () => {
if (wholeThing) wholeThing.revealChild = false;
}, wholeThing);
Utils.timeout(400, () => {
Utils.timeout(userOptions.animations.durationSmall * 2, () => {
command();
if (wholeThing) {
wholeThing.destroy();
@ -432,7 +432,7 @@ export default ({
if (isPopup) Utils.timeout(popupTimeout, () => {
if (wholeThing) {
wholeThing.revealChild = false;
Utils.timeout(200, () => {
Utils.timeout(userOptions.animations.durationSmall, () => {
if (wholeThing) {
wholeThing.destroy();
wholeThing = null;

View file

@ -91,7 +91,7 @@ export const Bar = async (monitor = 0) => {
child: Widget.Stack({
homogeneous: false,
transition: 'slide_up_down',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
children: {
'normal': normalBarContent,
'focus': focusedBarContent,

View file

@ -186,7 +186,7 @@ export default () => {
Revealer({
revealChild: true,
transition: 'slide_left',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
child: Box({
className: 'spacing-h-10 margin-left-10',
children: [

View file

@ -88,7 +88,7 @@ const BarBattery = () => Box({
className: 'spacing-h-4 txt-onSurfaceVariant',
children: [
Revealer({
transitionDuration: 150,
transitionDuration: userOptions.animations.durationSmall,
revealChild: false,
transition: 'slide_right',
child: MaterialIcon('bolt', 'norm', { tooltipText: "Charging" }),
@ -133,7 +133,7 @@ const BarGroup = ({ child }) => Widget.Box({
});
const BatteryModule = () => Stack({
transition: 'slide_up_down',
transitionDuration: 150,
transitionDuration: userOptions.animations.durationLarge,
children: {
'laptop': Box({
className: 'spacing-h-4', children: [

View file

@ -3,8 +3,6 @@ import SystemTray from 'resource:///com/github/Aylur/ags/service/systemtray.js';
const { Box, Icon, Button, Revealer } = Widget;
const { Gravity } = imports.gi.Gdk;
const revealerDuration = 200;
const SysTrayItem = (item) => Button({
className: 'bar-systray-item',
child: Icon({
@ -32,7 +30,7 @@ export const Tray = (props = {}) => {
const trayRevealer = Widget.Revealer({
revealChild: true,
transition: 'slide_left',
transitionDuration: revealerDuration,
transitionDuration: userOptions.animations.durationLarge,
child: trayContent,
});
return Box({

View file

@ -11,7 +11,7 @@ const ResourceValue = (name, icon, interval, valueUpdateCmd, displayFunc, props
children: [
Revealer({
transition: 'slide_left',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
child: Box({
vpack: 'center',
vertical: true,

View file

@ -99,7 +99,7 @@ export default (monitor = 0) => {
});
const stack = Stack({
transition: 'crossfade',
transitionDuration: 180,
transitionDuration: userOptions.animations.durationLarge,
children: {
'disabled': Box({}),
'image': wallpaperImage,

View file

@ -10,7 +10,6 @@ const { execAsync, exec } = Utils;
const { Box, Revealer } = Widget;
import { setupCursorHover } from '../.widgetutils/cursorhover.js';
const ANIMATION_TIME = 150;
const pinnedApps = [
'firefox',
'org.gnome.Nautilus',
@ -48,7 +47,7 @@ const AppButton = ({ icon, ...rest }) => Widget.Revealer({
},
revealChild: false,
transition: 'slide_right',
transitionDuration: ANIMATION_TIME,
transitionDuration: userOptions.animations.durationLarge,
child: Widget.Button({
...rest,
className: 'dock-app-btn',
@ -128,7 +127,7 @@ const Taskbar = () => Widget.Box({
if (!removedButton) return;
removedButton.revealChild = false;
Utils.timeout(ANIMATION_TIME, () => {
Utils.timeout(userOptions.animations.durationLarge, () => {
removedButton.destroy();
box.attribute.map.delete(address);
box.children = Array.from(box.attribute.map.values());
@ -230,7 +229,7 @@ export default () => {
},
revealChild: false,
transition: 'slide_up',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
child: dockContent,
// setup: (self) => self
// .hook(Hyprland, (self) => self.attribute.updateShow(self))

View file

@ -43,7 +43,7 @@ const ColorschemeContent = () => Box({
export default () => Widget.Revealer({
transition: 'slide_down',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
child: ColorschemeContent(),
setup: (self) => self.hook(showColorScheme, (revealer) => {
revealer.revealChild = showColorScheme.value;

View file

@ -227,7 +227,7 @@ const CoverArt = ({ player, ...rest }) => {
const TrackControls = ({ player, ...rest }) => Widget.Revealer({
revealChild: false,
transition: 'slide_right',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
child: Widget.Box({
...rest,
vpack: 'center',
@ -263,7 +263,7 @@ const TrackControls = ({ player, ...rest }) => Widget.Revealer({
const TrackSource = ({ player, ...rest }) => Widget.Revealer({
revealChild: false,
transition: 'slide_left',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
child: Widget.Box({
...rest,
className: 'osd-music-pill spacing-h-5',
@ -292,7 +292,7 @@ const TrackTime = ({ player, ...rest }) => {
return Widget.Revealer({
revealChild: false,
transition: 'slide_left',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
child: Widget.Box({
...rest,
vpack: 'center',
@ -382,7 +382,7 @@ const MusicControlsWidget = (player) => Box({
export default () => Revealer({
transition: 'slide_down',
transitionDuration: 150,
transitionDuration: userOptions.animations.durationLarge,
revealChild: false,
child: Box({
setup: (self) => self.hook(Mpris, box => {

View file

@ -396,7 +396,7 @@ export default () => {
return Widget.Revealer({
revealChild: true,
transition: 'slide_down',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
child: Widget.Box({
vertical: true,
className: 'overview-tasks',

View file

@ -10,7 +10,7 @@ export const DirectoryButton = ({ parentPath, name, type, icon }) => {
const actionText = Widget.Revealer({
revealChild: false,
transition: "crossfade",
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
child: Widget.Label({
className: 'overview-search-results-txt txt txt-small txt-action',
label: 'Open',
@ -19,7 +19,7 @@ export const DirectoryButton = ({ parentPath, name, type, icon }) => {
const actionTextRevealer = Widget.Revealer({
revealChild: false,
transition: "slide_left",
transitionDuration: 300,
transitionDuration: userOptions.animations.durationSmall,
child: actionText,
});
return Widget.Button({
@ -78,7 +78,7 @@ export const DesktopEntryButton = (app) => {
const actionText = Widget.Revealer({
revealChild: false,
transition: "crossfade",
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
child: Widget.Label({
className: 'overview-search-results-txt txt txt-small txt-action',
label: 'Launch',
@ -87,7 +87,7 @@ export const DesktopEntryButton = (app) => {
const actionTextRevealer = Widget.Revealer({
revealChild: false,
transition: "slide_left",
transitionDuration: 300,
transitionDuration: userOptions.animations.durationSmall,
child: actionText,
});
return Widget.Button({

View file

@ -4,7 +4,7 @@ export const searchItem = ({ materialIconName, name, actionName, content, onActi
const actionText = Widget.Revealer({
revealChild: false,
transition: "crossfade",
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
child: Widget.Label({
className: 'overview-search-results-txt txt txt-small txt-action',
label: `${actionName}`,
@ -13,7 +13,7 @@ export const searchItem = ({ materialIconName, name, actionName, content, onActi
const actionTextRevealer = Widget.Revealer({
revealChild: false,
transition: "slide_left",
transitionDuration: 300,
transitionDuration: userOptions.animations.durationSmall,
child: actionText,
})
return Widget.Button({

View file

@ -61,7 +61,7 @@ export const SearchAndWindows = () => {
vexpand: true,
});
const resultsRevealer = Widget.Revealer({
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
revealChild: false,
transition: 'slide_down',
// duration: 200,
@ -70,7 +70,7 @@ export const SearchAndWindows = () => {
});
const entryPromptRevealer = Widget.Revealer({
transition: 'crossfade',
transitionDuration: 150,
transitionDuration: userOptions.animations.durationLarge,
revealChild: true,
hpack: 'center',
child: Widget.Label({
@ -81,7 +81,7 @@ export const SearchAndWindows = () => {
const entryIconRevealer = Widget.Revealer({
transition: 'crossfade',
transitionDuration: 150,
transitionDuration: userOptions.animations.durationLarge,
revealChild: false,
hpack: 'end',
child: Widget.Label({

View file

@ -11,7 +11,7 @@ const { exec, execAsync } = Utils;
const SessionButton = (name, icon, command, props = {}) => {
const buttonDescription = Widget.Revealer({
vpack: 'end',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationSmall,
transition: 'slide_down',
revealChild: false,
child: Widget.Label({

View file

@ -79,7 +79,7 @@ const ProviderSwitcher = () => {
const providerList = Revealer({
revealChild: false,
transition: 'slide_down',
transitionDuration: 180,
transitionDuration: userOptions.animations.durationLarge,
child: Box({
vertical: true, className: 'spacing-v-5 sidebar-chat-providerswitcher-list',
children: [
@ -209,7 +209,7 @@ export const OpenaiApiKeyInstructions = () => Box({
homogeneous: true,
children: [Revealer({
transition: 'slide_down',
transitionDuration: 150,
transitionDuration: userOptions.animations.durationLarge,
setup: (self) => self
.hook(GPTService, (self, hasKey) => {
self.revealChild = (GPTService.key.length == 0);

View file

@ -113,7 +113,7 @@ export const GoogleAiInstructions = () => Box({
homogeneous: true,
children: [Revealer({
transition: 'slide_down',
transitionDuration: 150,
transitionDuration: userOptions.animations.durationLarge,
setup: (self) => self
.hook(GeminiService, (self, hasKey) => {
self.revealChild = (GeminiService.key.length == 0);

View file

@ -70,7 +70,7 @@ const WaifuImage = (taglist) => {
const downloadState = Stack({
homogeneous: false,
transition: 'slide_up_down',
transitionDuration: 150,
transitionDuration: userOptions.animations.durationSmall,
children: {
'api': ImageState('api', 'Calling API'),
'download': ImageState('downloading', 'Downloading image'),
@ -128,7 +128,7 @@ const WaifuImage = (taglist) => {
});
const blockImageRevealer = Revealer({
transition: 'slide_down',
transitionDuration: 150,
transitionDuration: userOptions.animations.durationLarge,
revealChild: false,
child: Overlay({
child: Box({
@ -328,7 +328,7 @@ export const waifuView = Scrollable({
const waifuTags = Revealer({
revealChild: false,
transition: 'crossfade',
transitionDuration: 150,
transitionDuration: userOptions.animations.durationLarge,
child: Box({
className: 'spacing-h-5',
children: [

View file

@ -136,7 +136,7 @@ const chatPlaceholder = Label({
const chatPlaceholderRevealer = Revealer({
revealChild: true,
transition: 'crossfade',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
child: chatPlaceholder,
setup: enableClickthrough,
});
@ -157,7 +157,7 @@ const textboxArea = Box({ // Entry area
const apiContentStack = Stack({
vexpand: true,
transition: 'slide_left_right',
transitionDuration: 160,
transitionDuration: userOptions.animations.durationLarge,
children: APIS.reduce((acc, api) => {
acc[api.name] = api.contentWidget;
return acc;
@ -166,7 +166,7 @@ const apiContentStack = Stack({
const apiCommandStack = Stack({
transition: 'slide_up_down',
transitionDuration: 160,
transitionDuration: userOptions.animations.durationLarge,
children: APIS.reduce((acc, api) => {
acc[api.name] = api.commandBar;
return acc;

View file

@ -38,7 +38,7 @@ export default ({
const content = Revealer({
revealChild: revealChild,
transition: 'slide_down',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
child: Box({
className: 'margin-top-5',
homogeneous: true,

View file

@ -147,7 +147,7 @@ const contentStack = Widget.Stack({
// 'stars': Widget.Label({ label: 'GitHub feed will be here' }),
},
transition: 'slide_up_down',
transitionDuration: 180,
transitionDuration: userOptions.animations.durationLarge,
setup: (stack) => Utils.timeout(1, () => {
stack.shown = defaultShown;
})

View file

@ -121,7 +121,7 @@ export default (props) => {
});
const listContents = Stack({
transition: 'crossfade',
transitionDuration: 150,
transitionDuration: userOptions.animations.durationLarge,
children: {
'empty': notifEmptyContent,
'list': notifList,

View file

@ -67,7 +67,7 @@ const todoListItem = (task, id, isDone, isEven = false) => {
const widgetRevealer = Widget.Revealer({
revealChild: true,
transition: 'slide_down',
transitionDuration: 150,
transitionDuration: userOptions.animations.durationLarge,
child: todoContent,
})
return widgetRevealer;
@ -112,7 +112,7 @@ const todoItems = (isDone) => Widget.Scrollable({
const UndoneTodoList = () => {
const newTaskButton = Revealer({
transition: 'slide_left',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
revealChild: true,
child: Button({
className: 'txt-small sidebar-todo-new',
@ -131,7 +131,7 @@ const UndoneTodoList = () => {
});
const cancelAddTask = Revealer({
transition: 'slide_right',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
revealChild: false,
child: Button({
className: 'txt-norm icon-material sidebar-todo-add',
@ -162,13 +162,13 @@ const UndoneTodoList = () => {
});
const newTaskEntryRevealer = Revealer({
transition: 'slide_right',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
revealChild: false,
child: newTaskEntry,
});
const confirmAddTask = Revealer({
transition: 'slide_right',
transitionDuration: 200,
transitionDuration: userOptions.animations.durationLarge,
revealChild: false,
child: Button({
className: 'txt-norm icon-material sidebar-todo-add',

View file

@ -1,29 +1 @@
$darkmode: true;
$primary: #8ccdff;
$onPrimary: #003350;
$primaryContainer: #004b73;
$onPrimaryContainer: #cae6ff;
$secondary: #b7c8d9;
$onSecondary: #22323f;
$secondaryContainer: #394856;
$onSecondaryContainer: #d3e4f6;
$tertiary: #d0bfe8;
$onTertiary: #362b4a;
$tertiaryContainer: #4e4162;
$onTertiaryContainer: #eddcff;
$error: #ffb4a9;
$onError: #680003;
$errorContainer: #930006;
$onErrorContainer: #ffb4a9;
$colorbarbg: #0F1012;
$background: #0F1012;
$onBackground: #e2e2e5;
$surface: #1a1c1e;
$onSurface: #e2e2e5;
$surfaceVariant: #41474d;
$onSurfaceVariant: #c2c7ce;
$outline: #8b9198;
$shadow: #000000;
$inverseSurface: #e2e2e5;
$inverseOnSurface: #2f3032;
$inversePrimary: #006497;

View file

@ -5,6 +5,10 @@ let userConfigOptions = {
'defaultTemperature': 0.9,
'writingCursor': ' ...', // Warning: Using weird characters can mess up Markdown rendering
},
'animations': {
'durationSmall': 110,
'durationLarge': 180,
},
'apps': {
'imageViewer': 'loupe',
},