Skip to content

Commit 89483d0

Browse files
fflewddurfflewddur
committed
src/*.ts: avoid css namespace clashes
- Prepend all CSS classes with 'tophat-'
1 parent 7044499 commit 89483d0

File tree

10 files changed

+110
-93
lines changed

10 files changed

+110
-93
lines changed

‎RELEASES.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ based on [Keep a Changelog].
77

88
- Fixed temperature sensor detection on older Intel Core CPUs
99
- Fixed disk monitor problem with sshfs mounts
10+
- Fixed potential CSS namespace clashes
1011
- Added German translation (from [theinfamousben](https://github.com/theinfamousben))
1112

1213
## TopHat 21 - February 23, 2025

‎resources/stylesheet.css‎

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -66,23 +66,22 @@
6666
background-color: rgba(10, 10, 10, 0.3);
6767
}
6868

69-
.meter-bar {
69+
.tophat-meter-bar {
7070
margin: 0 1px 0 0;
7171
padding: 0;
72-
/* border-radius: 2px; */
7372
}
7473

75-
.meter-bar:last-child {
74+
.tophat-meter-bar:last-child {
7675
margin-right: 0;
7776
}
7877

79-
.menu-grid {
78+
.tophat-menu-grid {
8079
margin: 0.25em 0.25em 1em 0.25em;
8180
padding: 0;
8281
min-width: 18em;
8382
}
8483

85-
.menu-header {
84+
.tophat-menu-header {
8685
text-align: center;
8786
font-weight: 600;
8887
font-size: 0.9em;
@@ -91,102 +90,102 @@
9190
color: #bbb;
9291
}
9392

94-
.menu-subheader {
93+
.tophat-menu-subheader {
9594
text-align: center;
9695
font-size: 0.8em;
9796
}
9897

99-
.menu-label {
98+
.tophat-menu-label {
10099
font-size: 1em;
101100
padding: 0.25em 0.5em;
102101
text-align: left;
103102
}
104103

105-
.menu-value {
104+
.tophat-menu-value {
106105
font-size: 0.9em;
107106
font-weight: bold;
108107
padding: 0.25em 0.5em;
109108
text-align: right;
110109
}
111110

112-
.menu-details {
111+
.tophat-menu-details {
113112
font-size: 0.8em;
114113
padding: 0.25em 0.5em;
115114
}
116115

117-
.menu-section-end {
116+
.tophat-menu-section-end {
118117
margin-bottom: 1em;
119118
}
120119

121-
.menu-uptime {
120+
.tophat-menu-uptime {
122121
font-size: 0.8em;
123122
text-align: center;
124123
}
125124

126-
.menu-cmd-name {
125+
.tophat-menu-cmd-name {
127126
font-size: 0.8em;
128127
text-align: left;
129128
padding: 0.25em 0.25em 0.25em 0.5em;
130129
width: 160px;
131130
}
132131

133-
.menu-cmd-usage {
132+
.tophat-menu-cmd-usage {
134133
font-size: 0.8em;
135134
text-align: right;
136135
padding: 0.25em 0.5em 0.25em 0;
137136
}
138137

139-
.menu-cmd-activity {
138+
.tophat-menu-cmd-activity {
140139
font-size: 0.8em;
141140
text-align: right;
142141
padding: 0.25em 0.5em 0.25em 0;
143142
width: 5em;
144143
}
145144

146-
.chart {
145+
.tophat-chart {
147146
background-color: rgba(0, 0, 0, 0.2);
148147
border-radius: 4px;
149148
margin: 12px 6px;
150149
height: 6em;
151150
}
152151

153-
.chart-stacked-top {
152+
.tophat-chart-stacked-top {
154153
margin-bottom: 1px;
155154
height: 3em;
156155
}
157156

158-
.chart-stacked-bottom {
157+
.tophat-chart-stacked-bottom {
159158
margin-top: 0;
160159
height: 3em;
161160
}
162161

163-
.chart-label {
162+
.tophat-chart-label {
164163
font-size: 0.8em;
165164
padding: 12px 0;
166165
color: #ccc;
167166
}
168167

169-
.chart-label-then {
168+
.tophat-chart-label-then {
170169
font-size: 0.7em;
171170
color: #ccc;
172171
text-align: left;
173172
padding: 0 0.5em 1em 0.5em;
174173
}
175174

176-
.chart-label-now {
175+
.tophat-chart-label-now {
177176
font-size: 0.7em;
178177
color: #ccc;
179178
text-align: right;
180179
padding: 0 0.5em 1em 0.5em;
181180
}
182181

183-
.chart-bar {
182+
.tophat-chart-bar {
184183
min-width: 4px;
185184
min-height: 2px;
186185
margin-right: 1px;
187186
}
188187

189-
.chart-bar:last-child {
188+
.tophat-chart-bar:last-child {
190189
margin-right: 0;
191190
}
192191

@@ -202,7 +201,7 @@
202201
margin: 0;
203202
}
204203

205-
.cap-bar {
204+
.tophat-cap-bar {
206205
margin: 5px 6px 10px 6px;
207206
height: 5px;
208207
background-color: rgba(0, 0, 0, 0.1);

‎src/capacity.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const CapacityBar = GObject.registerClass(
3131

3232
constructor() {
3333
super({
34-
style_class: 'cap-bar slider',
34+
style_class: 'tophat-cap-bar slider',
3535
can_focus: false,
3636
reactive: false,
3737
track_hover: true,

‎src/cpu.ts‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -134,42 +134,47 @@ export const CpuMonitor = GObject.registerClass(
134134
private buildMenu() {
135135
let label = new St.Label({
136136
text: _('Processor usage'),
137-
style_class: 'menu-header',
137+
style_class: 'tophat-menu-header',
138138
});
139139
this.addMenuRow(label, 0, 2, 1);
140140

141141
label = new St.Label({
142142
text: _('Processor utilization:'),
143-
style_class: 'menu-label',
143+
style_class: 'tophat-menu-label',
144144
});
145145
this.addMenuRow(label, 0, 1, 1);
146146
this.menuCpuUsage.text = MeterNoVal;
147-
this.menuCpuUsage.add_style_class_name('menu-value');
147+
this.menuCpuUsage.add_style_class_name('tophat-menu-value');
148148
this.addMenuRow(this.menuCpuUsage, 1, 1, 1);
149-
this.menuCpuCap.add_style_class_name('menu-section-end');
149+
this.menuCpuCap.add_style_class_name('tophat-menu-section-end');
150150
this.addMenuRow(this.menuCpuCap, 0, 2, 1);
151151

152152
// TODO: if we have multiple sockets, create a section for each
153153
this.menuCpuModel.text = _(`model ${MeterNoVal}`);
154-
this.menuCpuModel.add_style_class_name('menu-label menu-details');
154+
this.menuCpuModel.add_style_class_name(
155+
'tophat-menu-label tophat-menu-details'
156+
);
155157
this.menuCpuModel.set_x_expand(true);
156158
this.addMenuRow(this.menuCpuModel, 0, 2, 1);
157159
label = new St.Label({
158160
text: _('Frequency:'),
159-
style_class: 'menu-label menu-details',
161+
style_class: 'tophat-menu-label tophat-menu-details',
160162
});
161163
this.addMenuRow(label, 0, 1, 1);
162164
this.menuCpuFreq.text = MeterNoVal;
163-
this.menuCpuFreq.add_style_class_name('menu-value menu-details');
165+
this.menuCpuFreq.add_style_class_name(
166+
'tophat-menu-value tophat-menu-details'
167+
);
164168
this.addMenuRow(this.menuCpuFreq, 1, 1, 1);
165169
label = new St.Label({
166170
text: _('Temperature:'),
167-
style_class: 'menu-label menu-details menu-section-end',
171+
style_class:
172+
'tophat-menu-label tophat-menu-details tophat-menu-section-end',
168173
});
169174
this.addMenuRow(label, 0, 1, 1);
170175
this.menuCpuTemp.text = MeterNoVal;
171176
this.menuCpuTemp.add_style_class_name(
172-
'menu-value menu-details menu-section-end'
177+
'tophat-menu-value tophat-menu-details tophat-menu-section-end'
173178
);
174179
this.addMenuRow(this.menuCpuTemp, 1, 1, 1);
175180

@@ -179,27 +184,31 @@ export const CpuMonitor = GObject.registerClass(
179184

180185
label = new St.Label({
181186
text: _('Top processes'),
182-
style_class: 'menu-header',
187+
style_class: 'tophat-menu-header',
183188
});
184189
this.addMenuRow(label, 0, 2, 1);
185190
for (let i = 0; i < NumTopProcs; i++) {
186-
this.topProcs[i].cmd.set_style_class_name('menu-cmd-name');
191+
this.topProcs[i].cmd.set_style_class_name('tophat-menu-cmd-name');
187192
this.addMenuRow(this.topProcs[i].cmd, 0, 1, 1);
188193
this.topProcs[i].setTooltip();
189-
this.topProcs[i].usage.set_style_class_name('menu-cmd-usage');
194+
this.topProcs[i].usage.set_style_class_name('tophat-menu-cmd-usage');
190195
if (i === NumTopProcs - 1) {
191-
this.topProcs[i].usage.add_style_class_name('menu-section-end');
196+
this.topProcs[i].usage.add_style_class_name(
197+
'tophat-menu-section-end'
198+
);
192199
}
193200
this.addMenuRow(this.topProcs[i].usage, 1, 1, 1);
194201
}
195202

196203
label = new St.Label({
197204
text: _('System uptime'),
198-
style_class: 'menu-header',
205+
style_class: 'tophat-menu-header',
199206
});
200207
this.addMenuRow(label, 0, 2, 1);
201208
this.menuUptime.text = MeterNoVal;
202-
this.menuUptime.add_style_class_name('menu-uptime menu-section-end');
209+
this.menuUptime.add_style_class_name(
210+
'tophat-menu-uptime tophat-menu-section-end'
211+
);
203212
this.addMenuRow(this.menuUptime, 0, 2, 1);
204213
}
205214

‎src/disk.ts‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -46,15 +46,15 @@ class FSWidgets {
4646
constructor(mount: string) {
4747
this.mount = new St.Label({
4848
text: mount,
49-
style_class: 'menu-label',
49+
style_class: 'tophat-menu-label',
5050
});
5151
this.usage = new St.Label({
52-
style_class: 'menu-value',
52+
style_class: 'tophat-menu-value',
5353
x_expand: true,
5454
});
5555
this.capacity = new CapacityBar();
5656
this.size = new St.Label({
57-
style_class: 'menu-details align-right menu-section-end',
57+
style_class: 'tophat-menu-details align-right tophat-menu-section-end',
5858
});
5959
}
6060
}
@@ -164,45 +164,47 @@ export const DiskMonitor = GObject.registerClass(
164164

165165
let label = new St.Label({
166166
text: _('Disk activity'),
167-
style_class: 'menu-header',
167+
style_class: 'tophat-menu-header',
168168
});
169169
this.addMenuRow(label, 0, 3, 1);
170170

171171
label = new St.Label({
172172
text: _('Reading:'),
173-
style_class: 'menu-label',
173+
style_class: 'tophat-menu-label',
174174
});
175175
this.addMenuRow(label, 0, 2, 1);
176176
this.menuDiskReads.text = MeterNoVal;
177-
this.menuDiskReads.add_style_class_name('menu-value');
177+
this.menuDiskReads.add_style_class_name('tophat-menu-value');
178178
this.addMenuRow(this.menuDiskReads, 2, 1, 1);
179179

180180
label = new St.Label({
181181
text: _('Writing:'),
182-
style_class: 'menu-label',
182+
style_class: 'tophat-menu-label',
183183
});
184184
this.addMenuRow(label, 0, 2, 1);
185185
this.menuDiskWrites.text = MeterNoVal;
186-
this.menuDiskWrites.add_style_class_name('menu-value menu-section-end');
186+
this.menuDiskWrites.add_style_class_name(
187+
'tophat-menu-value tophat-menu-section-end'
188+
);
187189
this.addMenuRow(this.menuDiskWrites, 2, 1, 1);
188190

189191
label = new St.Label({
190192
text: _('Total read:'),
191-
style_class: 'menu-label',
193+
style_class: 'tophat-menu-label',
192194
});
193195
this.addMenuRow(label, 0, 2, 1);
194196
this.menuDiskReadsTotal.text = MeterNoVal;
195-
this.menuDiskReadsTotal.add_style_class_name('menu-value');
197+
this.menuDiskReadsTotal.add_style_class_name('tophat-menu-value');
196198
this.addMenuRow(this.menuDiskReadsTotal, 2, 1, 1);
197199

198200
label = new St.Label({
199201
text: _('Total written:'),
200-
style_class: 'menu-label',
202+
style_class: 'tophat-menu-label',
201203
});
202204
this.addMenuRow(label, 0, 2, 1);
203205
this.menuDiskWritesTotal.text = MeterNoVal;
204206
this.menuDiskWritesTotal.add_style_class_name(
205-
'menu-value menu-section-end'
207+
'tophat-menu-value tophat-menu-section-end'
206208
);
207209
this.addMenuRow(this.menuDiskWritesTotal, 2, 1, 1);
208210

@@ -212,38 +214,38 @@ export const DiskMonitor = GObject.registerClass(
212214

213215
label = new St.Label({
214216
text: _('Top processes'),
215-
style_class: 'menu-header',
217+
style_class: 'tophat-menu-header',
216218
});
217219
this.addMenuRow(label, 0, 3, 1);
218220

219221
label = new St.Label({ text: '' });
220222
this.addMenuRow(label, 0, 1, 1);
221223
label = new St.Label({
222224
text: _('Writing'),
223-
style_class: 'menu-subheader',
225+
style_class: 'tophat-menu-subheader',
224226
});
225227
this.addMenuRow(label, 1, 1, 1);
226228
label = new St.Label({
227229
text: _('Reading'),
228-
style_class: 'menu-subheader',
230+
style_class: 'tophat-menu-subheader',
229231
});
230232
this.addMenuRow(label, 2, 1, 1);
231233
for (let i = 0; i < NumTopProcs; i++) {
232-
this.topProcs[i].cmd.set_style_class_name('menu-cmd-name');
234+
this.topProcs[i].cmd.set_style_class_name('tophat-menu-cmd-name');
233235
this.addMenuRow(this.topProcs[i].cmd, 0, 1, 1);
234236
this.topProcs[i].setTooltip();
235-
this.topProcs[i].in.set_style_class_name('menu-cmd-activity');
237+
this.topProcs[i].in.set_style_class_name('tophat-menu-cmd-activity');
236238
this.addMenuRow(this.topProcs[i].in, 1, 1, 1);
237-
this.topProcs[i].out.set_style_class_name('menu-cmd-activity');
239+
this.topProcs[i].out.set_style_class_name('tophat-menu-cmd-activity');
238240
if (i === NumTopProcs - 1) {
239-
this.topProcs[i].out.add_style_class_name('menu-section-end');
241+
this.topProcs[i].out.add_style_class_name('tophat-menu-section-end');
240242
}
241243
this.addMenuRow(this.topProcs[i].out, 2, 1, 1);
242244
}
243245

244246
label = new St.Label({
245247
text: _('Filesystem usage'),
246-
style_class: 'menu-header',
248+
style_class: 'tophat-menu-header',
247249
});
248250
this.addMenuRow(label, 0, 3, 1);
249251

0 commit comments

Comments
 (0)