updated option panel buttons

modsettings/CustomUIAssets.json

@@ -29,6 +29,16 @@
     "Type": 0,
     "URL": "http://cloud-3.steamusercontent.com/ugc/2026086584372569912/5CB461AEAE2E59D3064D90A776EB86C46081EC78/"
   },
+  {
+    "Name": "option-on",
+    "Type": 0,
+    "URL": "http://cloud-3.steamusercontent.com/ugc/2462982115668997008/2178787B67B3C96F3419EDBAB8420E39893756BC/"
+  },
+  {
+    "Name": "option-off",
+    "Type": 0,
+    "URL": "http://cloud-3.steamusercontent.com/ugc/2462982115668996901/D6438ECBB11DECC6DB9987589FF526FBAD4D2368/"
+  },
   {
     "Name": "font_arkhamicons",
     "Type": 1,

src/core/Global.ttslua

@@ -1328,18 +1328,12 @@ end
 -- Option Panel related functionality
 ---------------------------------------------------------
 
--- called by toggling an option
+-- changes the UI state and the internal variable for the togglebuttons
-function onClick_toggleOption(_, id)
+function onClick_toggleOption(_, _, id)
-  local toggleState = self.UI.getAttribute(id, "isOn")
+  local currentState = optionPanel[id]
-
+  local newState = not currentState
-  -- flip state (and handle stupid "False" values)
+  applyOptionPanelChange(id, newState)
-  if toggleState == "False" then
+  self.UI.setAttribute(id, "image", newState and "option-on" or "option-off")
-    self.UI.setAttribute(id, "isOn", true)
-    applyOptionPanelChange(id, true)
-  else
-    self.UI.setAttribute(id, "isOn", "False")
-    applyOptionPanelChange(id, false)
-  end
 end
 
 -- color selection for playArea
@@ -1430,9 +1424,7 @@ function updateOptionPanelState()
     elseif (type(optionValue) == "boolean" and optionValue)
         or (type(optionValue) == "string" and optionValue)
         or (type(optionValue) == "table" and #optionValue ~= 0) then
-      UI.setAttribute(id, "isOn", true)
+      UI.setAttribute(id, "image", "option-on")
-    else
-      UI.setAttribute(id, "isOn", "False")
     end
   end
 end

xml/Global/OptionPanel.xml

@@ -3,9 +3,6 @@
   <Text color="#FFFFFF"
     alignment="MiddleLeft"/>
 
-  <Toggle isOn="False"
-    rectAlignment="MiddleRight" />
-
   <Dropdown rectAlignment="MiddleCenter"/>
 
   <Cell dontUseTableCellBackground="true"
@@ -64,6 +61,14 @@
     font="font_teutonic-arkham"/>
   <Panel class="doubleColumn-wrapper"
     padding="0 17 3 3"/>
+  <Button class="optionToggle"
+    image="option-off"
+    rectAlignment="MiddleRight"
+    offsetXY="-30 0"
+    colors="#FFFFFF|#dfdfdf"
+    height="36"
+    width="65"
+    ignoreLayout="True"/>
 
   <!-- buttons at the bottom -->
   <Button class="bottomButtons"
@@ -150,8 +155,9 @@
               </Panel>
             </Cell>
             <Cell class="option-button">
-              <Toggle id="showTitleSplash"
+              <Button class="optionToggle"
-                onValueChanged="onClick_toggleOption(showTitleSplash)"/>
+                id="showTitleSplash"
+                onClick="onClick_toggleOption"/>
             </Cell>
           </Row>
 
@@ -174,8 +180,9 @@
               </Panel>
             </Cell>
             <Cell class="option-button">
-              <Toggle id="playAreaSnapTags"
+              <Button class="optionToggle"
-                onValueChanged="onClick_toggleOption(playAreaSnapTags)"/>
+                id="playAreaSnapTags"
+                onClick="onClick_toggleOption"/>
             </Cell>
           </Row>
 
@@ -188,8 +195,9 @@
               </Panel>
             </Cell>
             <Cell class="option-button">
-              <Toggle id="playAreaConnections"
+              <Button class="optionToggle"
-                onValueChanged="onClick_toggleOption(playAreaConnections)"/>
+                id="playAreaConnections"
+                onClick="onClick_toggleOption"/>
             </Cell>
           </Row>
 
@@ -219,8 +227,9 @@
               </Panel>
             </Cell>
             <Cell class="option-button">
-              <Toggle id="changePlayAreaImage"
+              <Button class="optionToggle"
-                onValueChanged="onClick_toggleOption(changePlayAreaImage)"/>
+                id="changePlayAreaImage"
+                onClick="onClick_toggleOption"/>
             </Cell>
           </Row>
 
@@ -243,8 +252,9 @@
               </Panel>
             </Cell>
             <Cell class="option-button">
-              <Toggle id="useSnapTags"
+              <Button class="optionToggle"
-                onValueChanged="onClick_toggleOption(useSnapTags)"/>
+                id="useSnapTags"
+                onClick="onClick_toggleOption"/>
             </Cell>
           </Row>
 
@@ -257,8 +267,9 @@
               </Panel>
             </Cell>
             <Cell class="option-button">
-              <Toggle id="showDrawButton"
+              <Button class="optionToggle"
-                onValueChanged="onClick_toggleOption(showDrawButton)"/>
+                id="showDrawButton"
+                onClick="onClick_toggleOption"/>
             </Cell>
           </Row>
 
@@ -271,8 +282,9 @@
               </Panel>
             </Cell>
             <Cell class="option-button">
-              <Toggle id="useClueClickers"
+              <Button class="optionToggle"
-                onValueChanged="onClick_toggleOption(useClueClickers)"/>
+                id="useClueClickers"
+                onClick="onClick_toggleOption"/>
             </Cell>
           </Row>
 
@@ -337,8 +349,9 @@
               </Panel>
             </Cell>
             <Cell class="option-button">
-              <Toggle id="showAttachmentHelper"
+              <Button class="optionToggle"
-                onValueChanged="onClick_toggleOption(showAttachmentHelper)"/>
+                id="showAttachmentHelper"
+                onClick="onClick_toggleOption"/>
             </Cell>
           </Row>
 
@@ -351,8 +364,9 @@
               </Panel>
             </Cell>
             <Cell class="option-button">
-              <Toggle id="showCleanUpHelper"
+              <Button class="optionToggle"
-                onValueChanged="onClick_toggleOption(showCleanUpHelper)"/>
+                id="showCleanUpHelper"
+                onClick="onClick_toggleOption"/>
             </Cell>
           </Row>
 
@@ -365,8 +379,9 @@
               </Panel>
             </Cell>
             <Cell class="option-button">
-              <Toggle id="showCYOA"
+              <Button class="optionToggle"
-                onValueChanged="onClick_toggleOption(showCYOA)"/>
+                id="showCYOA"
+                onClick="onClick_toggleOption"/>
             </Cell>
           </Row>
 
@@ -379,8 +394,9 @@
               </Panel>
             </Cell>
             <Cell class="option-button">
-              <Toggle id="showDisplacementTool"
+              <Button class="optionToggle"
-                onValueChanged="onClick_toggleOption(showDisplacementTool)"/>
+                id="showDisplacementTool"
+                onClick="onClick_toggleOption"/>
             </Cell>
           </Row>
 
@@ -393,8 +409,9 @@
               </Panel>
             </Cell>
             <Cell class="option-button">
-              <Toggle id="showHandHelper"
+              <Button class="optionToggle"
-                onValueChanged="onClick_toggleOption(showHandHelper)"/>
+                id="showHandHelper"
+                onClick="onClick_toggleOption"/>
             </Cell>
           </Row>
 
@@ -407,8 +424,9 @@
               </Panel>
             </Cell>
             <Cell class="option-button">
-              <Toggle id="showSearchAssistant"
+              <Button class="optionToggle"
-                onValueChanged="onClick_toggleOption(showSearchAssistant)"/>
+                id="showSearchAssistant"
+                onClick="onClick_toggleOption"/>
             </Cell>
           </Row>
         </TableLayout>