Skip to content
This repository has been archived by the owner on Oct 4, 2023. It is now read-only.

[C-2763] Fix desktop playlist qa issues #3634

Merged
merged 3 commits into from
Jun 22, 2023
Merged

[C-2763] Fix desktop playlist qa issues #3634

merged 3 commits into from
Jun 22, 2023

Conversation

dylanjeffers
Copy link
Contributor

Description

  • When page width is small, the icons for the action buttons are off center
  • Newly created folders should be added to the top of the playlist library
  • playlist artwork lingers when going to a playlist without an image
    • Displays both artwork from other playlist and the artwork placeholder icon
  • Add tooltip for the share action button when disabled bc of empty playlist
  • Text color for the playlist name doesn’t animate, but the icon does
    • text color should animate
  • bounding box for the playlist name edit should not span across the entire card
  • make public modal stays open after clicking confirm
  • make public action button text is the wrong size (too big)
  • edit page cancel button font size is the wrong size (too small)
  • add to playlist empty artwork
  • overflow menus in sidebar can overlap
    • they don’t close until you click away or open some other type of overflow menu
  • action buttons can get clipped on certain screen sizes
    • The share and make public buttons should shrink at the same break point as the edit button
  • Placeholder artwork background color on the playlist screen should match the grey from the edit modal (Web)
  • Make sure that the choose artwork popup aligns properly
    • Pops up over the image and in the middle of the modal

@dylanjeffers dylanjeffers requested a review from Kyle-Shanks June 22, 2023 06:00
@audius-infra
Copy link
Collaborator

Preview this change https://demo.audius.co/dj-c-2763-desktop-qa-fixes

Kyle-Shanks
Kyle-Shanks reviewed Jun 22, 2023
View reviewed changes
packages/stems/src/assets/styles/animations.css
@@ -8,5 +8,6 @@
:root,
root {
--quick: 0.07s ease-in-out;
--calm: 0.2s ease-in-out;
--expressive: 0.2s ease-in-out;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does anything else use the calm var? change makes sense, but want to make sure that nothing else is affected

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes i went ahead and updated all usages :)

Kyle-Shanks
Kyle-Shanks reviewed Jun 22, 2023
View reviewed changes
packages/stems/src/components/Button/Button.module.css
@@ -59,15 +59,15 @@
}

.button .icon.left.noText {
margin: 0;
margin: 0 !important;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't wait for the design updates to avoid things like this in the future

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

right! it's so frustrating

Kyle-Shanks
Kyle-Shanks reviewed Jun 22, 2023
View reviewed changes
packages/web/src/components/collection/desktop/Artwork.tsx Outdated
Comment on lines 61 to 67
console.log({
gradient,
imageOverride,
image,
placeholderArt
})

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

log

Kyle-Shanks
Kyle-Shanks reviewed Jun 22, 2023
View reviewed changes
packages/web/src/components/collection/desktop/Artwork.tsx Outdated
Comment on lines 3 to 7
import {
imageBlank as placeholderArt,
CoverArtSizes,
SquareSizes
} from '@audius/common'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

were these used for anything?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no great call

Kyle-Shanks
Kyle-Shanks reviewed Jun 22, 2023
View reviewed changes
packages/web/src/components/collection/desktop/CollectionHeader.module.css Outdated
Comment on lines 3 to 7
}

.show {
opacity: 1;
transition: opacity ease-in-out 0.5s;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can use the animation var here right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes def!

Kyle-Shanks
Kyle-Shanks reviewed Jun 22, 2023
View reviewed changes
packages/web/src/components/image-selection/ImageSelectionButton.js
@@ -65,7 +66,7 @@ const ImageSelectionButton = ({
{includePopup ? (
<>
<Button
ref={anchorRef}
ref={anchorRefProp ? undefined : anchorRefInner}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

curious what this ref stuff is for?

Copy link
Contributor Author

@dylanjeffers dylanjeffers Jun 22, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so remember how the artist popover was weirldy positioned relative to the artwork? the reason was is because the popover was anchored to the button that opens it, not the artwork itself, so i updated the component to accept an anchorRef from a parent (in this case the artwork), and kept the inner one around for compatibility with other usages where we actually want to anchor to the button.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah interesting. sounds good

@dylanjeffers dylanjeffers merged commit 82204ec into main Jun 22, 2023
@dylanjeffers dylanjeffers deleted the dj-c-2763-desktop-qa-fixes branch June 22, 2023 18:06
dylanjeffers added a commit that referenced this pull request Jun 22, 2023
@dylanjeffers
[C-2763] Fix desktop playlist qa issues (#3634)
79bf127
audius-infra pushed a commit that referenced this pull request Jun 24, 2023
v1.5.30
a672754 
[fe5fda4] Fix entity button widths (#3650) Dylan Jeffers
[820e79e] Fix user profile always showing artist tabs (#3648) Dylan Jeffers
[bc34b6f] [C-2697] Fix mobile playlist qa issues (#3638) Dylan Jeffers
[3e8d7e8] Mobile chats recalculate container bottom on keyboard shown (#3644) Reed
[39928cf] Bump app versions for full release (#3643) Reed
[437e971] Update SDK to v3.0.3-beta.56 (#3641) Marcus Pasell
[3e42cb2] [PAY-1526] Mobile chat reaction picker shadow (#3642) Reed
[ab33206] Amplitude tracking for chat report abuse (#3639) Reed
[6f570c6] Put playlist-artwork generation behind flag (#3640) Dylan Jeffers
[2f1f40d] [C-2475] Add desktop favorites playlist tab (#3637) Dylan Jeffers
[394cacb] [PAY-1516] Chat report abuse flow (#3636) Reed
[82204ec] [C-2763] Fix desktop playlist qa issues (#3634) Dylan Jeffers
[3912407] Implement OAuth Write Popup C-2664 (#3628) nicoback2
[7e13b54] [C-2783] Add terms of service link (#3635) Dylan Jeffers
[bda6eeb] Refactor: extract reusable modal field component (#3631) Andrew Mendelsohn
[c2a59dc] [PAY-1319] Fix emoji keyboard overlapping chat text input (#3629) Reed
[14150ec] [C-2784] Refactor track page to use entity button (#3624) Dylan Jeffers
[5a3e74e] [PAY-1457] Add amplitude analytics to chat features (#3627) Marcus Pasell
[d1aee10] [PAY-1412] Reset player state on app load (#3632) Reed
[965330c] [PAY-1191] Finesse keyboard enter/exit animations (#3633) Michael Piazza
[c9c531e] Create grant upon making developer app (#3630) nicoback2
[a33de30] [PAY-1464] DMs: Go to chat after successful tip (#3625) Marcus Pasell
[646a5eb] [PLAT-1015] Remove entity manager feature flag (#3619) Raymond Jacobson
[31450e7] [PAY-1498][PAY-1477] Misc mobile DMs UI Fixes (#3626) Michael Piazza
[a08f3e7] [C-2760, C-2779] Fix header for playlist and artists tabs in explore screen (#3579) Kyle Shanks
[9a98157] [C-2676] Rough release date modal (#3610) Andrew Mendelsohn
[5e9a847] [C-2771, C-2772] Add duplicate add to playlist confirmation drawer and modal (#3601) Kyle Shanks
[49ca553] [PAY-1468] Fix mobile chats copy message button (#3623) Reed
[193ae1c] [PAY-1483] Patch RN to fix textinput multiline onchange not firing (#3622) Reed
@AudiusProject AudiusProject deleted a comment from linear bot Sep 11, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@Kyle-Shanks Kyle-Shanks Kyle-Shanks approved these changes

Assignees
No one assigned
Labels
size/L
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@dylanjeffers @audius-infra @Kyle-Shanks