Skip to content

Commit 0ed7b1e

Browse files
FeichtmeierFeichtmeier
authored
Dock section: re-align and add compact mode option (#235)
* Dock section: re-align and add compact mode option * Redesign the appearance page and add more descriptions * make getters nullable and process them correctly * only set if value is not null * multitasking: make setters check for null and update ui * appearance page: use real setters, check for null * Do not expose compact mode to the UI, it's bugged
1 parent 75effb3 commit 0ed7b1e

File tree

4 files changed

+244
-155
lines changed

4 files changed

+244
-155
lines changed

‎lib/view/pages/appearance/appearance_model.dart‎

Lines changed: 55 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ class AppearanceModel extends ChangeNotifier {
1010
static const _dashMaxIconSizeKey = 'dash-max-icon-size';
1111
static const _dockPositionKey = 'dock-position';
1212
static const _clickActionKey = 'click-action';
13+
static const _customThemeShrink = 'custom-theme-shrink';
1314

1415
AppearanceModel(SettingsService service)
1516
: _dashToDockSettings = service.lookup(schemaDashToDock) {
@@ -26,46 +27,54 @@ class AppearanceModel extends ChangeNotifier {
2627

2728
// Dock section
2829

29-
bool get showTrash => _dashToDockSettings?.boolValue(_showTrashKey) ?? false;
30+
bool? get showTrash => _dashToDockSettings?.boolValue(_showTrashKey);
3031

31-
void setShowTrash(bool value) {
32-
_dashToDockSettings?.setValue(_showTrashKey, value);
33-
notifyListeners();
32+
set showTrash(bool? value) {
33+
if (value != null) {
34+
_dashToDockSettings?.setValue(_showTrashKey, value);
35+
notifyListeners();
36+
}
3437
}
3538

36-
bool get alwaysShowDock =>
37-
_dashToDockSettings?.boolValue(_dockFixedKey) ?? true;
39+
bool? get alwaysShowDock => _dashToDockSettings?.boolValue(_dockFixedKey);
3840

39-
void setAlwaysShowDock(bool value) {
40-
_dashToDockSettings?.setValue(_dockFixedKey, value);
41-
notifyListeners();
41+
set alwaysShowDock(bool? value) {
42+
if (value != null) {
43+
_dashToDockSettings?.setValue(_dockFixedKey, value);
44+
notifyListeners();
45+
}
4246
}
4347

44-
bool get extendDock =>
45-
_dashToDockSettings?.boolValue(_extendHeightKey) ?? true;
48+
bool? get extendDock => _dashToDockSettings?.boolValue(_extendHeightKey);
4649

47-
void setExtendDock(bool value) {
48-
_dashToDockSettings?.setValue(_extendHeightKey, value);
49-
notifyListeners();
50+
set extendDock(bool? value) {
51+
if (value != null) {
52+
_dashToDockSettings?.setValue(_extendHeightKey, value);
53+
notifyListeners();
54+
}
5055
}
5156

52-
bool get appGlow => _dashToDockSettings?.boolValue(_backlitItemsKey) ?? false;
57+
bool? get appGlow => _dashToDockSettings?.boolValue(_backlitItemsKey);
5358

54-
void setAppGlow(bool value) {
55-
_dashToDockSettings?.setValue(_backlitItemsKey, value);
56-
notifyListeners();
59+
set appGlow(bool? value) {
60+
if (value != null) {
61+
_dashToDockSettings?.setValue(_backlitItemsKey, value);
62+
notifyListeners();
63+
}
5764
}
5865

59-
double get maxIconSize =>
60-
_dashToDockSettings?.intValue(_dashMaxIconSizeKey)?.toDouble() ?? 48.0;
61-
62-
void setMaxIconSize(double value) {
63-
var intValue = value.toInt();
64-
if (intValue.isOdd) {
65-
intValue -= 1;
66+
double? get maxIconSize =>
67+
_dashToDockSettings?.intValue(_dashMaxIconSizeKey)?.toDouble();
68+
69+
set maxIconSize(double? value) {
70+
if (value != null) {
71+
var intValue = value.toInt();
72+
if (intValue.isOdd) {
73+
intValue -= 1;
74+
}
75+
_dashToDockSettings?.setValue(_dashMaxIconSizeKey, intValue);
76+
notifyListeners();
6677
}
67-
_dashToDockSettings?.setValue(_dashMaxIconSizeKey, intValue);
68-
notifyListeners();
6978
}
7079

7180
static const dockPositions = ['LEFT', 'RIGHT', 'BOTTOM'];
@@ -77,8 +86,10 @@ class AppearanceModel extends ChangeNotifier {
7786
dockPositions.contains(_realDockPosition) ? _realDockPosition : 'LEFT';
7887

7988
set dockPosition(String? value) {
80-
_dashToDockSettings!.setValue(_dockPositionKey, value!);
81-
notifyListeners();
89+
if (value != null) {
90+
_dashToDockSettings!.setValue(_dockPositionKey, value);
91+
notifyListeners();
92+
}
8293
}
8394

8495
static const clickActions = [
@@ -95,7 +106,20 @@ class AppearanceModel extends ChangeNotifier {
95106
: clickActions.first;
96107

97108
set clickAction(String? value) {
98-
_dashToDockSettings?.setValue(_clickActionKey, value!);
99-
notifyListeners();
109+
if (value != null) {
110+
_dashToDockSettings?.setValue(_clickActionKey, value);
111+
notifyListeners();
112+
}
113+
}
114+
115+
// Currently this option is unstable and thus not exposed to the UI
116+
bool? get customThemeShrink =>
117+
_dashToDockSettings?.getValue(_customThemeShrink);
118+
119+
set customThemeShrink(bool? value) {
120+
if (value != null) {
121+
_dashToDockSettings?.setValue(_customThemeShrink, value);
122+
notifyListeners();
123+
}
100124
}
101125
}

‎lib/view/pages/appearance/dock_section.dart‎

Lines changed: 107 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -6,108 +6,138 @@ import 'package:yaru_widgets/yaru_widgets.dart';
66

77
class DockSection extends StatelessWidget {
88
const DockSection({Key? key}) : super(key: key);
9+
static const assetHeight = 80.0;
10+
static const assetPadding = 20.0;
911

1012
@override
1113
Widget build(BuildContext context) {
1214
final model = Provider.of<AppearanceModel>(context);
1315

14-
return YaruSection(
15-
headline: 'Dock',
16+
return Column(
1617
children: [
17-
YaruSwitchRow(
18-
trailingWidget: const Text('Show Trash'),
19-
value: model.showTrash,
20-
onChanged: (value) => model.setShowTrash(value),
21-
),
22-
Column(
18+
YaruSection(
19+
headline: 'Dock appearance',
2320
children: [
24-
YaruSwitchRow(
25-
trailingWidget: const Text('Auto-hide the Dock'),
26-
value: !model.alwaysShowDock,
27-
onChanged: (value) => model.setAlwaysShowDock(!value),
28-
),
21+
YaruRow(
22+
trailingWidget: const Text('Panel mode'),
23+
description:
24+
'Extends the height of the dock to become a panel.',
25+
actionWidget: Radio<bool>(
26+
value: true,
27+
groupValue: model.extendDock,
28+
onChanged: (value) => model.extendDock = value),
29+
enabled: model.extendDock != null),
2930
Padding(
30-
padding: const EdgeInsets.all(20.0),
31-
child: SvgPicture.asset(
32-
'assets/images/auto-hide.svg',
33-
color: !model.alwaysShowDock
34-
? Theme.of(context).primaryColor.withOpacity(0.1)
35-
: Theme.of(context).backgroundColor,
36-
colorBlendMode: BlendMode.color,
37-
height: 80,
38-
),
39-
)
40-
],
41-
),
42-
Column(
43-
children: [
44-
YaruSwitchRow(
45-
trailingWidget: const Text('Extend Dock'),
46-
value: model.extendDock,
47-
onChanged: (value) => model.setExtendDock(value),
48-
),
49-
Padding(
50-
padding: const EdgeInsets.all(8.0),
31+
padding: const EdgeInsets.all(assetPadding),
5132
child: SvgPicture.asset(
5233
'assets/images/panel-mode.svg',
53-
color: model.extendDock
34+
color: (model.extendDock != null && model.extendDock == true)
5435
? Theme.of(context).primaryColor.withOpacity(0.1)
5536
: Theme.of(context).backgroundColor,
5637
colorBlendMode: BlendMode.color,
57-
height: 80,
38+
height: assetHeight,
5839
),
5940
),
41+
YaruRow(
42+
trailingWidget: const Text('Dock mode'),
43+
description:
44+
'Displays the dock in a centered, free-floating mode.',
45+
actionWidget: Radio<bool>(
46+
value: false,
47+
groupValue: model.extendDock,
48+
onChanged: (value) => model.extendDock = value!),
49+
enabled: true),
6050
Padding(
61-
padding: const EdgeInsets.all(8.0),
51+
padding: const EdgeInsets.all(assetPadding),
6252
child: SvgPicture.asset(
6353
'assets/images/dock-mode.svg',
64-
color: !model.extendDock
54+
color: (model.extendDock != null && !model.extendDock!)
6555
? Theme.of(context).primaryColor.withOpacity(0.1)
6656
: Theme.of(context).backgroundColor,
6757
colorBlendMode: BlendMode.color,
68-
height: 80,
58+
height: assetHeight,
6959
),
7060
),
7161
],
7262
),
73-
YaruSwitchRow(
74-
trailingWidget: const Text('Active App Glow'),
75-
value: model.appGlow,
76-
onChanged: (value) => model.setAppGlow(value),
77-
),
78-
YaruSliderRow(
79-
actionLabel: 'Icon Size',
80-
value: model.maxIconSize,
81-
min: 16,
82-
max: 64,
83-
defaultValue: 48,
84-
onChanged: (value) => model.setMaxIconSize(value),
85-
),
86-
YaruRow(
87-
enabled: model.dockPosition != null,
88-
trailingWidget: const Text('Dock Position'),
89-
actionWidget: DropdownButton<String>(
90-
onChanged: (value) => model.dockPosition = value,
91-
value: model.dockPosition,
92-
items: [
93-
for (var item in AppearanceModel.dockPositions)
94-
DropdownMenuItem(child: Text(item.toLowerCase()), value: item)
95-
],
96-
),
97-
),
98-
YaruRow(
99-
enabled: model.clickAction != null,
100-
trailingWidget: const Text('Click Action'),
101-
actionWidget: DropdownButton<String>(
102-
onChanged: (value) => model.clickAction = value,
103-
value: model.clickAction,
104-
items: [
105-
for (var item in AppearanceModel.clickActions)
106-
DropdownMenuItem(
107-
child: Text(item.toLowerCase().replaceAll('-', ' ')),
108-
value: item)
109-
],
110-
),
63+
YaruSection(
64+
headline: 'Dock options',
65+
children: [
66+
Column(
67+
children: [
68+
YaruSwitchRow(
69+
enabled: model.alwaysShowDock != null,
70+
trailingWidget: const Text('Auto-hide the Dock'),
71+
actionDescription: 'The dock hides when windows touch it.',
72+
value: model.alwaysShowDock != null &&
73+
model.alwaysShowDock == false,
74+
onChanged: (value) => model.alwaysShowDock = !value,
75+
),
76+
Padding(
77+
padding: const EdgeInsets.all(assetPadding),
78+
child: SvgPicture.asset(
79+
'assets/images/auto-hide.svg',
80+
color:
81+
(model.alwaysShowDock != null && !model.alwaysShowDock!)
82+
? Theme.of(context).primaryColor.withOpacity(0.1)
83+
: Theme.of(context).backgroundColor,
84+
colorBlendMode: BlendMode.color,
85+
height: assetHeight,
86+
),
87+
)
88+
],
89+
),
90+
YaruSwitchRow(
91+
trailingWidget: const Text('Show Trash'),
92+
actionDescription: 'Show the trash on the dock',
93+
value: model.showTrash,
94+
onChanged: (value) => model.showTrash = value,
95+
),
96+
YaruSwitchRow(
97+
trailingWidget: const Text('Active App Glow'),
98+
actionDescription:
99+
'Colors active app icons in their primary accent color.',
100+
value: model.appGlow,
101+
onChanged: (value) => model.appGlow = value,
102+
),
103+
YaruSliderRow(
104+
actionLabel: 'Icon Size',
105+
value: model.maxIconSize ?? 48.0,
106+
min: 16,
107+
max: 64,
108+
defaultValue: 48,
109+
onChanged: (value) => model.maxIconSize = value,
110+
),
111+
YaruRow(
112+
enabled: model.dockPosition != null,
113+
trailingWidget: const Text('Dock Position'),
114+
actionWidget: DropdownButton<String>(
115+
onChanged: (value) => model.dockPosition = value,
116+
value: model.dockPosition,
117+
items: [
118+
for (var item in AppearanceModel.dockPositions)
119+
DropdownMenuItem(
120+
child: Text(item.toLowerCase()), value: item)
121+
],
122+
),
123+
),
124+
YaruRow(
125+
enabled: model.clickAction != null,
126+
description:
127+
'Defines what happens when you click on active app icons.',
128+
trailingWidget: const Text('Click Action'),
129+
actionWidget: DropdownButton<String>(
130+
onChanged: (value) => model.clickAction = value,
131+
value: model.clickAction,
132+
items: [
133+
for (var item in AppearanceModel.clickActions)
134+
DropdownMenuItem(
135+
child: Text(item.toLowerCase().replaceAll('-', ' ')),
136+
value: item)
137+
],
138+
),
139+
),
140+
],
111141
),
112142
],
113143
);

0 commit comments

Comments
 (0)