hide runtime for tvshows, update settings style (#112)

* skip settings menu animation

* hide runtime for non-movies on media bar

* change settings style, update translation of elements

Author: harleykradovill

components/home/MediaBar.bs

@@ -292,7 +292,7 @@ function processItem(item as object) as object
         if displayGenres.count() > 3
             displayGenres = [displayGenres[0], displayGenres[1], displayGenres[2]]
         end if
-        processed.genresDisplay = displayGenres.join(" • ")
+        processed.genresDisplay = displayGenres.join("  •  ")
     end if
 
     return processed
@@ -482,11 +482,14 @@ sub showMediaBarItem(index as integer)
         end if
     end if
 
-    if item.runtimeDisplay <> ""
+    if item.itemType = "Movie" and item.runtimeDisplay <> ""
         m.runtimeLabel.text = item.runtimeDisplay
+        m.separatorDot3.text = "  •  "
         hasRuntime = true
     else
         m.runtimeLabel.text = ""
+        m.separatorDot3.text = ""
+        hasRuntime = false
     end if
 
     ' Community rating with star
@@ -501,7 +504,7 @@ sub showMediaBarItem(index as integer)
 
     ' Show/hide separator dots based on what metadata exists
     m.separatorDot1.visible = (hasYear and hasRating)
-    m.separatorDot2.visible = (hasRating and hasRuntime)
+    m.separatorDot2.visible = (hasRating)
     m.separatorDot3.visible = (hasRuntime and hasStarRating)
 
     pluginRatingsEnabled = moonfinPlugin.IsRatingsEnabled()

components/home/MediaBar.xml

@@ -59,14 +59,13 @@
             <LayoutGroup
                 id="metadataRow"
                 layoutDirection="horiz"
-                itemSpacings="[18]"
             >
                 <Label id="yearLabel" font="font:SmallestBoldSystemFont" color="0xFFFFFFFF" text="" />
                 <Label
                     id="separatorDot1"
-                    font="font:SmallSystemFont"
+                    font="font:SmallestSystemFont"
                     color="0xFFFFFFFF"
-                    text="•"
+                    text="  •  "
                     visible="false"
                 />
                 <Group id="ratingGroup">
@@ -75,26 +74,26 @@
                 </Group>
                 <Label
                     id="separatorDot2"
-                    font="font:SmallSystemFont"
+                    font="font:SmallestSystemFont"
                     color="0xFFFFFFFF"
-                    text="•"
+                    text="  •  "
                     visible="false"
                 />
                 <Label id="runtimeLabel" font="font:SmallestBoldSystemFont" color="0xFFFFFFFF" text="" />
                 <Label
                     id="separatorDot3"
-                    font="font:SmallSystemFont"
+                    font="font:SmallestSystemFont"
                     color="0xFFFFFFFF"
-                    text="•"
+                    text="•  "
                     visible="false"
                 />
-                <Label id="starLabel" font="font:SmallestBoldSystemFont" color="0xFFD700FF" text="★" visible="false" />
+                <Label id="starLabel" font="font:SmallestBoldSystemFont" color="0xFFD700FF" text="★ " visible="false" />
                 <Label id="communityRatingLabel" font="font:SmallestBoldSystemFont" color="0xFFFFFFFF" text="" />
                 <Label
                     id="separatorDot4"
-                    font="font:SmallSystemFont"
+                    font="font:SmallestSystemFont"
                     color="0xFFFFFFFF"
-                    text="•"
+                    text="  •  "
                     visible="false"
                 />
                 <Label id="genresLabel" font="font:SmallestBoldSystemFont" color="0xFFFFFFFF" text="" />

components/settings/SettingsMenuItem.bs

@@ -51,7 +51,7 @@ sub focusChanged()
         stopMarquee(m.settingTitle)
         stopMarquee(m.settingCurrentValue)
         stopMarquee(m.settingDescription)
-        m.buttonBackground.blendColor = ColorPalette.ELEMENTBACKGROUND
+        m.buttonBackground.blendColor = "#181818FF"
         m.focusOutline.visible = false
         m.settingTitle.color = ColorPalette.WHITE
         m.settingCurrentValue.color = focusColor

components/settings/settings.xml

@@ -7,25 +7,26 @@
   <children>
 
     <Rectangle id="panelBackdrop" translation="[0, 0]" width="1920" height="1080" color="#000000" opacity="0.70" />
-    <Rectangle id="panelBackground" translation="[1120, 0]" width="800" height="1080" color="#101826" />
+    <Rectangle id="panelBackground" translation="[1120, 0]" width="800" height="1080" color="#101010" />
 
-    <Text id="path" translation="[1140, 160]" font="font:SmallestBoldSystemFont" />
+    <ScrollingText id="path" translation="[1146, 22]" font="font:SmallBoldSystemFont" maxWidth="747" />
     <MultiStyleLabel id="version" translation="[1140, 1020]" />
 
     <MarkupList
-      translation="[1146, 220]"
+      translation="[1146, 80]"
       id="settingsMenu"
       itemComponentName="SettingsMenuItem"
       itemSize="[747, 120]"
       itemSpacing="[0,10]"
-      numRows="6"
-      vertFocusAnimationStyle="floatingFocus" />
+      numRows="7"
+      vertFocusAnimationStyle="floatingFocus"
+      skipFocusAnimations="true" />
 
-    <Text id="settingDesc" translation="[180, 180]" width="880" wrap="true" horizAlign="left" visible="false" />
+    <Text id="settingDesc" translation="[110, 180]" width="880" wrap="true" horizAlign="left" visible="false" />
 
-    <RadioButtonList id="radioSetting" numRows="6" vertFocusAnimationStyle="floatingFocus" translation="[280, 280]" visible="false" />
+    <RadioButtonList id="radioSetting" numRows="6" vertFocusAnimationStyle="floatingFocus" translation="[290, 350]" visible="false" />
 
-    <RadioButtonList id="boolSetting" vertFocusAnimationStyle="floatingFocus" translation="[560, 400]" visible="false">
+    <RadioButtonList id="boolSetting" vertFocusAnimationStyle="floatingFocus" translation="[290, 400]" visible="false">
       <ContentNode role="content">
         <ContentNode title="Disabled" />
         <ContentNode title="Enabled" />
@@ -34,7 +35,7 @@
 
     <ColorGrid
       id="colorgrid"
-      translation="[60, 240]"
+      translation="[60, 400]"
       itemComponentName="ColorOption"
       numColumns="15"
       numRows="9"