Skip to content

Commit 300f66e

Browse files
thornbillthornbill
committed
Swap position of item count and play all controls in library toolbar
1 parent 9b35bd8 commit 300f66e

1 file changed

Lines changed: 61 additions & 56 deletions

File tree

‎src/apps/modern/features/libraries/components/LibraryToolbar.tsx‎

Lines changed: 61 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -104,61 +104,21 @@ const LibraryToolbar: FC = () => {
104104
>
105105
<LibraryViewMenu />
106106

107-
<Box
108-
sx={{
109-
display: 'flex',
110-
flexGrow: {
111-
xs: 1,
112-
sm: 0
113-
},
114-
justifyContent: 'flex-end',
115-
marginLeft: 1
116-
}}
117-
>
118-
<ButtonGroup
119-
variant='contained'
107+
{!MENU_ONLY_VIEWS.includes(viewType) && (
108+
<Box
109+
sx={{
110+
display: 'flex',
111+
flexGrow: {
112+
xs: 1,
113+
sm: 0
114+
},
115+
justifyContent: 'flex-end',
116+
marginLeft: 1
117+
}}
120118
>
121-
{isBtnPlayAllEnabled && (
122-
<PlayAllButton
123-
item={item}
124-
items={items}
125-
viewType={viewType}
126-
collectionType={collectionType}
127-
hasFilters={hasFilters}
128-
isTextVisible={isSmallScreen}
129-
libraryViewSettings={libraryViewSettings}
130-
/>
131-
)}
132-
133-
{isBtnShuffleEnabled && (
134-
<ShuffleButton
135-
item={item}
136-
items={items}
137-
viewType={viewType}
138-
collectionType={collectionType}
139-
hasFilters={hasFilters}
140-
isTextVisible={isSmallScreen && !isBtnPlayAllEnabled}
141-
libraryViewSettings={libraryViewSettings}
142-
/>
143-
)}
144-
145-
{isBtnQueueEnabled && item && playbackManager.canQueue(item) && (
146-
<QueueButton
147-
item={item}
148-
items={items}
149-
hasFilters={hasFilters}
150-
isTextVisible={isSmallScreen && !isBtnPlayAllEnabled && !isBtnShuffleEnabled}
151-
/>
152-
)}
153-
</ButtonGroup>
154-
155-
{isBtnNewCollectionEnabled && canCreateCollections && (
156-
<NewCollectionButton isTextVisible={isSmallScreen} queryKey={allItemsQueryKey} />
157-
)}
158-
{isBtnNewPlaylistEnabled && (
159-
<NewPlaylistButton isTextVisible={isSmallScreen} queryKey={allItemsQueryKey} />
160-
)}
161-
</Box>
119+
<Chip label={itemCountDisplay} />
120+
</Box>
121+
)}
162122

163123
{!MENU_ONLY_VIEWS.includes(viewType) && (
164124
<Stack
@@ -174,7 +134,10 @@ const LibraryToolbar: FC = () => {
174134
sm: 'auto'
175135
},
176136
flexGrow: 1,
177-
marginTop: 0.5,
137+
marginTop: {
138+
xs: 1,
139+
sm: 0.5
140+
},
178141
marginBottom: 0.5
179142
}}
180143
>
@@ -188,7 +151,49 @@ const LibraryToolbar: FC = () => {
188151
}
189152
}}
190153
>
191-
<Chip label={itemCountDisplay} />
154+
<ButtonGroup
155+
variant='contained'
156+
>
157+
{isBtnPlayAllEnabled && (
158+
<PlayAllButton
159+
item={item}
160+
items={items}
161+
viewType={viewType}
162+
collectionType={collectionType}
163+
hasFilters={hasFilters}
164+
isTextVisible={isSmallScreen}
165+
libraryViewSettings={libraryViewSettings}
166+
/>
167+
)}
168+
169+
{isBtnShuffleEnabled && (
170+
<ShuffleButton
171+
item={item}
172+
items={items}
173+
viewType={viewType}
174+
collectionType={collectionType}
175+
hasFilters={hasFilters}
176+
isTextVisible={isSmallScreen && !isBtnPlayAllEnabled}
177+
libraryViewSettings={libraryViewSettings}
178+
/>
179+
)}
180+
181+
{isBtnQueueEnabled && item && playbackManager.canQueue(item) && (
182+
<QueueButton
183+
item={item}
184+
items={items}
185+
hasFilters={hasFilters}
186+
isTextVisible={isSmallScreen && !isBtnPlayAllEnabled && !isBtnShuffleEnabled}
187+
/>
188+
)}
189+
</ButtonGroup>
190+
191+
{isBtnNewCollectionEnabled && canCreateCollections && (
192+
<NewCollectionButton isTextVisible={isSmallScreen} queryKey={allItemsQueryKey} />
193+
)}
194+
{isBtnNewPlaylistEnabled && (
195+
<NewPlaylistButton isTextVisible={isSmallScreen} queryKey={allItemsQueryKey} />
196+
)}
192197
</Box>
193198

194199
<ButtonGroup

0 commit comments

Comments
 (0)