implement data model binding
This commit is contained in:
@@ -83,6 +83,7 @@
|
||||
border-radius: 12px;
|
||||
background-color: #666666;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-toggle.active {
|
||||
@@ -147,7 +148,7 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="settings-screen">
|
||||
<body class="settings-screen" data-model="settings">
|
||||
<!-- App Bar -->
|
||||
<div class="app-bar">
|
||||
<div class="btn-icon" onclick="goBack()"><img src="../icons/back.tga" style="width: 24px; height: 24px;"/></div>
|
||||
@@ -161,8 +162,8 @@
|
||||
<div class="user-card">
|
||||
<div class="user-avatar">U</div>
|
||||
<div class="user-info">
|
||||
<div class="user-name">User Name</div>
|
||||
<div class="user-email">user@example.com</div>
|
||||
<div class="user-name">{{ user_name }}</div>
|
||||
<div class="user-email">{{ user_email }}</div>
|
||||
</div>
|
||||
<span class="settings-action">></span>
|
||||
</div>
|
||||
@@ -174,9 +175,10 @@
|
||||
<div class="settings-icon">W</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Wi-Fi</div>
|
||||
<div class="settings-subtitle">Connected to Home_Network</div>
|
||||
<div class="settings-subtitle" data-if="wifi">Connected to {{ wifi_network }}</div>
|
||||
<div class="settings-subtitle" data-if="!wifi">Off</div>
|
||||
</div>
|
||||
<div class="settings-toggle active">
|
||||
<div class="settings-toggle" data-class-active="wifi" data-event-click="wifi = !wifi">
|
||||
<div class="settings-toggle-thumb"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -184,9 +186,10 @@
|
||||
<div class="settings-icon">B</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Bluetooth</div>
|
||||
<div class="settings-subtitle">Off</div>
|
||||
<div class="settings-subtitle" data-if="bluetooth">On</div>
|
||||
<div class="settings-subtitle" data-if="!bluetooth">Off</div>
|
||||
</div>
|
||||
<div class="settings-toggle">
|
||||
<div class="settings-toggle" data-class-active="bluetooth" data-event-click="bluetooth = !bluetooth">
|
||||
<div class="settings-toggle-thumb"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -195,7 +198,7 @@
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Airplane Mode</div>
|
||||
</div>
|
||||
<div class="settings-toggle">
|
||||
<div class="settings-toggle" data-class-active="airplane_mode" data-event-click="airplane_mode = !airplane_mode">
|
||||
<div class="settings-toggle-thumb"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -232,7 +235,7 @@
|
||||
<div class="settings-icon">B</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Battery</div>
|
||||
<div class="settings-subtitle">85% - About 12h remaining</div>
|
||||
<div class="settings-subtitle">{{ battery_percent }}% - {{ battery_remaining }}</div>
|
||||
</div>
|
||||
<span class="settings-action">></span>
|
||||
</div>
|
||||
@@ -240,7 +243,7 @@
|
||||
<div class="settings-icon">S</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Storage</div>
|
||||
<div class="settings-subtitle">45.2 GB used of 128 GB</div>
|
||||
<div class="settings-subtitle">{{ storage_used }}</div>
|
||||
</div>
|
||||
<span class="settings-action">></span>
|
||||
</div>
|
||||
@@ -269,9 +272,10 @@
|
||||
<div class="settings-icon">L</div>
|
||||
<div class="settings-content">
|
||||
<div class="settings-title">Location</div>
|
||||
<div class="settings-subtitle">On - High accuracy</div>
|
||||
<div class="settings-subtitle" data-if="location">On - High accuracy</div>
|
||||
<div class="settings-subtitle" data-if="!location">Off</div>
|
||||
</div>
|
||||
<div class="settings-toggle active">
|
||||
<div class="settings-toggle" data-class-active="location" data-event-click="location = !location">
|
||||
<div class="settings-toggle-thumb"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user