fix app layouts: remove style tags from content fragments, use component classes
This commit is contained in:
@@ -6,6 +6,7 @@
|
||||
<link type="text/rcss" href="../../ui/layout.rcss"/>
|
||||
<script src="../../scripts/navigation.lua"></script>
|
||||
<script src="../../scripts/layout.lua"></script>
|
||||
<script src="settings.lua"></script>
|
||||
<title>Settings</title>
|
||||
<style>
|
||||
.settings-list {
|
||||
@@ -46,6 +47,10 @@
|
||||
background-color: #252525;
|
||||
}
|
||||
|
||||
.settings-item:active {
|
||||
background-color: #2A2A2A;
|
||||
}
|
||||
|
||||
.settings-item + .settings-item {
|
||||
border-top: 1px #333333;
|
||||
}
|
||||
@@ -63,6 +68,7 @@
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
@@ -95,6 +101,10 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.settings-toggle:hover {
|
||||
background-color: #777777;
|
||||
}
|
||||
|
||||
.settings-toggle.active {
|
||||
background-color: rgba(187, 134, 252, 0.5);
|
||||
}
|
||||
@@ -160,7 +170,7 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="app-screen" onload="initLayout(document)">
|
||||
<body class="app-screen" onload="initLayout(document); initSettings(document)">
|
||||
<!-- System Status Bar -->
|
||||
<div class="system-status-bar">
|
||||
<span id="status-time" class="system-status-time">12:30</span>
|
||||
@@ -188,7 +198,7 @@
|
||||
<div class="app-content with-nav">
|
||||
<div class="settings-list">
|
||||
<!-- User Card -->
|
||||
<div class="user-card">
|
||||
<div class="user-card" onclick="openUserProfile()">
|
||||
<div class="user-avatar">U</div>
|
||||
<div class="user-info">
|
||||
<div class="user-name">User</div>
|
||||
@@ -200,38 +210,38 @@
|
||||
<!-- Network Section -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-header">Network</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-item" onclick="openWifiSettings()">
|
||||
<div class="settings-icon">
|
||||
<img src="../../icons/wifi.tga"/>
|
||||
</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Wi-Fi</div>
|
||||
<div class="settings-subtitle">Connected to MosisNetwork</div>
|
||||
<div class="settings-subtitle" id="subtitle-wifi">Connected to MosisNetwork</div>
|
||||
</div>
|
||||
<div class="settings-toggle active">
|
||||
<div id="toggle-wifi" class="settings-toggle active" onclick="toggleWifi(); event.stopPropagation();">
|
||||
<div class="settings-toggle-thumb"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-item" onclick="openBluetoothSettings()">
|
||||
<div class="settings-icon">
|
||||
<img src="../../icons/signal.tga"/>
|
||||
<img src="../../icons/bluetooth.tga"/>
|
||||
</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Bluetooth</div>
|
||||
<div class="settings-subtitle">Off</div>
|
||||
<div class="settings-subtitle" id="subtitle-bluetooth">Off</div>
|
||||
</div>
|
||||
<div class="settings-toggle">
|
||||
<div id="toggle-bluetooth" class="settings-toggle" onclick="toggleBluetooth(); event.stopPropagation();">
|
||||
<div class="settings-toggle-thumb"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-icon">
|
||||
<img src="../../icons/signal.tga"/>
|
||||
<img src="../../icons/airplane.tga"/>
|
||||
</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Airplane Mode</div>
|
||||
</div>
|
||||
<div class="settings-toggle">
|
||||
<div id="toggle-airplane" class="settings-toggle" onclick="toggleAirplaneMode()">
|
||||
<div class="settings-toggle-thumb"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -240,9 +250,9 @@
|
||||
<!-- Device Section -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-header">Device</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-item" onclick="openDisplaySettings()">
|
||||
<div class="settings-icon">
|
||||
<img src="../../icons/settings.tga"/>
|
||||
<img src="../../icons/brightness.tga"/>
|
||||
</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Display</div>
|
||||
@@ -250,9 +260,9 @@
|
||||
</div>
|
||||
<span class="settings-action">></span>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-item" onclick="openSoundSettings()">
|
||||
<div class="settings-icon">
|
||||
<img src="../../icons/music.tga"/>
|
||||
<img src="../../icons/volume.tga"/>
|
||||
</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Sound</div>
|
||||
@@ -260,9 +270,9 @@
|
||||
</div>
|
||||
<span class="settings-action">></span>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-item" onclick="openNotificationsSettings()">
|
||||
<div class="settings-icon">
|
||||
<img src="../../icons/message.tga"/>
|
||||
<img src="../../icons/notifications.tga"/>
|
||||
</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Notifications</div>
|
||||
@@ -270,23 +280,23 @@
|
||||
</div>
|
||||
<span class="settings-action">></span>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-item" onclick="openBatterySettings()">
|
||||
<div class="settings-icon">
|
||||
<img src="../../icons/battery.tga"/>
|
||||
</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Battery</div>
|
||||
<div class="settings-subtitle">85% - 4h 30m remaining</div>
|
||||
<div class="settings-subtitle" id="subtitle-battery">85% - Not charging</div>
|
||||
</div>
|
||||
<span class="settings-action">></span>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-item" onclick="openStorageSettings()">
|
||||
<div class="settings-icon">
|
||||
<img src="../../icons/files.tga"/>
|
||||
<img src="../../icons/storage.tga"/>
|
||||
</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Storage</div>
|
||||
<div class="settings-subtitle">32 GB of 128 GB used</div>
|
||||
<div class="settings-subtitle" id="subtitle-storage">32 GB of 128 GB used</div>
|
||||
</div>
|
||||
<span class="settings-action">></span>
|
||||
</div>
|
||||
@@ -295,9 +305,9 @@
|
||||
<!-- Privacy Section -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-header">Privacy & Security</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-item" onclick="openLockScreenSettings()">
|
||||
<div class="settings-icon">
|
||||
<img src="../../icons/account.tga"/>
|
||||
<img src="../../icons/lock.tga"/>
|
||||
</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Lock Screen</div>
|
||||
@@ -305,9 +315,9 @@
|
||||
</div>
|
||||
<span class="settings-action">></span>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-item" onclick="openPrivacySettings()">
|
||||
<div class="settings-icon">
|
||||
<img src="../../icons/account.tga"/>
|
||||
<img src="../../icons/privacy.tga"/>
|
||||
</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Privacy</div>
|
||||
@@ -315,15 +325,15 @@
|
||||
</div>
|
||||
<span class="settings-action">></span>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-item" onclick="openLocationSettings()">
|
||||
<div class="settings-icon">
|
||||
<img src="../../icons/maps.tga"/>
|
||||
<img src="../../icons/location.tga"/>
|
||||
</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Location</div>
|
||||
<div class="settings-subtitle">On - High accuracy</div>
|
||||
<div class="settings-subtitle" id="subtitle-location">On - High accuracy</div>
|
||||
</div>
|
||||
<div class="settings-toggle active">
|
||||
<div id="toggle-location" class="settings-toggle active" onclick="toggleLocation(); event.stopPropagation();">
|
||||
<div class="settings-toggle-thumb"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -332,7 +342,7 @@
|
||||
<!-- About Section -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-header">About</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-item" onclick="openAboutPhone()">
|
||||
<div class="settings-icon">
|
||||
<img src="../../icons/phone.tga"/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user