fix(qbz-slint): match current QBZ Discover Home
Corrections from testing feedback: - Remove the greeting — the current QBZ discovery view has no greeting, only the tab selector. Drops HomeState.greeting and the chrono dep. - Quality badge is now the icon-only badge (hi-res.svg, or cd.svg in a framed square), not a numeric text pill. AlbumCardItem carries a quality tier instead of a quality string. - Tighten the album card: deterministic 274px height, title and artist in a 2px-spaced stack — removes the large gap between them. - SectionRow no longer scrolls vertically (vertical-scrollbar-policy always-off, height pinned to the card height). - Artwork is downscaled to 264px on decode instead of holding ~600px source textures. cc
This commit is contained in:
12 files changed
+408
-136
No files matched your search
@@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="128" width="128" version="1.1" id="_x32_" viewBox="0 0 512 512" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#000000;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M508.797,215.893c-9.977-62.966-42.222-117.038-87.362-155.217C376.304,22.48,318.172,0,256.298,0 c-13.335,0-26.842,1.043-40.405,3.195c-62.966,9.985-117.038,42.23-155.217,87.37C22.48,135.689,0,193.829,0,255.703 c0,13.334,1.043,26.841,3.204,40.404c9.976,62.966,42.222,117.039,87.362,155.218C135.697,489.52,193.829,512,255.703,512 c13.334,0,26.841-1.043,40.404-3.204c62.966-9.976,117.039-42.222,155.218-87.361C489.52,376.304,512,318.172,512,256.298 C512,242.963,510.957,229.456,508.797,215.893z M425.274,399.387c-33.166,39.165-79.838,67.025-134.514,75.714 c-11.794,1.866-23.5,2.771-35.057,2.771c-53.56,0-103.924-19.456-143.09-52.598c-39.165-33.166-67.024-79.838-75.714-134.514 c-1.866-11.794-2.771-23.5-2.771-35.057c0-53.56,19.448-103.924,52.598-143.09c33.166-39.173,79.838-67.025,134.514-75.714 c11.794-1.866,23.499-2.771,35.057-2.771c53.56,0,103.924,19.448,143.089,52.598c39.165,33.166,67.025,79.838,75.714,134.514 c1.866,11.794,2.771,23.499,2.771,35.057C477.872,309.858,458.416,360.222,425.274,399.387z"/>
|
||||
<path class="st0" d="M345.77,309.735l80.132,47.919c6.284-10.514,11.607-21.575,15.772-33.174l-87.508-32.286 C351.916,298.332,349.047,304.209,345.77,309.735z"/>
|
||||
<path class="st0" d="M287.899,355.69l28.414,88.853c35.587-11.322,66.21-32.212,89.505-59.192l-70.628-60.953 C322.867,338.662,306.728,349.723,287.899,355.69z"/>
|
||||
<path class="st0" d="M70.35,187.552l87.435,32.286c2.25-6.137,5.119-12.015,8.396-17.541l-80.067-47.854 C79.839,164.893,74.516,175.954,70.35,187.552z"/>
|
||||
<path class="st0" d="M224.135,156.311l-28.407-88.853c-35.579,11.386-66.275,32.22-89.562,59.273l70.628,60.936 C189.102,173.354,205.314,162.285,224.135,156.311z"/>
|
||||
<path class="st0" d="M250.804,223.254c-18.087,2.869-30.42,19.864-27.55,37.942c2.869,18.095,19.856,30.419,37.942,27.55 c18.079-2.87,30.419-19.848,27.55-37.942C285.877,232.725,268.891,220.384,250.804,223.254z"/>
|
||||
<path class="st0" d="M339.062,256.086c0-4.328-0.342-8.714-1.044-13.106c-6.504-40.894-41.757-70.041-81.933-70.041 c-4.328,0-8.706,0.342-13.106,1.035c-40.893,6.513-70.034,41.765-70.041,81.933c0,4.328,0.342,8.706,1.035,13.107 c6.52,40.893,41.765,70.041,81.941,70.041c4.328,0,8.705-0.334,13.107-1.035C309.906,331.514,339.062,296.27,339.062,256.086z M265.801,317.796c-3.325,0.53-6.626,0.783-9.886,0.783c-30.199,0-56.836-21.968-61.711-52.778c-0.53-3.334-0.79-6.634-0.79-9.895 c0-30.199,21.975-56.836,52.785-61.702c3.325-0.53,6.627-0.79,9.887-0.79c30.207,0,56.844,21.975,61.71,52.777 c0.53,3.334,0.791,6.636,0.791,9.896C318.587,286.293,296.612,312.93,265.801,317.796z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -0,0 +1,293 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 48.4249878 48.4255981" style="enable-background:new 0 0 48.4249878 48.4255981;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{display:none;}
|
||||
.st1{display:inline;fill:#FFFFFF;}
|
||||
.st2{display:inline;}
|
||||
.st3{fill:#FFFFFF;}
|
||||
.st4{clip-path:url(#SVGID_2_);fill:url(#SVGID_3_);}
|
||||
.st5{clip-path:url(#SVGID_5_);fill:url(#SVGID_6_);}
|
||||
.st6{clip-path:url(#SVGID_8_);fill:url(#SVGID_9_);}
|
||||
.st7{fill:#6A4018;}
|
||||
.st8{clip-path:url(#SVGID_11_);fill:url(#SVGID_12_);}
|
||||
.st9{clip-path:url(#SVGID_14_);fill:url(#SVGID_15_);}
|
||||
.st10{clip-path:url(#SVGID_17_);fill:url(#SVGID_18_);}
|
||||
.st11{clip-path:url(#SVGID_20_);fill:url(#SVGID_21_);}
|
||||
</style>
|
||||
<g class="st0">
|
||||
<polygon class="st1" points="48.4248047,60.5088501 0.0097961,60.5368652 0.0097961,48.4248657 48.4248047,48.4248657 "/>
|
||||
<polygon class="st2" points="48.4248047,60.5088501 0.0097961,60.5368652 0.0097961,48.4248657 48.4248047,48.4248657 "/>
|
||||
<g class="st2">
|
||||
<polygon class="st3" points="7.6476746,51.9105225 7.6136475,51.9105225 6.7856445,57.621582 5.0166626,57.621582
|
||||
3.9126587,50.6075439 5.3036499,50.6075439 5.9666443,56.0345459 5.9856567,56.0345459 6.732666,50.6075439 8.5496521,50.6075439
|
||||
9.2836609,56.0345459 9.2916565,56.0345459 9.956665,50.6075439 11.3336182,50.6075439 10.2156677,57.621582 8.4226685,57.621582
|
||||
"/>
|
||||
<rect x="12.6079712" y="50.6080322" class="st3" width="1.2849731" height="7.0139771"/>
|
||||
<path class="st3" d="M15.5543823,50.6078491h2.2130127c1.0039673,0,2.0079956,0.4530029,2.0079956,1.8979492
|
||||
c0,0.848999-0.4020386,1.3780518-0.9780273,1.6280518v0.0239868c0.3590088,0.157959,0.4960327,0.4110107,0.6940308,1.2600098
|
||||
c0.1859741,0.7559814,0.3330078,1.4419556,0.5,2.2039795h-1.3650513c-0.098999-0.5310059-0.2679443-1.401001-0.3839722-1.8369751
|
||||
c-0.1599731-0.7560425-0.3480225-1.0090332-1.0029907-1.0090332h-0.3759766v2.8460083h-1.309021V50.6078491z
|
||||
M16.8634033,53.6517944h0.6089478c0.5230103,0,1.0020142-0.2289429,1.0020142-0.9639893
|
||||
c0-0.7769775-0.5219727-0.9379883-1.0529785-0.9379883h-0.5579834V53.6517944z"/>
|
||||
<polygon class="st3" points="21.3668823,50.607605 24.7418823,50.607605 24.7418823,51.7496338 22.6618652,51.7496338
|
||||
22.6618652,53.4726563 24.5788574,53.4726563 24.5788574,54.5906372 22.6618652,54.6176147 22.6618652,56.4736328
|
||||
24.8438721,56.4736328 24.8438721,57.6216431 21.3668823,57.6216431 "/>
|
||||
<polygon class="st3" points="26.3867188,50.607605 27.6746826,50.607605 27.6746826,56.4736328 29.8087158,56.4736328
|
||||
29.8087158,57.6216431 26.3867188,57.6216431 "/>
|
||||
<polygon class="st3" points="31.2047119,50.607605 34.5976563,50.607605 34.5976563,51.7496338 32.5136719,51.7496338
|
||||
32.5136719,53.4726563 34.4146729,53.4726563 34.4146729,54.5906372 32.5136719,54.5906372 32.5136719,56.4736328
|
||||
34.6676636,56.4736328 34.6676636,57.6216431 31.2047119,57.6216431 "/>
|
||||
<path class="st3" d="M39.250061,51.8395996c-0.3650513-0.1329956-0.6610107-0.2039795-1.0570068-0.2039795
|
||||
c-0.4570313,0-0.9250488,0.2039795-0.9250488,0.7780151c0,0.4169922,0.2280273,0.6419678,0.9380493,1.0780029
|
||||
c0.9759521,0.5739746,1.6300049,1.0119629,1.6300049,2.2009888c0,1.3980103-1.052002,2.0440063-2.257019,2.0440063
|
||||
c-0.507019,0-1.1240234-0.0960083-1.6170044-0.2750244l0.2630005-1.1479492
|
||||
c0.4680176,0.1849976,0.9039917,0.2709961,1.3289795,0.2709961c0.5910034,0,0.9910278-0.2709961,0.9910278-0.8210449
|
||||
c0-0.506958-0.3569946-0.8029785-1.0579834-1.2160034c-0.8950195-0.4819946-1.4980469-1.0310059-1.4980469-2.0629883
|
||||
c0-1.4909668,1.0830078-1.9940186,2.1360474-1.9940186c0.5219727,0,0.9919434,0.0680542,1.3839722,0.2030029L39.250061,51.8395996
|
||||
z"/>
|
||||
<path class="st3" d="M44.0172119,51.8395996c-0.3500366-0.1329956-0.6590576-0.2039795-1.0510254-0.2039795
|
||||
c-0.4570313,0-0.9260254,0.2039795-0.9260254,0.7559814c0,0.4390259,0.2290039,0.6640015,0.9520264,1.1000366
|
||||
c0.9649658,0.5739746,1.5889893,1.0119629,1.5889893,2.2009888c0,1.3980103-1.039978,2.0440063-2.2529907,2.0440063
|
||||
c-0.4910278,0-1.1019897-0.0960083-1.5839844-0.2750244l0.2749634-1.1479492
|
||||
c0.4390259,0.1849976,0.8920288,0.2709961,1.309021,0.2709961c0.5709839,0,0.9819946-0.2709961,0.9819946-0.8210449
|
||||
c0-0.506958-0.3439941-0.8029785-1.065979-1.2160034c-0.901001-0.4819946-1.5-1.0310059-1.5-2.0629883
|
||||
c0-1.4909668,1.0929565-1.9940186,2.1389771-1.9940186c0.5219727,0,1.0159912,0.0680542,1.3930054,0.2030029
|
||||
L44.0172119,51.8395996z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M41.7749634,14.1011963c-1.2600098-0.5539551-1.6170044-0.8739624-1.6170044-1.5819702
|
||||
c0-0.9199829,0.7649536-1.2579956,1.5019531-1.2579956c0.6420288,0,1.4120483,0.177002,2.06604,0.4309692l0.401001-1.6709595
|
||||
c-0.6900024-0.3010254-1.5610352-0.4840088-2.5370483-0.4840088c-1.6729736,0-3.4299927,0.9379883-3.4299927,3.0750122
|
||||
c0,1.5319824,0.94104,2.3599854,2.5840454,3.0949707c1.2630005,0.592041,1.7909546,1.007019,1.7909546,1.809021
|
||||
c0,0.8930054-0.6679688,1.2359619-1.5539551,1.2359619c-0.7740479,0-1.6670532-0.1799927-2.5310059-0.5459595l-0.3920288,1.7160034
|
||||
c0.8710327,0.3460083,1.9949951,0.5509644,2.9230347,0.5509644c1.6900024,0,3.5479736-0.8009644,3.5479736-3.0709839
|
||||
C44.5289307,15.6342163,43.4369507,14.8822021,41.7749634,14.1011963"/>
|
||||
<path d="M33.770813,9.5367432c-2.6090088,0-3.9619751,2.4330444-3.9619751,5.5050049
|
||||
c0,3.1640015,1.5310059,5.4320068,4.5939941,5.4320068c0.8619995,0,1.6459961-0.1589966,2.1539917-0.3659668l-0.242981-1.651001
|
||||
c-0.5709839,0.2059937-1.1790161,0.2959595-1.809021,0.2959595c-1.6209717,0-2.6350098-1.0749512-2.7449951-3.09198h5.572998
|
||||
v-0.8709717C37.3328247,11.6497803,36.3718262,9.5367432,33.770813,9.5367432 M35.4588623,14.0057373h-3.6990356
|
||||
c0.1359863-1.5789795,0.7160034-2.8409424,1.9920044-2.8409424c1.1779785,0,1.7070313,1.1709595,1.7070313,2.7529907V14.0057373z"
|
||||
/>
|
||||
<path d="M26.9191284,13.7351685v-0.026001c1.1640015-0.4550171,1.8520508-1.559021,1.8520508-3.1409912
|
||||
c0-2.6340332-1.5890503-3.6229858-3.4370117-3.6229858l-3.848999,0.0229492v13.4620361h1.8460083v-5.7349854h1.1459961
|
||||
c1.3859863,0,1.7039795,0.4609985,2.0369873,2.0199585c0.1950073,0.8699951,0.5529785,2.6799927,0.7420044,3.7150269h2.0219727
|
||||
c-0.3410034-1.4700317-0.617981-2.7520142-0.9389648-4.197998C27.9751587,14.6031494,27.663147,14.0061646,26.9191284,13.7351685
|
||||
M24.8101807,12.8851318h-1.4790039V8.736145h1.5379639c1.0050049,0,2.0250244,0.342041,2.0250244,2.0629883
|
||||
C26.894165,12.335144,26.0111694,12.8851318,24.8101807,12.8851318"/>
|
||||
<rect x="17.7680054" y="12.6350098" width="2.1149902" height="2.0369873"/>
|
||||
<rect x="14.2819824" y="6.9680176" width="1.8839722" height="1.9249878"/>
|
||||
<rect x="14.2730103" y="10.7529907" width="1.8770142" height="9.677002"/>
|
||||
<polygon points="10.364502,12.6348267 6.1434937,12.6348267 6.1434937,6.9678345 4.2354736,6.9678345 4.2354736,20.4308472
|
||||
6.1434937,20.4308472 6.1434937,14.4208374 10.364502,14.4208374 10.364502,20.4308472 12.2524414,20.4308472
|
||||
12.2524414,6.9678345 10.364502,6.9678345 "/>
|
||||
<path d="M24.2147217,29.095459c-8.0780029,0-15.7089539-1.992981-22.4049683-5.5v23.0170288l44.8029785-0.0250244V23.595459
|
||||
C39.916748,27.102478,32.2977295,29.095459,24.2147217,29.095459 M10.17276,42.3274536l-0.7160034-2.2049561H6.3267517
|
||||
l-0.7089844,2.2049561H3.8527527l2.9330139-9.0119629h2.269989l2.8990173,9.0119629H10.17276z M20.2657471,39.6624756
|
||||
c0,1.8380127-1.3859863,2.8259888-3.2579956,2.8259888c-1.8430176,0-3.2410278-0.9879761-3.2410278-2.8259888v-6.3469849h1.6660156
|
||||
V39.4375c0,1.1029663,0.6610107,1.5559692,1.565979,1.5559692c0.9050293,0,1.6060181-0.4810181,1.6060181-1.5559692v-6.1220093
|
||||
h1.6610107V39.6624756z M25.8157349,42.3274536h-2.7529907v-9.0119629h2.7529907
|
||||
c2.6600342,0,4.1010132,1.697998,4.1010132,4.4679565C29.916748,40.5614624,28.475769,42.3274536,25.8157349,42.3274536
|
||||
M34.1607666,42.3274536h-1.6470337v-9.0119629h1.6470337V42.3274536z M40.5587769,42.4634399
|
||||
c-2.434021,0-3.7790527-1.9229736-3.7790527-4.6309814s1.3270264-4.6799927,3.7790527-4.6799927
|
||||
c2.506958,0,3.8199463,1.9719849,3.8199463,4.6799927S43.0377197,42.4634399,40.5587769,42.4634399"/>
|
||||
<polygon points="6.7034912,38.6351318 9.055481,38.6351318 7.8884888,34.7351685 "/>
|
||||
<path d="M25.585083,34.7817993h-0.8700562v6.0510254h0.8700562c1.8469849,0,2.6709595-1.1879883,2.6709595-3.0250244
|
||||
C28.2560425,35.9988403,27.4320679,34.7817993,25.585083,34.7817993"/>
|
||||
<path d="M40.5587769,34.6429443c-1.4580078,0-2.1360474,1.4020386-2.1360474,3.1890259
|
||||
c0,1.7659912,0.6950073,3.1619873,2.1700439,3.1619873c1.4909668,0,2.1459961-1.3959961,2.1459961-3.1619873
|
||||
C42.7387695,36.0449829,42.0497437,34.6429443,40.5587769,34.6429443"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<polygon id="SVGID_1_" points="0,0 0.2749939,0.2750244 48.1409912,0.2750244 48.4249878,0 "/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_2_">
|
||||
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-276.0588379" y1="452.5148621" x2="-275.0588074" y2="452.5148621" gradientTransform="matrix(48.4245529 -0.0025294 0.0025294 48.4245529 13366.8808594 -21913.3886719)">
|
||||
<stop offset="0" style="stop-color:#DDC77C"/>
|
||||
<stop offset="1" style="stop-color:#B4802C"/>
|
||||
</linearGradient>
|
||||
<rect x="-0.0000306" y="-0.0012512" class="st4" width="48.4249878" height="0.2774963"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<path id="SVGID_4_" d="M24.2139893,28.4770508c-8.0770264,0-15.7080078-1.9720459-22.4039917-5.4820557v0.6000366
|
||||
c6.6959839,3.507019,14.3269653,5.5,22.4039917,5.5c8.0830078,0,15.7030029-1.992981,22.3989868-5.5v-0.6000366
|
||||
C39.9169922,26.5050049,32.2969971,28.4770508,24.2139893,28.4770508"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_5_">
|
||||
<use xlink:href="#SVGID_4_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-276.4433289" y1="453.0949707" x2="-275.4433289" y2="453.0949707" gradientTransform="matrix(44.8038025 -0.0023356 0.0023356 44.8038025 12386.4638672 -20274.9785156)">
|
||||
<stop offset="0" style="stop-color:#472613"/>
|
||||
<stop offset="0.0408205" style="stop-color:#5C3A1A"/>
|
||||
<stop offset="0.0949331" style="stop-color:#704F21"/>
|
||||
<stop offset="0.1483985" style="stop-color:#7D5B25"/>
|
||||
<stop offset="0.2" style="stop-color:#815F26"/>
|
||||
<stop offset="0.2510605" style="stop-color:#8A6527"/>
|
||||
<stop offset="0.3343309" style="stop-color:#A2752A"/>
|
||||
<stop offset="0.438834" style="stop-color:#CA8F30"/>
|
||||
<stop offset="0.5" style="stop-color:#E4A133"/>
|
||||
<stop offset="0.5320022" style="stop-color:#E8A73C"/>
|
||||
<stop offset="0.584035" style="stop-color:#F4B754"/>
|
||||
<stop offset="0.6" style="stop-color:#F8BD5D"/>
|
||||
<stop offset="0.6378715" style="stop-color:#EFB659"/>
|
||||
<stop offset="0.6996277" style="stop-color:#D7A34E"/>
|
||||
<stop offset="0.777076" style="stop-color:#AF843B"/>
|
||||
<stop offset="0.85" style="stop-color:#846227"/>
|
||||
<stop offset="0.8968558" style="stop-color:#815E26"/>
|
||||
<stop offset="0.9453847" style="stop-color:#7A5123"/>
|
||||
<stop offset="0.9945391" style="stop-color:#6D3D1E"/>
|
||||
<stop offset="1" style="stop-color:#6B3A1D"/>
|
||||
</linearGradient>
|
||||
<rect x="1.8097992" y="22.993866" class="st5" width="44.803299" height="6.1023865"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<polygon id="SVGID_7_" points="0,0 0.0090027,48.4250488 48.4249878,48.4250488 48.4249878,0 "/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_8_">
|
||||
<use xlink:href="#SVGID_7_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="-266.1282043" y1="453.7897644" x2="-265.1282043" y2="453.7897644" gradientTransform="matrix(17.786274 38.1375618 -38.1375618 17.786274 22052.6953125 2078.0583496)">
|
||||
<stop offset="0" style="stop-color:#F9E1B4"/>
|
||||
<stop offset="0.2" style="stop-color:#FAD37E"/>
|
||||
<stop offset="0.6" style="stop-color:#F6A936"/>
|
||||
<stop offset="0.7426466" style="stop-color:#DF9430"/>
|
||||
<stop offset="0.8883532" style="stop-color:#CF852C"/>
|
||||
<stop offset="1" style="stop-color:#C9802A"/>
|
||||
</linearGradient>
|
||||
<polygon class="st6" points="-18.5495605,8.6509399 8.6509094,66.9746094 66.9744873,39.7741089 39.7739868,-18.5494995 "/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M41.7749634,14.1011963c-1.2600098-0.5539551-1.6170044-0.8739624-1.6170044-1.5819702
|
||||
c0-0.9199829,0.7649536-1.2579956,1.5019531-1.2579956c0.6420288,0,1.4120483,0.177002,2.06604,0.4309692l0.401001-1.6709595
|
||||
c-0.6900024-0.3010254-1.5610352-0.4840088-2.5370483-0.4840088c-1.6729736,0-3.4299927,0.9379883-3.4299927,3.0750122
|
||||
c0,1.5319824,0.94104,2.3599854,2.5840454,3.0949707c1.2630005,0.5690308,1.7909546,1.007019,1.7909546,1.809021
|
||||
c0,0.8930054-0.6679688,1.2359619-1.5539551,1.2359619c-0.7740479,0-1.6670532-0.1799927-2.5310059-0.5459595l-0.3920288,1.7160034
|
||||
c0.8710327,0.3460083,1.9949951,0.5509644,2.9230347,0.5509644c1.6900024,0,3.5479736-0.8009644,3.5479736-3.0709839
|
||||
C44.5289307,15.6342163,43.4369507,14.8822021,41.7749634,14.1011963"/>
|
||||
<path d="M33.770813,9.5367432c-2.6090088,0-3.9619751,2.4330444-3.9619751,5.5050049
|
||||
c0,3.1640015,1.5310059,5.4320068,4.5939941,5.4320068c0.8619995,0,1.6459961-0.1589966,2.1539917-0.3659668l-0.242981-1.651001
|
||||
c-0.5709839,0.2059937-1.1790161,0.2959595-1.809021,0.2959595c-1.6209717,0-2.6350098-1.0749512-2.7449951-3.09198h5.572998
|
||||
v-0.8709717C37.3328247,11.6497803,36.3718262,9.5367432,33.770813,9.5367432 M35.4588623,14.0057373h-3.6990356
|
||||
c0.1359863-1.5789795,0.7160034-2.8409424,1.9920044-2.8409424c1.1779785,0,1.7070313,1.1709595,1.7070313,2.7529907V14.0057373z"
|
||||
/>
|
||||
<path d="M26.9251709,13.7351685v-0.026001c1.157959-0.4550171,1.8460083-1.559021,1.8460083-3.1409912
|
||||
c0-2.6340332-1.5890503-3.6229858-3.4370117-3.6229858l-3.848999,0.0229492v13.4620361h1.8460083v-5.7349854h1.1459961
|
||||
c1.3859863,0,1.7039795,0.4609985,2.0369873,2.0199585c0.1950073,0.8699951,0.5529785,2.6799927,0.7420044,3.7150269h2.0219727
|
||||
c-0.3410034-1.4700317-0.617981-2.7520142-0.9389648-4.197998C27.9751587,14.6031494,27.663147,14.0061646,26.9251709,13.7351685
|
||||
M24.8101807,12.8851318h-1.4790039V8.736145h1.5379639c1.0050049,0,2.0250244,0.342041,2.0250244,2.0629883
|
||||
C26.894165,12.335144,26.0111694,12.8851318,24.8101807,12.8851318"/>
|
||||
<rect x="17.7680054" y="12.6350098" width="2.1149902" height="2.0369873"/>
|
||||
<rect x="14.2819824" y="6.9680176" width="1.8839722" height="1.9249878"/>
|
||||
<rect x="14.2730103" y="10.7529907" width="1.8770142" height="9.677002"/>
|
||||
<polygon points="10.364502,12.6348267 6.1434937,12.6348267 6.1434937,6.9678345 4.2354736,6.9678345 4.2354736,20.4308472
|
||||
6.1434937,20.4308472 6.1434937,14.4208374 10.364502,14.4208374 10.364502,20.4308472 12.2524414,20.4308472
|
||||
12.2524414,6.9678345 10.364502,6.9678345 "/>
|
||||
<path d="M24.2147217,29.095459c-8.0780029,0-15.7089539-1.992981-22.4049683-5.5v23.0170288l44.8029785-0.0250244V23.595459
|
||||
C39.916748,27.102478,32.2977295,29.095459,24.2147217,29.095459 M10.17276,42.3274536l-0.7160034-2.2049561H6.3267517
|
||||
l-0.7089844,2.2049561H3.8527527l2.9330139-9.0119629h2.269989l2.9139709,9.0119629H10.17276z M20.2657471,39.6624756
|
||||
c0,1.8380127-1.3859863,2.8259888-3.2579956,2.8259888c-1.8430176,0-3.2410278-0.9879761-3.2410278-2.8259888v-6.3469849h1.6660156
|
||||
V39.4375c0,1.1029663,0.6610107,1.5559692,1.565979,1.5559692c0.9050293,0,1.6060181-0.4810181,1.6060181-1.5559692v-6.1220093
|
||||
h1.6610107V39.6624756z M25.8157349,42.3274536h-2.7529907v-9.0119629h2.7529907
|
||||
c2.6600342,0,4.1010132,1.697998,4.1010132,4.4679565C29.916748,40.5614624,28.475769,42.3274536,25.8157349,42.3274536
|
||||
M34.1607666,42.3274536h-1.6470337v-9.0119629h1.6470337V42.3274536z M40.5587769,42.4634399
|
||||
c-2.434021,0-3.7790527-1.9229736-3.7790527-4.6309814s1.3270264-4.6799927,3.7790527-4.6799927
|
||||
c2.506958,0,3.8199463,1.9719849,3.8199463,4.6799927S43.0377197,42.4634399,40.5587769,42.4634399"/>
|
||||
<polygon points="6.7034912,38.6351318 9.055481,38.6351318 7.8884888,34.7351685 "/>
|
||||
<path d="M25.585083,34.7817993h-0.8700562v6.0510254h0.8700562c1.8469849,0,2.6709595-1.1879883,2.6709595-3.0250244
|
||||
C28.2560425,35.9988403,27.4320679,34.7817993,25.585083,34.7817993"/>
|
||||
<path d="M40.5587769,34.6429443c-1.4580078,0-2.1360474,1.4020386-2.1360474,3.1890259
|
||||
c0,1.7659912,0.6950073,3.1619873,2.1700439,3.1619873c1.4909668,0,2.1459961-1.3959961,2.1459961-3.1619873
|
||||
C42.7387695,36.0449829,42.0497437,34.6429443,40.5587769,34.6429443"/>
|
||||
<polygon class="st7" points="0.2755737,48.12854 0.009552,48.4255981 48.4245605,48.4255981 48.147522,48.12854 "/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<polygon id="SVGID_10_" points="48.1409912,0.2750244 48.1439819,23.2990112 48.1480103,48.1280518 48.4249878,48.4250488
|
||||
48.4249878,0 "/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_11_">
|
||||
<use xlink:href="#SVGID_10_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="-278.4791565" y1="450.0944519" x2="-277.4791565" y2="450.0944519" gradientTransform="matrix(-0.0025294 -48.4249802 -48.4249802 0.0025294 21843.3945313 -13438.0615234)">
|
||||
<stop offset="0" style="stop-color:#815F26"/>
|
||||
<stop offset="0.5941817" style="stop-color:#836128"/>
|
||||
<stop offset="0.8079586" style="stop-color:#89682E"/>
|
||||
<stop offset="0.9600694" style="stop-color:#947338"/>
|
||||
<stop offset="1" style="stop-color:#98783C"/>
|
||||
</linearGradient>
|
||||
<rect x="48.1397095" y="-0.0000306" class="st8" width="0.2865295" height="48.4250793"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<polygon id="SVGID_13_" points="0.0090027,48.4250488 0.2749939,48.1280518 0.2749939,0.2750244 0,0 "/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_14_">
|
||||
<use xlink:href="#SVGID_13_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="-264.122467" y1="450.0944519" x2="-263.122467" y2="450.0944519" gradientTransform="matrix(0.0025295 48.4249763 -48.4249763 0.0025295 21796.6171875 12788.9853516)">
|
||||
<stop offset="0" style="stop-color:#CFAD75"/>
|
||||
<stop offset="1" style="stop-color:#816328"/>
|
||||
</linearGradient>
|
||||
<rect x="-0.001297" y="0" class="st9" width="0.2775269" height="48.4250488"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<polygon id="SVGID_16_" points="0,0 0.2749939,0.2750244 48.1409912,0.2750244 48.4249878,0 "/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_17_">
|
||||
<use xlink:href="#SVGID_16_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="-276.0588379" y1="452.5148621" x2="-275.0588074" y2="452.5148621" gradientTransform="matrix(48.4245529 -0.0025294 0.0025294 48.4245529 13366.8808594 -21913.3886719)">
|
||||
<stop offset="0" style="stop-color:#DDC77C"/>
|
||||
<stop offset="1" style="stop-color:#B4802C"/>
|
||||
</linearGradient>
|
||||
<rect x="-0.0000306" y="-0.0012512" class="st10" width="48.4249878" height="0.2774963"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<path id="SVGID_19_" d="M24.2139893,28.4770508c-8.0770264,0-15.7080078-1.9720459-22.4039917-5.4820557v0.6000366
|
||||
c6.6959839,3.507019,14.3269653,5.5,22.4039917,5.5c8.0830078,0,15.7030029-1.992981,22.3989868-5.5v-0.6000366
|
||||
C39.9169922,26.5050049,32.2969971,28.4770508,24.2139893,28.4770508"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_20_">
|
||||
<use xlink:href="#SVGID_19_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="-276.4433289" y1="453.0949707" x2="-275.4433289" y2="453.0949707" gradientTransform="matrix(44.8038025 -0.0023356 0.0023356 44.8038025 12386.4638672 -20274.9785156)">
|
||||
<stop offset="0" style="stop-color:#472613"/>
|
||||
<stop offset="0.0408205" style="stop-color:#5C3A1A"/>
|
||||
<stop offset="0.0949331" style="stop-color:#704F21"/>
|
||||
<stop offset="0.1483985" style="stop-color:#7D5B25"/>
|
||||
<stop offset="0.2" style="stop-color:#815F26"/>
|
||||
<stop offset="0.2510605" style="stop-color:#8A6527"/>
|
||||
<stop offset="0.3343309" style="stop-color:#A2752A"/>
|
||||
<stop offset="0.438834" style="stop-color:#CA8F30"/>
|
||||
<stop offset="0.5" style="stop-color:#E4A133"/>
|
||||
<stop offset="0.5320022" style="stop-color:#E8A73C"/>
|
||||
<stop offset="0.584035" style="stop-color:#F4B754"/>
|
||||
<stop offset="0.6" style="stop-color:#F8BD5D"/>
|
||||
<stop offset="0.6378715" style="stop-color:#EFB659"/>
|
||||
<stop offset="0.6996277" style="stop-color:#D7A34E"/>
|
||||
<stop offset="0.777076" style="stop-color:#AF843B"/>
|
||||
<stop offset="0.85" style="stop-color:#846227"/>
|
||||
<stop offset="0.8968558" style="stop-color:#815E26"/>
|
||||
<stop offset="0.9453847" style="stop-color:#7A5123"/>
|
||||
<stop offset="0.9945391" style="stop-color:#6D3D1E"/>
|
||||
<stop offset="1" style="stop-color:#6B3A1D"/>
|
||||
</linearGradient>
|
||||
<rect x="1.8097992" y="22.993866" class="st11" width="44.803299" height="6.1023865"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 20 KiB |
@@ -1,10 +1,9 @@
|
||||
// Album card for the Discover sections.
|
||||
//
|
||||
// Mirrors the Svelte AlbumCardLite: 220px column, square artwork with a
|
||||
// bottom-left award ribbon, single-line title, artist, and a compact
|
||||
// quality badge. Artwork image loading lands in the artwork-pipeline
|
||||
// increment; for now the artwork area is the same elevated placeholder
|
||||
// the real card shows before its image resolves.
|
||||
// Mirrors the Svelte AlbumCardLite: 220px column, 220px square artwork
|
||||
// with a bottom-left award ribbon, then a tight title / artist stack
|
||||
// alongside an icon-only quality badge. Deterministic height (274px) so
|
||||
// the section row never scrolls vertically.
|
||||
|
||||
import { Theme } from "../foundation/semantic-colors.slint";
|
||||
import { Typography } from "../foundation/typography.slint";
|
||||
@@ -16,10 +15,11 @@ export component AlbumCard inherits Rectangle {
|
||||
in property <AlbumCardItem> album;
|
||||
|
||||
width: 220px;
|
||||
height: 282px;
|
||||
height: 274px;
|
||||
|
||||
VerticalLayout {
|
||||
spacing: Spacing.xs;
|
||||
alignment: start;
|
||||
spacing: 0px;
|
||||
|
||||
// --- Artwork ------------------------------------------------------
|
||||
Rectangle {
|
||||
@@ -73,41 +73,57 @@ export component AlbumCard inherits Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
// --- Title --------------------------------------------------------
|
||||
Text {
|
||||
text: root.album.title;
|
||||
color: Theme.text-primary;
|
||||
font-size: Typography.body;
|
||||
font-weight: Typography.medium;
|
||||
overflow: elide;
|
||||
}
|
||||
Rectangle { height: 8px; }
|
||||
|
||||
// --- Artist + quality --------------------------------------------
|
||||
// --- Title / artist + quality badge ------------------------------
|
||||
HorizontalLayout {
|
||||
height: 46px;
|
||||
spacing: Spacing.sm;
|
||||
|
||||
Text {
|
||||
text: root.album.artist;
|
||||
color: Theme.text-muted;
|
||||
font-size: Typography.link;
|
||||
vertical-alignment: center;
|
||||
overflow: elide;
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
spacing: 2px;
|
||||
horizontal-stretch: 1;
|
||||
|
||||
Text {
|
||||
text: root.album.title;
|
||||
color: Theme.text-primary;
|
||||
font-size: Typography.body;
|
||||
font-weight: Typography.medium;
|
||||
overflow: elide;
|
||||
}
|
||||
Text {
|
||||
text: root.album.artist;
|
||||
color: Theme.text-muted;
|
||||
font-size: Typography.link;
|
||||
overflow: elide;
|
||||
}
|
||||
}
|
||||
|
||||
if root.album.quality != "": Rectangle {
|
||||
background: Theme.surface-elevated;
|
||||
border-radius: 3px;
|
||||
HorizontalLayout {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
Text {
|
||||
text: root.album.quality;
|
||||
color: Theme.text-secondary;
|
||||
font-size: 9px;
|
||||
vertical-alignment: center;
|
||||
// Icon-only quality badge.
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
|
||||
if root.album.quality-tier == "hires": Image {
|
||||
source: @image-url("../assets/hi-res.svg");
|
||||
width: 42px;
|
||||
height: 28px;
|
||||
image-fit: contain;
|
||||
}
|
||||
if root.album.quality-tier == "cd": Rectangle {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 3px;
|
||||
background: Theme.surface-elevated;
|
||||
border-width: 1px;
|
||||
border-color: Theme.border-subtle;
|
||||
Image {
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
source: @image-url("../assets/cd.svg");
|
||||
image-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,14 +49,6 @@ export component HomeView inherits Rectangle {
|
||||
spacing: 28px;
|
||||
alignment: start;
|
||||
|
||||
Text {
|
||||
text: HomeState.greeting;
|
||||
visible: HomeState.greeting != "";
|
||||
color: Theme.text-primary;
|
||||
font-size: 26px;
|
||||
font-weight: Typography.semibold;
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
alignment: start;
|
||||
Rectangle {
|
||||
|
||||
@@ -22,8 +22,11 @@ export component SectionRow inherits VerticalLayout {
|
||||
font-weight: Typography.semibold;
|
||||
}
|
||||
|
||||
// Fixed to the AlbumCard height with vertical scrolling disabled, so
|
||||
// the row never grows an internal vertical scrollbar.
|
||||
ScrollView {
|
||||
height: 290px;
|
||||
height: 274px;
|
||||
vertical-scrollbar-policy: ScrollBarPolicy.always-off;
|
||||
HorizontalLayout {
|
||||
spacing: 32px;
|
||||
for album in root.section.albums: AlbumCard {
|
||||
|
||||
@@ -7,7 +7,7 @@ export struct AlbumCardItem {
|
||||
id: string,
|
||||
title: string,
|
||||
artist: string,
|
||||
quality: string,
|
||||
quality-tier: string, // "hires" | "cd" | "" — drives the badge icon
|
||||
ribbon: string,
|
||||
ribbon-kind: string, // "press" | "qobuzissime" | "albumOfTheWeek" | ""
|
||||
artwork-url: string,
|
||||
@@ -21,7 +21,6 @@ export struct DiscoverSection {
|
||||
|
||||
// Discover / Home screen state.
|
||||
export global HomeState {
|
||||
in property <string> greeting: "";
|
||||
in property <[DiscoverSection]> sections: [];
|
||||
in property <bool> loading: false;
|
||||
}
|
||||
Reference in new issue
Block a user