this repo has no description
Add experimental tab bar v2
+151
-4
+4
src/app.css
+4
src/app.css
···
1708
1708
#app[data-shortcuts-view-mode='tab-menu-bar'] #compose-button {
1709
1709
bottom: calc(16px + 52px);
1710
1710
bottom: calc(16px + env(safe-area-inset-bottom) + 52px);
1711
+
1712
+
body.exp-tab-bar-v2 & {
1713
+
bottom: max(16px, var(--sai-bottom));
1714
+
}
1711
1715
}
1712
1716
}
1713
1717
#compose-button {
+9
src/app.jsx
+9
src/app.jsx
···
359
359
});
360
360
}
361
361
362
+
{
363
+
// Temporary Experiments
364
+
// May be removed in the future
365
+
document.body.classList.toggle(
366
+
'exp-tab-bar-v2',
367
+
store.local.get('experiments-tabBarV2') ?? false,
368
+
);
369
+
}
370
+
362
371
function App() {
363
372
const [isLoggedIn, setIsLoggedIn] = useState(false);
364
373
const [uiState, setUIState] = useState('loading');
+107
-4
src/components/shortcuts.css
+107
-4
src/components/shortcuts.css
···
9
9
z-index: 101;
10
10
transition: all 0.3s ease-in-out;
11
11
border: var(--hairline-width) solid var(--bg-color);
12
-
box-shadow: inset 0 -4px 16px -8px var(--button-bg-blur-color),
13
-
0 3px 8px -1px var(--drop-shadow-color);
12
+
13
+
body.exp-tab-bar-v2 & {
14
+
box-shadow:
15
+
inset 0 -4px 16px -8px var(--button-bg-blur-color),
16
+
0 3px 8px -1px var(--drop-shadow-color);
17
+
}
14
18
}
15
19
#shortcuts-button .icon {
16
20
transform: translateY(2px); /* Balance the icon's vertical alignment */
···
70
74
env(safe-area-inset-left);
71
75
user-select: none;
72
76
-webkit-touch-callout: none;
77
+
78
+
body.exp-tab-bar-v2 & {
79
+
transition:
80
+
all 0.3s ease-in-out,
81
+
max-width 0s;
82
+
inset-inline-end: auto;
83
+
--inset-inline-start: max(16px, var(--sai-inline-start));
84
+
--inset-inline-end: max(16px, var(--sai-inline-end));
85
+
--inset-block-end: max(16px, var(--sai-bottom));
86
+
--compose-button-width: 56px;
87
+
inset-inline-start: var(--inset-inline-start);
88
+
inset-block-end: max(16px, var(--sai-bottom));
89
+
max-width: calc(
90
+
100vw - var(--inset-inline-start) - var(--inset-inline-end) -
91
+
var(--compose-button-width) - 8px
92
+
);
93
+
border-radius: 999px;
94
+
box-shadow:
95
+
0 3px 8px -1px var(--drop-shadow-color),
96
+
0 10px 36px -4px var(--drop-shadow-color);
97
+
outline: 1px solid var(--outline-color);
98
+
99
+
@media (pointer: coarse) {
100
+
&:active {
101
+
transform: scale(1.025);
102
+
transition-duration: 0.1s;
103
+
}
104
+
}
105
+
}
106
+
}
107
+
body.exp-tab-bar-v2 {
108
+
#filters-page ~ #shortcuts .tab-bar:not([hidden]),
109
+
#lists-page ~ #shortcuts .tab-bar:not([hidden]) {
110
+
max-width: calc(
111
+
100vw - var(--inset-inline-start) - var(--inset-inline-end)
112
+
);
113
+
}
73
114
}
74
115
#shortcuts .tab-bar ul {
75
116
display: flex;
···
85
126
justify-content: center;
86
127
min-width: 20vw;
87
128
flex-basis: 20vw;
129
+
130
+
body.exp-tab-bar-v2 & {
131
+
@media (orientation: landscape) {
132
+
flex-grow: 0;
133
+
min-width: auto;
134
+
flex-basis: auto;
135
+
}
136
+
~ li {
137
+
margin-inline-start: -3%;
138
+
@media (orientation: landscape) {
139
+
margin-inline-start: 0;
140
+
}
141
+
}
142
+
}
88
143
}
89
144
#shortcuts .tab-bar li a {
90
145
-webkit-tap-highlight-color: transparent;
···
100
155
text-shadow: 0 var(--hairline-width) var(--bg-color);
101
156
width: 100%;
102
157
158
+
body.exp-tab-bar-v2 & {
159
+
min-height: 56px;
160
+
justify-content: center;
161
+
@media (orientation: landscape) {
162
+
width: auto;
163
+
font-size: 14px;
164
+
gap: 4px;
165
+
flex-direction: row;
166
+
min-height: 0;
167
+
}
168
+
}
169
+
103
170
@media (hover: hover) {
104
171
&:is(:hover, :focus) {
105
172
color: var(--text-color);
···
120
187
white-space: nowrap;
121
188
text-overflow: ellipsis;
122
189
overflow: hidden;
190
+
191
+
body.exp-tab-bar-v2 & {
192
+
@media (orientation: landscape) {
193
+
text-align: left;
194
+
line-height: 1;
195
+
}
196
+
}
123
197
}
124
198
#shortcuts .tab-bar li a {
125
199
position: relative;
126
200
&:before {
127
201
content: '';
128
202
position: absolute;
129
-
inset: 4px 0;
130
203
border-radius: 8px;
131
-
background-color: var(--bg-color);
132
204
z-index: -1;
133
205
transform: scale(0.5);
134
206
opacity: 0;
135
207
transition: all 0.1s ease-in-out;
208
+
inset: 2px;
209
+
background-color: var(--bg-faded-color);
210
+
}
211
+
212
+
body.exp-tab-bar-v2 &:before {
213
+
border-radius: 999px;
136
214
}
137
215
}
138
216
#shortcuts .tab-bar li a.is-active {
···
188
266
border: 0;
189
267
box-shadow: none;
190
268
border-bottom: var(--hairline-width) solid var(--bg-faded-color);
269
+
270
+
body.exp-tab-bar-v2 & {
271
+
transition: none;
272
+
left: 0;
273
+
right: 0;
274
+
inset-block-end: auto;
275
+
border-radius: 0;
276
+
outline: 0;
277
+
max-width: none;
278
+
box-shadow: none;
279
+
}
191
280
}
192
281
#shortcuts .tab-bar ul:before {
193
282
content: '';
···
209
298
font-size: 14px;
210
299
height: 44px;
211
300
gap: 4px;
301
+
302
+
&:before {
303
+
inset: 4px 0;
304
+
background-color: var(--bg-color);
305
+
}
306
+
307
+
body.exp-tab-bar-v2 & {
308
+
min-height: 0;
309
+
&:before {
310
+
inset: 4px 0;
311
+
border-radius: 8px;
312
+
background-color: var(--bg-color);
313
+
}
314
+
}
212
315
}
213
316
#shortcuts .tab-bar li a span {
214
317
text-align: left;
+9
src/index.css
+9
src/index.css
···
9
9
--sai-bottom: env(safe-area-inset-bottom);
10
10
--sai-left: env(safe-area-inset-left);
11
11
12
+
--sai-inline-start: var(--sai-left);
13
+
&:dir(rtl) {
14
+
--sai-inline-start: var(--sai-right);
15
+
}
16
+
--sai-inline-end: var(--sai-right);
17
+
&:dir(rtl) {
18
+
--sai-inline-end: var(--sai-left);
19
+
}
20
+
12
21
--text-size: 16px;
13
22
--main-width: 40em;
14
23
text-size-adjust: none;
+22
src/pages/settings.jsx
+22
src/pages/settings.jsx
···
73
73
// })();
74
74
// }, []);
75
75
76
+
const [expTabBarV2, setExpTabBarV2] = useState(
77
+
store.local.get('experiments-tabBarV2') ?? false,
78
+
);
79
+
76
80
return (
77
81
<div
78
82
id="settings-container"
···
925
929
>
926
930
Clear all caches
927
931
</button>
932
+
<p>Temporary Experiments</p>
933
+
<label>
934
+
<input
935
+
type="checkbox"
936
+
checked={expTabBarV2}
937
+
onChange={(e) => {
938
+
const { checked } = e.target;
939
+
document.body.classList.toggle('exp-tab-bar-v2', checked);
940
+
setExpTabBarV2(checked);
941
+
if (checked) {
942
+
store.local.set('experiments-tabBarV2', true);
943
+
} else {
944
+
store.local.del('experiments-tabBarV2');
945
+
}
946
+
}}
947
+
/>{' '}
948
+
Tab bar v2
949
+
</label>
928
950
</details>
929
951
)}
930
952
</main>