first attempt at implementing grid-view style for modern theme

This commit is contained in:
Sophia Hadash 2021-09-02 01:36:30 +02:00
parent 1b57ac69b8
commit 63467455c1
7 changed files with 215 additions and 79 deletions

View file

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 258 258" width="258" height="258"><defs><clipPath id="_clipPath_9Fbs7pfS4tYHQ4Vamu0PmJrhfsMHsdUH"><rect width="258" height="258"/></clipPath></defs><g clip-path="url(#_clipPath_9Fbs7pfS4tYHQ4Vamu0PmJrhfsMHsdUH)"><path d=" M 16.6 129 C 16.6 66.91 67.01 16.5 129.1 16.5 C 191.19 16.5 241.6 66.91 241.6 129 C 241.6 191.09 191.19 241.5 129.1 241.5 C 67.01 241.5 16.6 191.09 16.6 129 Z " fill="rgb(235,235,235)"/><path d=" M 165.594 192.034 L 136.575 176.779 C 132.45 174.609 125.75 174.609 121.625 176.779 L 92.606 192.034 C 88.481 194.203 85.772 192.235 86.56 187.641 L 92.102 155.328 C 92.89 150.735 90.82 144.364 87.482 141.111 L 64.006 118.227 C 60.668 114.974 61.703 111.789 66.315 111.118 L 98.759 106.403 C 103.371 105.734 108.791 101.796 110.854 97.617 L 125.363 68.218 C 127.425 64.039 130.775 64.039 132.837 68.218 L 147.346 97.617 C 149.409 101.796 154.829 105.734 159.441 106.403 L 191.885 111.118 C 196.497 111.789 197.532 114.974 194.194 118.227 L 170.718 141.111 C 167.38 144.364 165.31 150.735 166.098 155.328 L 171.64 187.641 C 172.428 192.235 169.719 194.203 165.594 192.034 Z " fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(233,153,16)" stroke-opacity="100" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/></g></svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 719 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path fill="#d6d6d6" stroke="none"
d="M 30.335938 12.546875 L 20.164063 11.472656 L 16 2.132813 L 11.835938 11.472656 L 1.664063 12.546875 L 9.261719 19.394531 L 7.140625 29.398438 L 16 24.289063 L 24.859375 29.398438 L 22.738281 19.394531 Z"/>
</svg>

After

Width:  |  Height:  |  Size: 326 B

View file

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 258 258" width="258" height="258"><defs><clipPath id="_clipPath_h49qSya0UtYpDJtslSeXteNf8XlkI2gr"><rect width="258" height="258"/></clipPath></defs><g clip-path="url(#_clipPath_h49qSya0UtYpDJtslSeXteNf8XlkI2gr)"><path d=" M 16.6 129.1 C 16.6 67.01 67.01 16.6 129.1 16.6 C 191.19 16.6 241.6 67.01 241.6 129.1 C 241.6 191.19 191.19 241.6 129.1 241.6 C 67.01 241.6 16.6 191.19 16.6 129.1 Z " fill="rgb(235,235,235)"/><path d=" M 165.594 192.134 L 136.575 176.879 C 132.45 174.709 125.75 174.709 121.625 176.879 L 92.606 192.134 C 88.481 194.303 85.772 192.335 86.56 187.741 L 92.102 155.428 C 92.89 150.835 90.82 144.464 87.482 141.211 L 64.006 118.327 C 60.668 115.074 61.703 111.889 66.315 111.218 L 98.759 106.503 C 103.371 105.834 108.791 101.896 110.854 97.717 L 125.363 68.318 C 127.425 64.139 130.775 64.139 132.837 68.318 L 147.346 97.717 C 149.409 101.896 154.829 105.834 159.441 106.503 L 191.885 111.218 C 196.497 111.889 197.532 115.074 194.194 118.327 L 170.718 141.211 C 167.38 144.464 165.31 150.835 166.098 155.428 L 171.64 187.741 C 172.428 192.335 169.719 194.303 165.594 192.134 Z " fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(101,111,110)" stroke-opacity="100" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/></g></svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path fill="#506ad4" stroke="none"
d="M 30.335938 12.546875 L 20.164063 11.472656 L 16 2.132813 L 11.835938 11.472656 L 1.664063 12.546875 L 9.261719 19.394531 L 7.140625 29.398438 L 16 24.289063 L 24.859375 29.398438 L 22.738281 19.394531 Z"/>
</svg>

After

Width:  |  Height:  |  Size: 326 B

View file

@ -8,50 +8,47 @@ based on: Switch Theme for Launchbox by Grila
-->
<theme>
<formatVersion>4</formatVersion>
<!-- Color Variables -->
<formatVersion>7</formatVersion>
<!-- Color Variables -->
<variables>
<backgroundColor>d9d9d9</backgroundColor>
<backgroundColor2>e2e2e2</backgroundColor2>
<mainColor>334ff0</mainColor>
<secondaryColor>222222</secondaryColor>
<systemColor>3aa5ab</systemColor>
</variables>
<view name="system">
<!-- system specific styles -->
<view name="system">
<text name="system_name_1" extra="true">
<color>${systemColor}</color>
</text>
<image name="arrowblock" extra="true">
<color>${systemColor}</color>
</image>
</view>
<view name="system, basic, detailed, video">
<!-- generic styles -->
<view name="system, basic, detailed, video, grid">
<helpsystem name="help">
<textColor>22222200</textColor>
<iconColor>222222ff</iconColor>
<textColor>222222ff</textColor>
<iconColorDimmed>222222ff</iconColorDimmed>
<textColorDimmed>222222ff</textColorDimmed>
</helpsystem>
<image name="background">
<color>${backgroundColor}</color>
</image>
<image name="topline, bottomline" extra="true">
<color>${secondaryColor}</color>
</image>
<image name="gamelistbuttons, systembuttons" extra="true">
<color>${secondaryColor}</color>
</image>
<rating name="md_rating">
<unfilledPath>./assets/light/star-unfilled.svg</unfilledPath>
</rating>
</view>
<view name="detailed, video">
@ -78,30 +75,40 @@ based on: Switch Theme for Launchbox by Grila
<text name="system_name_1" extra="true">
<color>${secondaryColor}</color>
</text>
</text>
</view>
<view name="basic">
<textlist name="gamelist">
<selectedColor>${mainColor}</selectedColor>
<primaryColor>${secondaryColor}</primaryColor>
<secondaryColor>${secondaryColor}</secondaryColor>
<selectorColor>00000000</selectorColor>
</textlist>
</textlist>
</view>
<feature supported="carousel">
<view name="system">
<view name="grid">
<image name="md_background" extra="true">
<color>${backgroundColor2}</color>
</image>
<image name="md_background_grad_top" extra="true">
<path>./assets/light/gradient.png</path>
</image>
<image name="md_background_grad_bottom" extra="true">
<path>./assets/light/gradient.png</path>
</image>
</view>
<text name="systemInfo">
<color>${systemColor}</color>
</text>
<feature supported="carousel">
</view>
<view name="system">
<text name="systemInfo">
<color>${systemColor}</color>
</text>
</view>
</feature>

View file

@ -17,16 +17,15 @@ based on: Switch Theme by Lilbud
<include>./settings/light.xml</include>
<variables>
<mainFont>./assets/Oxygen-Regular.ttf</mainFont>
<mainFont>./assets/fonts/nswitchui.ttf</mainFont>
</variables>
<include>./navigationsounds.xml</include>
<!-- system specific styles -->
<view name="system">
<image name="logo">
<path>./art/${system.theme}.jpg</path>
</image>
<text name="system_name_1" extra="true">
<text>${system.fullName}</text>
<forceUppercase>0</forceUppercase>
@ -37,30 +36,25 @@ based on: Switch Theme by Lilbud
<alignment>left</alignment>
<fontPath>${mainFont}</fontPath>
</text>
<image name="arrowblock" extra="true">
<pos>0.03 0.22</pos>
<path>./assets/arrow_block.svg</path>
</image>
</image>
</view>
<view name="system, basic, detailed, video">
<!-- generic styles -->
<view name="system, basic, detailed, video, grid">
<helpsystem name="help">
<pos>0.96 0.935</pos>
<origin>1 0</origin>
<fontPath>./assets/fonts/nswitchui.ttf</fontPath>
<fontSize>0.035f</fontSize>
<entrySpacing>16</entrySpacing>
<iconTextSpacing>8</iconTextSpacing>
<entrySpacing>48</entrySpacing>
<iconTextSpacing>12</iconTextSpacing>
<textStyle>camelcase</textStyle>
<iconColor>0000ffff</iconColor>
<iconColorDimmed>ff0000ff</iconColorDimmed>
<textColorDimmed>00ff00ff</textColorDimmed>
<customButtonIcon button="button_start_XBOX360">:/help/button_start_SNES.svg</customButtonIcon>
<customButtonIcon button="button_back_XBOX360">:/help/button_back_SNES.svg</customButtonIcon>
</helpsystem>
<image name="background" extra="true">
<pos>0 0</pos>
<tile>true</tile>
@ -69,7 +63,6 @@ based on: Switch Theme by Lilbud
<path>./assets/box.png</path>
<zIndex>-100</zIndex>
</image>
<image name="bottomline" extra="true">
<pos>0.5 0.9</pos>
<tile>false</tile>
@ -77,18 +70,19 @@ based on: Switch Theme by Lilbud
<size>0.938 0.001</size>
<path>./assets/box.png</path>
</image>
<rating name="md_rating">
<filledPath>./assets/star-filled.svg</filledPath>
<unfilledPath>./assets/light/star-unfilled.svg</unfilledPath>
</rating>
</view>
<view name="basic, detailed, video">
<textlist name="gamelist">
<fontPath>${mainFont}</fontPath>
<fontSize>0.028</fontSize>
<horizontalMargin>0.01</horizontalMargin>
<lineSpacing>2.3</lineSpacing>
</textlist>
</textlist>
<text name="system_name_1" extra="true">
<text>${system.fullName}</text>
<forceUppercase>0</forceUppercase>
@ -98,13 +92,11 @@ based on: Switch Theme by Lilbud
<alignment>left</alignment>
<fontPath>${mainFont}</fontPath>
</text>
<image name="logo">
<color>00000000</color>
<path>./assets/box.png</path>
<pos>1 1</pos>
</image>
<image name="topline" extra="true">
<pos>0.5 0.13</pos>
<tile>false</tile>
@ -112,27 +104,22 @@ based on: Switch Theme by Lilbud
<size>0.938 0.001</size>
<path>./assets/box.png</path>
</image>
<text name="md_lbl_releasedate, md_lbl_developer, md_lbl_genre, md_lbl_players, md_lbl_lastplayed, md_lbl_playcount, md_developer, md_genre, md_players, md_playcount, md_releasedate, md_description" extra="true">
<forceUppercase>0</forceUppercase>
<fontSize>0.028</fontSize>
<fontPath>${mainFont}</fontPath>
</text>
<datetime name="md_releasedate">
<forceUppercase>0</forceUppercase>
<fontPath>${mainFont}</fontPath>
<fontSize>0.028</fontSize>
</datetime>
<text name="md_lbl_lastplayed, md_lbl_publisher, md_publsher, md_lbl_rating, md_lbl_playcount, md_playcount">
<pos>1 1</pos>
</text>
</view>
<view name="detailed, video">
<textlist name="gamelist">
<pos>0.04 0.182</pos>
<size>0.31 0.682</size>
@ -140,55 +127,191 @@ based on: Switch Theme by Lilbud
<selectorImagePath>./assets/selector.png</selectorImagePath>
<selectorHeight>0.06</selectorHeight>
<selectorOffsetY>-0.008</selectorOffsetY>
</textlist>
</textlist>
<text name="md_description">
<forceUppercase>0</forceUppercase>
<fontSize>0.025</fontSize>
<size>0.309 0.336</size>
<pos>0.657 0.387</pos>
</text>
<rating name="md_rating">
<pos>0.657 0.747</pos>
<size>0.27 0</size>
</rating>
<image name="md_broken">
<pos>0.966 0.240</pos>
<maxSize>0.05 0.05</maxSize>
<origin>1 1</origin>
</image>
</view>
<view name="basic">
<textlist name="gamelist">
<pos>0.04 0.182</pos>
<size>0.924 0.682</size>
<alignment>center</alignment>
</textlist>
</textlist>
</view>
<view name="detailed">
<image name="md_image">
<pos>0.360 0.180</pos>
<maxSize>0.277 0.615</maxSize>
<origin>0 0</origin>
</image>
</view>
<feature supported="carousel">
<view name="system">
<carousel name="systemcarousel">
<type>horizontal</type>
<pos>0 0.3</pos>
<size>1 .4</size>
<color>00000000</color>
<view name="grid">
<text name="system_name_1" extra="true">
<text>${system.fullName}</text>
<forceUppercase>0</forceUppercase>
<size>0.743 0.031</size>
<pos>0.034 0.065</pos>
<fontSize>0.03</fontSize>
<alignment>left</alignment>
<fontPath>${mainFont}</fontPath>
</text>
<image name="logo">
<color>00000000</color>
<path>./assets/box.png</path>
<pos>1 1</pos>
</image>
<image name="topline" extra="true">
<pos>0.5 0.13</pos>
<tile>false</tile>
<origin>0.5 0.5</origin>
<size>0.938 0.001</size>
<path>./assets/box.png</path>
</image>
<!-- games panel -->
<imagegrid name="gamegrid">
<pos>0.06 0.218</pos>
<size>0.63 594</size>
<margin>0.006 0.006</margin>
<padding>0 0</padding>
<autoLayoutSelectedZoom>1</autoLayoutSelectedZoom>
<imageSource>screenshot</imageSource>
</imagegrid>
<gridtile name="default">
<size>0.205 0.250</size>
<padding>8 8</padding>
<backgroundCornerSize>1 1</backgroundCornerSize>
<backgroundColor>00000000</backgroundColor>
</gridtile>
<gridtile name="selected">
<size>0.205 0.250</size>
<padding>8 8</padding>
<backgroundCornerSize>8 8</backgroundCornerSize>
<backgroundCenterColor>23caca</backgroundCenterColor>
<backgroundEdgeColor>23caca</backgroundEdgeColor>
</gridtile>
<!-- metadata panel (right) -->
<image name="md_background" extra="true">
<pos>0.725 0.20</pos>
<tile>false</tile>
<origin>0 0</origin>
<size>0.275 0.63</size>
<path>./assets/box.png</path>
</image>
<image name="md_background_grad_top" extra="true">
<pos>0.725 0.131</pos>
<tile>false</tile>
<origin>0 0</origin>
<size>0.275 0.07</size>
<rotation>180</rotation>
<path>./assets/light/gradient.png</path>
</image>
<image name="md_background_grad_bottom" extra="true">
<pos>0.725 0.83</pos>
<tile>false</tile>
<origin>0 0</origin>
<size>0.275 0.07</size>
<path>./assets/light/gradient.png</path>
</image>
<text name="md_description">
<lineSpacing>1.2</lineSpacing>
<pos>0.75 0.21</pos>
<size>0.219 0.275</size>
<fontSize>0.03</fontSize>
</text>
<text name="md_lbl_publisher">
<pos>0.75 0.532</pos>
<size>0.10625 0.02</size>
<fontSize>0.02</fontSize>
</text>
<text name="md_publisher">
<pos>0.75 0.552</pos>
<size>0.10625 0.03</size>
<fontSize>0.03</fontSize>
</text>
<text name="md_lbl_developer">
<pos>0.8578 0.532</pos>
<size>0.10625 0.02</size>
<fontSize>0.02</fontSize>
</text>
<text name="md_developer">
<pos>0.8578 0.552</pos>
<size>0.10625 0.03</size>
<fontSize>0.03</fontSize>
</text>
<text name="md_lbl_releasedate">
<pos>0.75 0.608</pos>
<size>0.10625 0.02</size>
<fontSize>0.02</fontSize>
</text>
<datetime name="md_releasedate">
<pos>0.75 0.628</pos>
<size>0.10625 0.03</size>
<fontSize>0.03</fontSize>
</datetime>
<text name="md_lbl_players">
<pos>0.8578 0.608</pos>
<size>0.10625 0.02</size>
<fontSize>0.02</fontSize>
</text>
<text name="md_players">
<pos>0.8578 0.628</pos>
<size>0.10625 0.03</size>
<fontSize>0.03</fontSize>
</text>
<text name="md_lbl_genre">
<pos>0.75 0.684</pos>
<size>0.10625 0.02</size>
<fontSize>0.02</fontSize>
</text>
<text name="md_genre">
<pos>0.75 0.704</pos>
<size>0.10625 0.03</size>
<fontSize>0.03</fontSize>
</text>
<text name="md_lbl_rating">
<pos>0.75 0.760</pos>
<size>0.10625 0.02</size>
<fontSize>0.02</fontSize>
</text>
<rating name="md_rating">
<pos>0.75 0.780</pos>
<size>0.04 0.03</size>
</rating>
<text name="md_lbl_lastplayed, md_lbl_playcount">
<pos>1 1</pos>
</text>
<datetime name="md_lastplayed, md_playcount">
<pos>1 1</pos>
</datetime>
</view>
<feature supported="carousel">
<view name="system">
<carousel name="systemcarousel">
<type>horizontal</type>
<pos>0 0.3</pos>
<size>1 .4</size>
<color>00000000</color>
<logoScale>1</logoScale>
<logoSize>0.234 0.397</logoSize>
<maxLogoCount>3.5</maxLogoCount>