Merge pull request #410 from argonui/download-window

Revamped Download Window

config.json

@@ -218,5 +218,5 @@
   "Tags": [],
   "Turns_path": "Turns.json",
   "VersionNumber": "v13.2.2",
-  "XmlUI": "\u003cInclude src=\"Global.xml\"/\u003e"
+  "XmlUI": "\u003cInclude src=\"Global/Global.xml\"/\u003e"
 }

modsettings/CustomUIAssets.json

@@ -218,5 +218,20 @@
     "Name": "FinnIcon",
     "Type": 0,
     "URL": "http://cloud-3.steamusercontent.com/ugc/2037357792052848566/5DA900C430E97D3DFF2C9B8A3DB1CB2271791FC7/"
+  },
+  {
+    "Name": "box-cover-mask-small",
+    "Type": 0,
+    "URL": "http://cloud-3.steamusercontent.com/ugc/2115061298536631564/F29C2ED9DD8431A1D1E21C7FFAFF1FFBC0AF0BF3/"
+  },
+  {
+    "Name": "box-cover-mask-big",
+    "Type": 0,
+    "URL": "http://cloud-3.steamusercontent.com/ugc/2115061298536631429/D075D2EECE6EE091AD3BEA5800DEF9C7B02B745B/"
+  },
+  {
+    "Name": "box-cover-mask-wide",
+    "Type": 0,
+    "URL": "http://cloud-3.steamusercontent.com/ugc/2115061298538827369/A20C2ECB8ECDC1B0AD8B2B38F68CA1C1F5E07D37/"
   }
 ]

src/core/Global.ttslua

@@ -43,8 +43,22 @@ local hideTitleSplashWaitFunctionId = nil
 -- online functionality related variables
 local MOD_VERSION = "3.3.0"
 local SOURCE_REPO = 'https://raw.githubusercontent.com/chr1z93/loadable-objects/main'
-local library, requestObj, modMeta, notificationVisible
+local library, requestObj, modMeta
 local acknowledgedUpgradeVersions = {}
+local contentToShow = "campaigns"
+local currentListItem = 1
+local xmlVisibility = {
+  downloadWindow = false,
+  optionPanel = false,
+  updateNotification = false
+}
+local tabIdTable = {
+  tab1 = "campaigns",
+  tab2 = "scenarios",
+  tab3 = "fanmadeCampaigns",
+  tab4 = "fanmadeScenarios",
+  tab5 = "fanmadePlayerCards"
+}
 
 -- optionPanel data
 optionPanel = {}
@@ -142,6 +156,11 @@ function onLoad(savedData)
   resetChaosTokenStatTracker()
   getModVersion()
   math.randomseed(os.time())
+
+  -- initialization of loadable objects library (delay to let Navigation Overlay build)
+  Wait.time(function()
+    WebRequest.get(SOURCE_REPO .. '/library.json', libraryDownloadCallback)
+  end, 1)
 end
 
 -- Event hook for any object search.  When chaos tokens are manipulated while the chaos bag
@@ -619,176 +638,288 @@ end
 -- Content Importing and XML functions
 ---------------------------------------------------------
 
-function onClick_refreshList()
+-- forwards the requested content type to the update function and sets highlight to clicked tab
-  local request = WebRequest.get(SOURCE_REPO .. '/library.json', completed_list_update)
+---@param tabId String Id of the clicked tab
-  requestObj = request
+function onClick_tab(_, _, tabId)
-  startLuaCoroutine(Global, 'downloadCoroutine')
+  for listId, listContent in pairs(tabIdTable) do
+    if listId == tabId then
+      UI.setClass(listId, 'downloadTab activeTab')
+      contentToShow = listContent
+    else
+      UI.setClass(listId, 'downloadTab')
+    end
+  end
+  currentListItem = 1
+  updateDownloadItemList()
 end
 
-function onClick_select(player, params)
+-- click function for the items in the download window
-  params = JSON.decode(urldecode(params))
+-- updates backgroundcolor for row panel and fontcolor for list item
+function onClick_select(_, _, identificationKey)
+  UI.setAttribute("panel" .. currentListItem, "color", "clear")
+  UI.setAttribute(contentToShow .. "_" .. currentListItem, "color", "white")
+  
+  -- parses the identification key (contentToShow_currentListItem)
+  if identificationKey then
+    contentToShow = nil
+    currentListItem = nil
+    for str in string.gmatch(identificationKey, "([^_]+)") do
+      if not contentToShow then
+        -- grab the first part to know the content type
+        contentToShow = str
+      else
+        -- get the index
+        currentListItem = tonumber(str)
+        break
+      end
+    end
+  end
+
+  UI.setAttribute("panel" .. currentListItem, "color", "grey")
+  UI.setAttribute(contentToShow .. "_" .. currentListItem, "color", "black")
+  updatePreviewWindow()
+end
+
+-- click function for the download button in the preview window
+function onClick_download()
+  placeholder_download(library[contentToShow][currentListItem])
+end
+
+-- the download button on the placeholder objects calls this to directly initiate a download
+---@param param Table contains url and guid of replacement object
+function placeholder_download(params)
   local url = SOURCE_REPO .. '/' .. params.url
-  local request = WebRequest.get(url, function (request) complete_obj_download(request, params) end )
+  requestObj = WebRequest.get(url, function (request) contentDownloadCallback(request, params) end)
-  requestObj = request
   startLuaCoroutine(Global, 'downloadCoroutine')
 end
 
-function onClick_load()
+function downloadCoroutine()
-  UI.show('progress_display')
+  -- show progress bar
-  UI.hide('load_button')
+  UI.setAttribute('download_progress', 'active', true)
+
+  -- update progress bar
+  while requestObj do
+    UI.setAttribute('download_progress', 'percentage', requestObj.download_progress * 100)
+    coroutine.yield(0)
+  end
+  UI.setAttribute('download_progress', 'percentage', 100)
+
+  -- wait 30 frames
+  for i = 1, 30 do
+    coroutine.yield(0)
+  end
+
+  -- hide progress bar
+  UI.setAttribute('download_progress', 'active', false)
+
+  -- hide download window
+  if xmlVisibility.downloadWindow then
+    xmlVisibility.downloadWindow = false
+    UI.hide('downloadWindow')
+  end
+  return 1
 end
 
+-- toggles the visibility of the respective UI
+---@param player LuaPlayer Player that triggered this
+---@param title String Name of the UI to toggle
 function onClick_toggleUi(player, title)
   if title == "Navigation Overlay" then
     navigationOverlayApi.cycleVisibility(player.color)
     return
   end
 
-  UI.hide('optionPanel')
+  if xmlVisibility[title] then
-  UI.hide('load_ui')
+    -- small delay to allow button click sounds to play
-
+    Wait.time(function() UI.hide(title) end, 0.1)
-  -- when same button is clicked or close window button is pressed, don't open UI
-  if UI.getValue('title') ~= title and title ~= 'Hidden' then
-    UI.setValue('title', title)
-
-    if title == "Options" then
-      UI.show('optionPanel')
-    else
-      update_window_content(title)
-      UI.show('load_ui')
-    end
   else
-    UI.setValue('title', "Hidden")
+    UI.show(title)
+  end
+  xmlVisibility[title] = not xmlVisibility[title]
+end
+
+-- updates the preview window
+function updatePreviewWindow()
+  local item = library[contentToShow][currentListItem]
+  local tempImage = "http://cloud-3.steamusercontent.com/ugc/2115061845788345842/2CD6ABC551555CCF58F9D0DDB7620197BA398B06/"
+
+  -- set default image if not defined
+  if item.boxsize == nil or item.boxsize == "" or item.boxart == nil or item.boxart == "" then
+    item.boxsize = "big"
+    item.boxart = "http://cloud-3.steamusercontent.com/ugc/762723517667628371/18438B0A0045038A7099648AA3346DFCAA267C66/"
+  end
+
+  UI.setValue("previewTitle", item.name)
+  UI.setValue("previewAuthor", "by " .. (item.author or "- Author not found -"))
+  UI.setValue("previewDescription", item.description or "- Description not found -")
+
+  -- update mask according to size (hardcoded values to align image in mask)
+  local maskData = {}
+  if item.boxsize == "big" then
+    maskData = {
+        image = "box-cover-mask-big",
+        width = "870",
+        height = "435",
+        offsetXY = "154 60"
+      }
+  elseif item.boxsize == "small" then
+    maskData = {
+        image = "box-cover-mask-small",
+        width = "792",
+        height = "594",
+        offsetXY = "135 13"
+      }
+  elseif item.boxsize == "wide" then
+    maskData = {
+        image = "box-cover-mask-wide",
+        width = "756",
+        height = "630",
+        offsetXY = "-190 -70"
+      }
+  end
+
+  -- loading empty image as placeholder until real image is loaded
+  UI.setAttribute("previewArtImage", "image", tempImage)
+  
+  -- insert the image itself
+  UI.setAttribute("previewArtImage", "image", item.boxart)
+  UI.setAttributes("previewArtMask", maskData)
+end
+
+-- formats the json response from the webrequest into a key-value lua table
+-- strips the prefix from the community content items
+function formatLibrary(json_response)
+  library = {}
+  library["campaigns"] = json_response.campaigns
+  library["scenarios"] = json_response.scenarios
+  library["extras"] = json_response.extras
+  library["fanmadeCampaigns"] = {}
+  library["fanmadeScenarios"] = {}
+  library["fanmadePlayerCards"] = {}
+
+  for _, item in ipairs(json_response.community) do
+    local identifier = nil
+    for str in string.gmatch(item.name, "([^:]+)") do
+      if not identifier then
+        -- grab the first part to know the content type
+        identifier = str
+      else
+        -- update the name without the content type
+        item.name = str
+        break
+      end
+    end
+
+    if identifier == "Fan Investigators" then
+      table.insert(library["fanmadePlayerCards"], item)
+    elseif identifier == "Fan Campaign" then
+      table.insert(library["fanmadeCampaigns"], item)
+    elseif identifier == "Fan Scenario" then
+      table.insert(library["fanmadeScenarios"], item)
+    end
   end
 end
 
-function downloadCoroutine()
+-- updates the window content to the requested content
-  while requestObj do
+function updateDownloadItemList()
-    UI.setAttribute('download_progress', 'percentage', requestObj.download_progress * 100)
+  if not library then return end
-    coroutine.yield(0)
-  end
-  return 1
-end
 
-function update_list(objects)
+  -- addition of list items according to library file
-  local ui = UI.getXmlTable()
+  local globalXml = UI.getXmlTable()
-  local update_height = find_tag_with_id(ui, 'ui_update_height')
+  local contentList = getXmlTableElementById(globalXml, 'contentList')
-  local update_children = find_tag_with_id(update_height.children, 'ui_update_point')
 
-  update_children.children = {}
+  contentList.children = {}
-
+  for i, v in ipairs(library[contentToShow]) do
-  for _, v in ipairs(objects) do
+    table.insert(contentList.children,
-    local s = JSON.encode(v);
+      {
-    table.insert(update_children.children,
+        tag = "Panel",
-      { tag = 'Text',
+        attributes = { id = "panel" .. i },
-        value = v.name,
+        children = {
-        attributes = { onClick = 'onClick_select(' .. urlencode(JSON.encode(v)) .. ')', alignment = 'MiddleLeft' }
+          tag = 'Text',
+          value = v.name,
+          attributes = {
+            id = contentToShow .. "_" .. i,
+            onClick = 'onClick_select',
+            alignment = 'MiddleLeft'
+          }
+        }
       })
   end
 
-  update_height.attributes.height = #(update_children.children) * 24
+  contentList.attributes.height = #contentList.children * 27
-  UI.setXmlTable(ui)
+  UI.setXmlTable(globalXml)
+
+  -- select the first item
+  Wait.time(onClick_select, 0.2)
 end
 
-function update_window_content(new_title)
+-- called after the webrequest of downloading an item
-  if not library then return end
+-- deletes the placeholder and spawns the downloaded item
+function contentDownloadCallback(request, params)
+  requestObj = nil
 
-  if new_title == 'Campaigns' then
+  -- error handling
-    update_list(library.campaigns)
-  elseif new_title == 'Standalone Scenarios' then
-    update_list(library.scenarios)
-  elseif new_title == 'Investigators' then
-    update_list(library.investigators)
-  elseif new_title == 'Community Content' then
-    update_list(library.community)
-  elseif new_title == 'Extras' then
-    update_list(library.extras)
-  else
-    update_list({})
-  end
-end
-
-function complete_obj_download(request, params)
-  assert(request.is_done)
   if request.is_error or request.response_code ~= 200 then
-    print('error: ' .. request.error)
+    print('Error: ' .. request.error)
-  else
+    return
-    if pcall(function()
+  end
-      local replaced_object
+
-      pcall(function()
+  -- initiate content spawning
-        if params.replace then
+  local spawnTable = { json = request.text }
-          replaced_object = getObjectFromGUID(params.replace)
+  if params.replace then
-        end
+    local replacedObject = getObjectFromGUID(params.replace)
-      end)
+    if replacedObject then
-      local json = request.text
+      spawnTable.position = replacedObject.getPosition()
-      if replaced_object then
+      spawnTable.rotation = replacedObject.getRotation()
-        local pos = replaced_object.getPosition()
+      spawnTable.scale    = replacedObject.getScale()
-        local rot = replaced_object.getRotation()
+      destroyObject(replacedObject)
-        destroyObject(replaced_object)
-        Wait.frames(function()
-          spawnObjectJSON({json = json, position = pos, rotation = rot})
-        end, 1)
-      else
-        spawnObjectJSON({json = json})
-      end
-    end) then
-      print('Object loaded.')
-    else
-      print('Error loading object.')
     end
   end
 
-  requestObj = nil
+  -- if spawned from menu, ping the position
-  UI.setAttribute('download_progress', 'percentage', 100)
+  if params.name then
-end
+    spawnTable["callback_function"] = function(obj)
-
+      Player.getPlayers()[1].pingTable(obj.getPosition())
--- the download button on the placeholder objects calls this to directly initiate a download
--- params is a table with url and guid of replacement object, which happens to match what onClick_select wants
-function placeholder_download(params)
-  onClick_select(nil, JSON.encode(params))
-end
-
-function completed_list_update(request)
-  assert(request.is_done)
-  if request.is_error or request.response_code ~= 200 then
-    print('error: ' .. request.error)
-  else
-    local json_response = nil
-    if pcall(function () json_response = JSON.decode(request.text) end) then
-      library = json_response
-      update_window_content(UI.getValue('title'))
-    else
-      print('error parsing downloaded library')
     end
   end
 
-  requestObj = nil
+  if pcall(function() spawnObjectJSON(spawnTable) end) then
-  UI.setAttribute('download_progress', 'percentage', 100)
+    print('Object loaded.')
+  else
+    print('Error loading object.')
+  end
 end
 
-function find_tag_with_id(ui, id)
+-- downloading of the library file
+function libraryDownloadCallback(request)
+  if request.is_error or request.response_code ~= 200 then
+    print('error: ' .. request.error)
+    return
+  end
+
+  local json_response = nil
+  if pcall(function () json_response = JSON.decode(request.text) end) then
+    formatLibrary(json_response)
+    updateDownloadItemList()
+  else
+    print('error parsing downloaded library')
+  end
+end
+
+-- loops through an XML table and returns the specified object
+---@param ui Table XmlTable (get this via getXmlTable)
+---@param id String Id of the object to return
+function getXmlTableElementById(ui, id)
   for _, obj in ipairs(ui) do
     if obj.attributes and obj.attributes.id and obj.attributes.id == id then return obj end
     if obj.children then
-      local result = find_tag_with_id(obj.children, id)
+      local result = getXmlTableElementById(obj.children, id)
       if result then return result end
     end
   end
   return nil
 end
 
-function urlencode(str)
-  local str = string.gsub(str, "([^A-Za-z0-9-_.~])",
-    function (c) return string.format("%%%02X", string.byte(c)) end)
-  return str
-end
-
-function urldecode(str)
-  local str = string.gsub(str, "%%(%x%x)",
-    function (h) return string.char(tonumber(h, 16)) end)
-  return str
-end
-
 ---------------------------------------------------------
 -- Option Panel related functionality
 ---------------------------------------------------------
@@ -1118,17 +1249,6 @@ function updateNotificationLoading()
   UI.setAttribute("updateNotification", "height", 20*#highlights + 125)
 end
 
--- triggered by clicking on the Finn Icon
-function onClick_FinnIcon()
-  if notificationVisible then
-    UI.hide("updateNotification")
-    notificationVisible = false
-  else
-    UI.show("updateNotification")
-    notificationVisible = true
-  end
-end
-
 -- close / don't show again buttons on the update notification
 function onClick_notification(_, parameter)
   if parameter == "dontShowAgain" then
@@ -1137,4 +1257,5 @@ function onClick_notification(_, parameter)
   end
   UI.hide("FinnIcon")
   UI.hide("updateNotification")
+  xmlVisibility["updateNotification"] = false
 end

xml/Global.xml

@@ -1,117 +0,0 @@
-<!-- Default formatting -->
-<Defaults>
-  <!-- general Stuff -->
-  <Text color="white"
-    fontSize="18"/>
-  <Button tooltipPosition="Left"
-    color="clear"/>
-
-  <!-- Window -->
-  <HorizontalLayout class="headerLayout"
-    height="75"
-    padding="5"/>
-  <Button class="headerButton"
-    minWidth="50"
-    preferredWidth="50"
-    flexibleWidth="0"
-    color="clear"/>
-  <Text class="headerText"
-    minWidth="200"
-    flexibleWidth="100"
-    fontSize="32"
-    font="font_teutonic-arkham"/>
-</Defaults>
-
-<!-- Buttons at the bottom right (height: n * 35 + (n-1) * 2) -->
-<VerticalLayout visibility="Admin"
-  color="#000000"
-  outlineSize="1 1"
-  outline="#303030"
-  rectAlignment="LowerRight"
-  width="35"
-  height="146"
-  offsetXY="-1 120"
-  spacing="2">
-  <Button icon="cthulhu"
-    tooltip="Campaigns"
-    onClick="onClick_toggleUi(Campaigns)"/>
-  <Button icon="dark-cult"
-    tooltip="Standalone Scenarios"
-    onClick="onClick_toggleUi(Standalone Scenarios)"/>
-  <Button icon="devourer"
-    tooltip="Community Content"
-    onClick="onClick_toggleUi(Community Content)"/>
-  <Button icon="option-gear"
-    tooltip="Options"
-    onClick="onClick_toggleUi(Options)"/>
-</VerticalLayout>
-
-<!-- Navigation Overlay button (not visibly to Grey and Black) -->
-<Panel visibility="White|Brown|Red|Orange|Yellow|Green|Teal|Blue|Purple|Pink"
-  color="#000000"
-  outlineSize="1 1"
-  outline="#303030"
-  rectAlignment="LowerRight"
-  width="35"
-  height="35"
-  offsetXY="-1 65">
-  <Button icon="NavigationOverlayIcon"
-    tooltip="Navigation Overlay"
-    onClick="onClick_toggleUi(Navigation Overlay)"/>
-</Panel>
-
-<!-- Basic UI that will be replaced based on title -->
-<VerticalLayout id="load_ui"
-  visibility="Admin"
-  color="black"
-  active="false"
-  width="700"
-  height="780"
-  outlineSize="1 1"
-  outline="#303030">
-  <HorizontalLayout class="headerLayout">
-    <Button class="headerButton"
-      icon="refresh"
-      tooltip="Refresh List"
-      tooltipPosition="Right"
-      onClick="onClick_refreshList"/>
-    <Text id="title"
-      class="headerText">Loadable Items</Text>
-    <Button class="headerButton"
-      icon="close"
-      tooltip="Close"
-      onClick="onClick_toggleUi(Hidden)"/>
-  </HorizontalLayout>
-  <VerticalScrollView color="transparent"
-    minHeight="100"
-    flexibleHeight="100">
-    <Panel id="ui_update_height"
-      height="24">
-      <VerticalLayout id="ui_update_point"
-        padding="10">
-        <Text>Please refresh to see available items.</Text>
-      </VerticalLayout>
-    </Panel>
-  </VerticalScrollView>
-  <Panel color="rgb(0,0,0)"
-    minHeight="50"
-    preferredHeight="50"
-    flexibleHeight="0">
-    <Button id="load_button"
-      active="false"
-      onClick="onClick_load">Load:</Button>
-    <HorizontalLayout id="progress_display">
-      <ProgressBar id="download_progress"
-        percentage="0"
-        color="#000000"
-        fillImageColor="#333333"/>
-      <Button onClick="onClick_cancel"
-        active="false">Cancel</Button>
-    </HorizontalLayout>
-  </Panel>
-</VerticalLayout>
-
-<Include src="TitleSplash.xml"/>
-<Include src="NavigationOverlay.xml"/>
-<Include src="OptionPanel.xml"/>
-<Include src="UpdateNotification.xml"/>

xml/Global/BottomBar.xml

@@ -0,0 +1,41 @@
+<Defaults>
+  <Button class="navbar"
+    tooltipPosition="Left"
+    tooltipBackgroundColor="rgba(0,0,0,1)"
+    color="clear"/>
+</Defaults>
+
+<!-- Buttons at the bottom right (height: n * 37 - 2) -->
+<VerticalLayout visibility="Admin"
+  color="#000000"
+  outlineSize="1 1"
+  outline="#303030"
+  rectAlignment="LowerRight"
+  width="35"
+  height="72"
+  offsetXY="-1 120"
+  spacing="2">
+  <Button class="navbar"
+    icon="devourer"
+    tooltip="Downloadable Content"
+    onClick="onClick_toggleUi(downloadWindow)"/>
+  <Button class="navbar"
+    icon="option-gear"
+    tooltip="Options"
+    onClick="onClick_toggleUi(optionPanel)"/>
+</VerticalLayout>
+
+<!-- Navigation Overlay button (not visibly to Grey and Black) -->
+<Panel visibility="White|Brown|Red|Orange|Yellow|Green|Teal|Blue|Purple|Pink"
+  color="#000000"
+  outlineSize="1 1"
+  outline="#303030"
+  rectAlignment="LowerRight"
+  width="35"
+  height="35"
+  offsetXY="-1 85">
+  <Button class="navbar"
+    icon="NavigationOverlayIcon"
+    tooltip="Navigation Overlay"
+    onClick="onClick_toggleUi(Navigation Overlay)"/>
+</Panel>

xml/Global/DownloadWindow.xml

@@ -0,0 +1,140 @@
+<Defaults>
+  <Button class="downloadTab"
+    hoverClass="bGrey"
+    pressClass="bWhite"
+    onClick="onClick_tab"
+    color="#888888"
+    fontSize="24"
+    font="font_teutonic-arkham"/>
+  <Button class="bGrey"
+    color="grey"/>
+  <Button class="bWhite"
+    color="white"/>
+  <Button class="activeTab"
+    color="#ffffff"/>
+</Defaults>
+
+<!-- window to select downloadable content -->
+<VerticalLayout id="downloadWindow"
+  visibility="Admin"
+  color="black"
+  active="false"
+  height="800"
+  width="900"
+  outlineSize="2 2"
+  outline="#303030">
+
+  <!-- window header -->
+  <Panel preferredHeight="60"
+    padding="10 10 5 5"
+    outlineSize="2 2"
+    outline="#303030"
+    color="black">
+    <Text fontSize="32"
+      font="font_teutonic-arkham"
+      alignment="MiddleLeft">Downloadable Content</Text>
+    <Panel>
+      <Button rectAlignment="MiddleRight"
+        width="50"
+        color="clear"
+        icon="close"
+        tooltip="Close"
+        tooltipPosition="Right"
+        tooltipBackgroundColor="rgba(0,0,0,1)"
+        onClick="onClick_toggleUi(downloadWindow)"/>
+    </Panel>
+  </Panel>
+
+  <HorizontalLayout>
+    <VerticalLayout preferredWidth="600">
+      <!-- tab selection -->
+      <HorizontalLayout preferredHeight="60"
+        padding="5"
+        spacing="5">
+        <Button class="downloadTab activeTab"
+          id="tab1">Official Campaigns</Button>
+        <Button class="downloadTab"
+          id="tab2">Official Scenarios</Button>
+        <Button class="downloadTab"
+          id="tab3">Fan-Made Campaigns</Button>
+        <Button class="downloadTab"
+          id="tab4">Fan-Made Scenarios</Button>
+        <Button class="downloadTab"
+          id="tab5">Fan-Made Player Cards</Button>
+      </HorizontalLayout>
+
+      <!-- content list -->
+      <VerticalScrollView color="transparent"
+        minHeight="100"
+        flexibleHeight="100"
+        scrollSensitivity="27"
+        scrollbarColors="grey|grey|#C8C8C8|rgba(0.78,0.78,0.78,0.5)"
+        horizontalScrollbarVisibility="AutohideAndExpandViewport"
+        raycastTarget="true">
+        <VerticalLayout id="contentList"
+          padding="10 25 0 0">
+          <!-- this will be filled via scripting -->
+        </VerticalLayout>
+      </VerticalScrollView>
+    </VerticalLayout>
+
+    <!-- content preview window -->
+    <VerticalLayout preferredWidth="300"
+      padding="15 15 15 5">
+
+      <!-- header -->
+      <VerticalLayout preferredHeight="110">
+        <Text id="previewTitle"
+          fontSize="28"
+          preferredHeight="70"
+          font="font_teutonic-arkham">PreviewTitle</Text>
+        <Text id="previewAuthor"
+          fontSize="20"
+          preferredHeight="40"
+          font="font_teutonic-arkham">by PreviewAuthor</Text>
+      </VerticalLayout>
+
+      <!-- box art -->
+      <Panel id="previewArtPanel"
+        preferredHeight="390">
+        <Mask id="previewArtMask">
+          <!-- image will be set via scripting -->
+          <Image id="previewArtImage" />
+        </Mask>
+      </Panel>
+
+      <!-- description -->
+      <Panel preferredHeight="160">
+        <Text id="previewDescription"
+          alignment="UpperLeft"
+          resizeTextForBestFit="true"
+          resizeTextMinSize="12"
+          resizeTextMaxSize="18">PreviewDescription</Text>
+      </Panel>
+
+      <!-- download button / progress bar (visibility handled by lua code)-->
+      <Panel preferredHeight="60">
+        <!-- download button -->
+        <Button id="download_button"
+          hoverClass="bGrey"
+          pressClass="bWhite"
+          selectClass="bWhite"
+          onClick="onClick_download"
+          color="#888888"
+          height="50"
+          width="270"
+          fontSize="28"
+          font="font_teutonic-arkham">Download</Button>
+        <!-- download progress bar -->
+        <ProgressBar id="download_progress"
+          active="false"
+          height="50"
+          width="270"
+          percentage="0"
+          color="#111111"
+          textColor="#aaaaaa"
+          fillImageColor="#333333"/>
+      </Panel>
+    </VerticalLayout>
+  </HorizontalLayout>
+</VerticalLayout>

xml/Global/Global.xml

@@ -0,0 +1,12 @@
+<Defaults>
+  <!-- general stuff -->
+  <Text color="white"
+    fontSize="18"/>
+</Defaults>
+
+<Include src="Global/BottomBar.xml"/>
+<Include src="Global/DownloadWindow.xml"/>
+<Include src="Global/TitleSplash.xml"/>
+<Include src="Global/NavigationOverlay.xml"/>
+<Include src="Global/OptionPanel.xml"/>
+<Include src="Global/UpdateNotification.xml"/>

xml/Global/OptionPanel.xml

@@ -79,9 +79,10 @@
 <!-- Option Panel -->
 <TableLayout id="optionPanel"
   class="window"
-  active="false"
+  visibility="Admin"
   rectAlignment="LowerRight"
-  offsetXY="-50 80">
+  offsetXY="-50 80"
+  raycastTarget="true">
   <!-- Header: Options -->
   <Row preferredHeight="60">
     <Cell>
@@ -95,7 +96,9 @@
   <!-- Scrollable part with options -->
   <Row>
     <Cell>
-      <VerticalScrollView horizontalScrollbarVisibility="AutohideAndExpandViewport">
+      <VerticalScrollView horizontalScrollbarVisibility="AutohideAndExpandViewport"
+        scrollSensitivity="30"
+        raycastTarget="true">
         <TableLayout columnWidths="0 100 75"
           autoCalculateHeight="1"
           cellPadding="10 5 5 5">
@@ -356,7 +359,7 @@
         <Button class="bottomButtons"
           onClick="onClick_defaultSettings">Load defaults</Button>
         <Button class="bottomButtons"
-          onClick="onClick_toggleUi(Hidden)">Close</Button>
+          onClick="onClick_toggleUi(optionPanel)">Close</Button>
       </HorizontalLayout>
     </Cell>
   </Row>

xml/Global/UpdateNotification.xml

@@ -10,10 +10,11 @@
   offsetXY="420 -5"
   height="90"
   width="90"
-  onClick="onClick_FinnIcon"
+  onClick="onClick_toggleUi(updateNotification)"
   image="FinnIcon"
   tooltip="Update notification"
-  tooltipBackgroundColor="rgba(0,0,0,0.8)"/>
+  tooltipPosition="Right"
+  tooltipBackgroundColor="rgba(0,0,0,1)"/>
 
 <!-- main notification window -->
 <TableLayout id="updateNotification"