fix Store and Settings layouts: copy from working Messages file

The Write tool was introducing invisible formatting that broke RmlUi's
layout parsing, causing elements to have 0 width. Fixed by copying
from the working Messages file and editing with Edit tool instead.

- Store: simplified app list with proper full-width layout
- Settings: simplified settings list with profile, network, device options

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-20 19:16:58 +01:00
parent 6ae62a60fc
commit 0da90f976f
2 changed files with 75 additions and 321 deletions

View File

@@ -6,270 +6,100 @@
<span class="app-bar-title">Settings</span>
</div>
<div class="search-bar">
<img class="search-icon" src="../../icons/search.tga"/>
<span class="search-input">Search settings</span>
</div>
<div style="flex: 1; overflow: auto;">
<!-- Profile Card -->
<div class="list" style="flex: 1; overflow: auto;">
<div class="list-item" onclick="openProfile()">
<div class="list-item-avatar" style="background-color: #BB86FC;">U</div>
<div class="list-item-content">
<span class="list-item-title">User</span>
<span class="list-item-subtitle">user@mosis.app</span>
<span class="list-item-title" style="color: #BB86FC;">User</span>
<span class="list-item-subtitle" style="color: #FFFFFF;">user@mosis.app</span>
</div>
<span class="list-item-action">&gt;</span>
<span style="font-size: 14px; color: #888888;">&gt;</span>
</div>
<div class="divider"></div>
<!-- Network Section -->
<div class="list-header">Network</div>
<div class="list-divider"></div>
<div class="list-item" onclick="toggleWifi()">
<div class="list-item-icon" style="background-color: #2196F3; border-radius: 24px;">
<img src="../../icons/wifi.tga" style="width: 28px; height: 28px;"/>
</div>
<div class="list-item-avatar" style="background-color: #2196F3;">W</div>
<div class="list-item-content">
<span class="list-item-title">Wi-Fi</span>
<span id="wifi-status" class="list-item-subtitle">Connected to MosisNetwork</span>
</div>
<div id="toggle-wifi" class="toggle active">
<div class="toggle-thumb"></div>
<span class="list-item-subtitle">Connected to MosisNetwork</span>
</div>
<span style="font-size: 14px; color: #4CAF50;">On</span>
</div>
<div class="list-divider"></div>
<div class="list-item" onclick="toggleBluetooth()">
<div class="list-item-icon" style="background-color: #3F51B5; border-radius: 24px;">
<img src="../../icons/bluetooth.tga" style="width: 28px; height: 28px;"/>
</div>
<div class="list-item-avatar" style="background-color: #3F51B5;">B</div>
<div class="list-item-content">
<span class="list-item-title">Bluetooth</span>
<span id="bt-status" class="list-item-subtitle">Off</span>
</div>
<div id="toggle-bluetooth" class="toggle">
<div class="toggle-thumb"></div>
</div>
</div>
<div class="list-item" onclick="toggleAirplane()">
<div class="list-item-icon" style="background-color: #FF9800; border-radius: 24px;">
<img src="../../icons/plane.tga" style="width: 28px; height: 28px;"/>
</div>
<div class="list-item-content">
<span class="list-item-title">Airplane Mode</span>
<span class="list-item-subtitle">Off</span>
</div>
<div id="toggle-airplane" class="toggle">
<div class="toggle-thumb"></div>
</div>
<span style="font-size: 14px; color: #888888;">Off</span>
</div>
<div class="divider"></div>
<!-- Device Section -->
<div class="list-header">Device</div>
<div class="list-divider"></div>
<div class="list-item" onclick="openDisplay()">
<div class="list-item-icon" style="background-color: #9C27B0; border-radius: 24px;">
<img src="../../icons/display.tga" style="width: 28px; height: 28px;"/>
</div>
<div class="list-item-avatar" style="background-color: #9C27B0;">D</div>
<div class="list-item-content">
<span class="list-item-title">Display</span>
<span class="list-item-subtitle">Brightness, Dark mode</span>
</div>
<span class="list-item-action">&gt;</span>
<span style="font-size: 14px; color: #888888;">&gt;</span>
</div>
<div class="list-divider"></div>
<div class="list-item" onclick="openSound()">
<div class="list-item-icon" style="background-color: #E91E63; border-radius: 24px;">
<img src="../../icons/volume.tga" style="width: 28px; height: 28px;"/>
</div>
<div class="list-item-avatar" style="background-color: #E91E63;">S</div>
<div class="list-item-content">
<span class="list-item-title">Sound</span>
<span class="list-item-subtitle">Volume, Ringtone</span>
</div>
<span class="list-item-action">&gt;</span>
<span style="font-size: 14px; color: #888888;">&gt;</span>
</div>
<div class="list-item" onclick="openNotifications()">
<div class="list-item-icon" style="background-color: #00BCD4; border-radius: 24px;">
<img src="../../icons/notifications.tga" style="width: 28px; height: 28px;"/>
</div>
<div class="list-item-content">
<span class="list-item-title">Notifications</span>
<span class="list-item-subtitle">App notifications</span>
</div>
<span class="list-item-action">&gt;</span>
</div>
<div class="list-divider"></div>
<div class="list-item" onclick="openBattery()">
<div class="list-item-icon" style="background-color: #4CAF50; border-radius: 24px;">
<img src="../../icons/battery.tga" style="width: 28px; height: 28px;"/>
</div>
<div class="list-item-avatar" style="background-color: #4CAF50;">B</div>
<div class="list-item-content">
<span class="list-item-title">Battery</span>
<span class="list-item-subtitle">85% - Not charging</span>
</div>
<span class="list-item-action">&gt;</span>
<span style="font-size: 14px; color: #888888;">&gt;</span>
</div>
<div class="list-item" onclick="openStorage()">
<div class="list-item-icon" style="background-color: #795548; border-radius: 24px;">
<img src="../../icons/storage.tga" style="width: 28px; height: 28px;"/>
</div>
<div class="list-item-content">
<span class="list-item-title">Storage</span>
<span class="list-item-subtitle">32 GB of 128 GB used</span>
</div>
<span class="list-item-action">&gt;</span>
</div>
<div class="divider"></div>
<!-- Privacy Section -->
<div class="list-header">Privacy</div>
<div class="list-item" onclick="toggleLocation()">
<div class="list-item-icon" style="background-color: #F44336; border-radius: 24px;">
<img src="../../icons/location.tga" style="width: 28px; height: 28px;"/>
</div>
<div class="list-item-content">
<span class="list-item-title">Location</span>
<span id="location-status" class="list-item-subtitle">On - High accuracy</span>
</div>
<div id="toggle-location" class="toggle active">
<div class="toggle-thumb"></div>
</div>
</div>
<div class="list-item" onclick="openPrivacy()">
<div class="list-item-icon" style="background-color: #607D8B; border-radius: 24px;">
<img src="../../icons/lock.tga" style="width: 28px; height: 28px;"/>
</div>
<div class="list-item-content">
<span class="list-item-title">Privacy</span>
<span class="list-item-subtitle">Permissions, Data</span>
</div>
<span class="list-item-action">&gt;</span>
</div>
<div class="divider"></div>
<!-- About Section -->
<div class="list-header">About</div>
<div class="list-divider"></div>
<div class="list-item" onclick="openAbout()">
<div class="list-item-icon" style="background-color: #BB86FC; border-radius: 24px;">
<img src="../../icons/info.tga" style="width: 28px; height: 28px;"/>
</div>
<div class="list-item-avatar" style="background-color: #607D8B;">A</div>
<div class="list-item-content">
<span class="list-item-title">About Phone</span>
<span class="list-item-subtitle">Mosis v1.0</span>
</div>
<span class="list-item-action">&gt;</span>
<span style="font-size: 14px; color: #888888;">&gt;</span>
</div>
</div>
</div>
<script>
local settings = {
wifi = true,
bluetooth = false,
airplane = false,
location = true
}
local function getDoc()
return shell_document
end
function toggleWifi()
settings.wifi = not settings.wifi
local doc = getDoc()
if doc then
local toggle = doc:GetElementById("toggle-wifi")
local status = doc:GetElementById("wifi-status")
if toggle then
toggle:SetClass("active", settings.wifi)
end
if status then
status.inner_rml = settings.wifi and "Connected to MosisNetwork" or "Off"
end
end
print("[Settings] Wi-Fi: " .. tostring(settings.wifi))
if showToast then
showToast(settings.wifi and "Wi-Fi enabled" or "Wi-Fi disabled")
end
end
function toggleBluetooth()
settings.bluetooth = not settings.bluetooth
local doc = getDoc()
if doc then
local toggle = doc:GetElementById("toggle-bluetooth")
local status = doc:GetElementById("bt-status")
if toggle then
toggle:SetClass("active", settings.bluetooth)
end
if status then
status.inner_rml = settings.bluetooth and "On" or "Off"
end
end
print("[Settings] Bluetooth: " .. tostring(settings.bluetooth))
if showToast then
showToast(settings.bluetooth and "Bluetooth enabled" or "Bluetooth disabled")
end
end
function toggleAirplane()
settings.airplane = not settings.airplane
local doc = getDoc()
if doc then
local toggle = doc:GetElementById("toggle-airplane")
if toggle then
toggle:SetClass("active", settings.airplane)
end
if settings.airplane then
settings.wifi = false
settings.bluetooth = false
local wt = doc:GetElementById("toggle-wifi")
local bt = doc:GetElementById("toggle-bluetooth")
if wt then wt:SetClass("active", false) end
if bt then bt:SetClass("active", false) end
end
end
print("[Settings] Airplane: " .. tostring(settings.airplane))
if showToast then
showToast(settings.airplane and "Airplane mode on" or "Airplane mode off")
end
end
function toggleLocation()
settings.location = not settings.location
local doc = getDoc()
if doc then
local toggle = doc:GetElementById("toggle-location")
local status = doc:GetElementById("location-status")
if toggle then
toggle:SetClass("active", settings.location)
end
if status then
status.inner_rml = settings.location and "On - High accuracy" or "Off"
end
end
print("[Settings] Location: " .. tostring(settings.location))
if showToast then
showToast(settings.location and "Location enabled" or "Location disabled")
end
end
function openProfile()
print("[Settings] Profile")
if showToast then showToast("User profile") end
end
function toggleWifi()
print("[Settings] Wi-Fi toggled")
if showToast then showToast("Wi-Fi toggled") end
end
function toggleBluetooth()
print("[Settings] Bluetooth toggled")
if showToast then showToast("Bluetooth toggled") end
end
function openDisplay()
print("[Settings] Display")
if showToast then showToast("Display settings") end
@@ -280,29 +110,14 @@ function openSound()
if showToast then showToast("Sound settings") end
end
function openNotifications()
print("[Settings] Notifications")
if showToast then showToast("Notification settings") end
end
function openBattery()
print("[Settings] Battery")
if showToast then showToast("Battery: 85%") end
end
function openStorage()
print("[Settings] Storage")
if showToast then showToast("Storage: 25% used") end
end
function openPrivacy()
print("[Settings] Privacy")
if showToast then showToast("Privacy settings") end
end
function openAbout()
print("[Settings] About")
if showToast then showToast("Mosis Virtual Phone v1.0") end
if showToast then showToast("Mosis v1.0") end
end
print("[Settings] Content loaded")

View File

@@ -11,128 +11,81 @@
</div>
</div>
<div style="flex: 1; overflow: auto;">
<!-- Featured App -->
<div class="list-header">Featured</div>
<div class="list-item" onclick="installApp('weather')" style="background-color: #7c3aed;">
<div class="list-item-avatar" style="background-color: #9c5afd; border-radius: 12px;">W</div>
<div class="list" style="flex: 1; overflow: auto;">
<div class="list-item" onclick="installApp('weather')">
<div class="list-item-avatar" style="background-color: #7C3AED;">W</div>
<div class="list-item-content">
<span class="list-item-title" style="color: #FFFFFF;">Weather Pro</span>
<span class="list-item-subtitle" style="color: #E8D5FF;">Beautiful forecasts with live radar</span>
</div>
<div class="btn-icon">
<img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
<span class="list-item-title" style="color: #BB86FC;">Weather Pro</span>
<span class="list-item-subtitle" style="color: #FFFFFF;">Beautiful forecasts with live radar</span>
</div>
<span style="font-size: 14px; color: #BB86FC;">GET</span>
</div>
<!-- Categories Header -->
<div class="list-header">Categories</div>
<div class="list-divider"></div>
<!-- Categories Row -->
<div style="display: flex; padding: 0 16px 16px 16px; gap: 12px;">
<div onclick="openCategory('games')" style="padding: 12px; background-color: #1a1a1a; border-radius: 12px; cursor: pointer;">
<div class="list-item-avatar" style="background-color: #F44336;">G</div>
<span style="font-size: 13px; color: #FFFFFF; display: block; margin-top: 8px;">Games</span>
</div>
<div onclick="openCategory('social')" style="padding: 12px; background-color: #1a1a1a; border-radius: 12px; cursor: pointer;">
<div class="list-item-avatar" style="background-color: #2196F3;">S</div>
<span style="font-size: 13px; color: #FFFFFF; display: block; margin-top: 8px;">Social</span>
</div>
<div onclick="openCategory('tools')" style="padding: 12px; background-color: #1a1a1a; border-radius: 12px; cursor: pointer;">
<div class="list-item-avatar" style="background-color: #4CAF50;">T</div>
<span style="font-size: 13px; color: #FFFFFF; display: block; margin-top: 8px;">Tools</span>
</div>
<div onclick="openCategory('media')" style="padding: 12px; background-color: #1a1a1a; border-radius: 12px; cursor: pointer;">
<div class="list-item-avatar" style="background-color: #FF9800;">M</div>
<span style="font-size: 13px; color: #FFFFFF; display: block; margin-top: 8px;">Media</span>
</div>
</div>
<!-- Popular Apps -->
<div class="list-header">Popular Apps</div>
<div class="list-item" onclick="openAppDetails('socialvr')">
<div class="list-item-avatar" style="background-color: #E91E63; border-radius: 12px;">S</div>
<div class="list-item" onclick="installApp('socialvr')">
<div class="list-item-avatar" style="background-color: #E91E63;">S</div>
<div class="list-item-content">
<span class="list-item-title">SocialVR</span>
<span class="list-item-subtitle">Connect in VR</span>
</div>
<div class="btn-icon" onclick="installApp('socialvr'); event.stopPropagation();">
<img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
<span class="list-item-subtitle">Connect in virtual reality</span>
</div>
<span style="font-size: 14px; color: #BB86FC;">GET</span>
</div>
<div class="list-item" onclick="openAppDetails('vrfit')">
<div class="list-item-avatar" style="background-color: #4CAF50; border-radius: 12px;">V</div>
<div class="list-divider"></div>
<div class="list-item" onclick="installApp('vrfit')">
<div class="list-item-avatar" style="background-color: #4CAF50;">V</div>
<div class="list-item-content">
<span class="list-item-title">VR Fitness</span>
<span class="list-item-subtitle">Workout in VR</span>
</div>
<div class="btn-icon" onclick="installApp('vrfit'); event.stopPropagation();">
<img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
<span class="list-item-subtitle">Workout in virtual worlds</span>
</div>
<span style="font-size: 14px; color: #BB86FC;">GET</span>
</div>
<div class="list-item" onclick="openAppDetails('notesync')">
<div class="list-item-avatar" style="background-color: #FF9800; border-radius: 12px;">N</div>
<div class="list-divider"></div>
<div class="list-item" onclick="installApp('notesync')">
<div class="list-item-avatar" style="background-color: #FF9800;">N</div>
<div class="list-item-content">
<span class="list-item-title">NoteSync</span>
<span class="list-item-subtitle">Notes everywhere</span>
</div>
<div class="btn-icon" onclick="installApp('notesync'); event.stopPropagation();">
<img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
<span class="list-item-subtitle">Notes across all devices</span>
</div>
<span style="font-size: 14px; color: #BB86FC;">GET</span>
</div>
<div class="list-item" onclick="openAppDetails('mediaplayer')">
<div class="list-item-avatar" style="background-color: #9C27B0; border-radius: 12px;">M</div>
<div class="list-divider"></div>
<div class="list-item" onclick="installApp('mediaplayer')">
<div class="list-item-avatar" style="background-color: #9C27B0;">M</div>
<div class="list-item-content">
<span class="list-item-title">Media Player</span>
<span class="list-item-subtitle">Play all formats</span>
</div>
<div class="btn-icon" onclick="installApp('mediaplayer'); event.stopPropagation();">
<img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
<span class="list-item-subtitle">Play all video formats</span>
</div>
<span style="font-size: 14px; color: #BB86FC;">GET</span>
</div>
<!-- New Releases -->
<div class="list-header">New Releases</div>
<div class="list-divider"></div>
<div class="list-item" onclick="openAppDetails('calculator')">
<div class="list-item-avatar" style="background-color: #607D8B; border-radius: 12px;">C</div>
<div class="list-item" onclick="installApp('calculator')">
<div class="list-item-avatar" style="background-color: #607D8B;">C</div>
<div class="list-item-content">
<span class="list-item-title">Calculator</span>
<span class="list-item-subtitle">Scientific calc</span>
</div>
<div class="btn-icon" onclick="installApp('calculator'); event.stopPropagation();">
<img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
<span class="list-item-subtitle">Scientific calculator</span>
</div>
<span style="font-size: 14px; color: #BB86FC;">GET</span>
</div>
<div class="list-item" onclick="openAppDetails('filemanager')">
<div class="list-item-avatar" style="background-color: #795548; border-radius: 12px;">F</div>
<div class="list-item-content">
<span class="list-item-title">File Manager</span>
<span class="list-item-subtitle">Organize files</span>
</div>
<div class="btn-icon" onclick="installApp('filemanager'); event.stopPropagation();">
<img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
</div>
</div>
<div class="list-divider"></div>
<div class="list-item" onclick="openAppDetails('clock')">
<div class="list-item-avatar" style="background-color: #00BCD4; border-radius: 12px;">C</div>
<div class="list-item" onclick="installApp('clock')">
<div class="list-item-avatar" style="background-color: #00BCD4;">C</div>
<div class="list-item-content">
<span class="list-item-title">Clock</span>
<span class="list-item-subtitle">Alarms, timers</span>
</div>
<div class="btn-icon" onclick="installApp('clock'); event.stopPropagation();">
<img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
<span class="list-item-subtitle">Alarms, timers, world clock</span>
</div>
<span style="font-size: 14px; color: #BB86FC;">GET</span>
</div>
<div style="height: 24px;"></div>
</div>
</div>
@@ -144,20 +97,6 @@ function searchStore()
end
end
function openCategory(category)
print("[Store] Opening category: " .. category)
if showToast then
showToast("Category: " .. category)
end
end
function openAppDetails(appId)
print("[Store] Opening app details: " .. appId)
if showToast then
showToast("App details: " .. appId)
end
end
function installApp(appId)
print("[Store] Installing app: " .. appId)
if showToast then