Add compact slider and full settings persistence.

This commit is contained in:
Kasen IO 2020-04-05 02:16:48 -04:00
parent 1bea2870f0
commit 30b8497430
2 changed files with 88 additions and 14 deletions

View file

@ -40,18 +40,18 @@
>
<v-list
nav
class="pt-5"
>
<v-list-item-group>
<v-list-item @click="compactToggle = !compactToggle">
<v-switch
@click="compactToggle = !compactToggle"
v-model="compactToggle"
:label="`Compact`"
></v-switch>
</v-list-item>
<v-slider
v-model="settings.displayDensity.size"
:tick-labels="settings.displayDensity.labels"
:max="2"
step="1"
ticks="always"
tick-size="3"
></v-slider>
<v-list-item @click="addDialog.show = true">
<v-list-item-icon>
@ -78,6 +78,7 @@
sm="6"
md="4"
lg="3"
class="py-1"
>
<v-card
class="mx-auto"
@ -87,17 +88,30 @@
<v-list-item one-line>
<v-list-item-content class="pb-1 pt-2">
<div class="overline" style="font-size: 0.825rem !important;">{{item.type}}</div>
<div v-show="settings.displayDensity.size > 0" class="overline" style="font-size: 0.825rem !important;">{{item.type}}</div>
<v-list-item-title class="subtitle-1 mb-1">{{item.name}}</v-list-item-title>
<v-list-item-subtitle v-show="!compactToggle">{{item.url}}</v-list-item-subtitle>
<v-list-item-subtitle v-show="settings.displayDensity.size == 2">{{item.url}}</v-list-item-subtitle>
</v-list-item-content>
<v-menu bottom left>
<template v-slot:activator="{ on }">
<!-- settings.displayDensity.size >= 1 -->
<v-btn
:style="{backgroundColor: (getIconColor(item.type)) }"
:style="{backgroundColor: (getIconColor(item.type)) }"
v-show="settings.displayDensity.size >= 1"
medium
fab
x-large
dark
v-on="on"
>
<v-icon>{{displayIcon(item.type)}}</v-icon>
</v-btn>
<!-- settings.displayDensity.size < 1 -->
<v-btn
:style="{backgroundColor: (getIconColor(item.type)) }"
v-show="settings.displayDensity.size < 1"
small
fab
dark
v-on="on"
>
@ -508,6 +522,11 @@ if (!browserDevelopment()) {
// alert("RECEIVING NEARBY USERS:" + JSON.stringify(receivedCommand.data));
vue_this.receiveNearbyUsers(receivedCommand.data);
}
if (receivedCommand.command == 'script-to-web-settings') {
// alert("RECEIVING SETTINGS:" + JSON.stringify(receivedCommand.data));
vue_this.receiveSettings(receivedCommand.data);
}
}
});
@ -635,7 +654,16 @@ new Vue({
},
],
sortBy: "alphabetical",
compactToggle: true,
settings: {
displayDensity: {
"size": 1,
"labels": [
"List",
"Compact",
"Large",
],
},
},
darkTheme: true,
drawer: false,
}),
@ -802,6 +830,16 @@ new Vue({
this.items = receivedInventory;
}
},
sendSettings: function() {
this.sendAppMessage("web-to-script-settings", this.settings );
},
receiveSettings: function(receivedSettings) {
if (!receivedSettings) {
// Don't do anything, let the defaults stand. Otherwise, it will break the app.
} else {
this.settings = receivedSettings;
}
},
displayIcon: function(itemType) {
return this.iconType[itemType].icon;
},
@ -836,6 +874,12 @@ new Vue({
handler() {
this.sendInventory();
}
}, // Whenever the settings change, we want to save that state.
settings: {
deep: true,
handler() {
this.sendSettings();
}
}
},
computed: {

View file

@ -16,6 +16,9 @@ var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
var inventoryDataSettingString = "inventoryApp.data";
var inventoryData;
var inventorySettingsString = "inventoryApp.settings";
var inventorySettings;
// APP EVENT AND MESSAGING ROUTING
function onWebAppEventReceived(event) {
@ -31,6 +34,10 @@ function onWebAppEventReceived(event) {
receiveInventory(eventJSON.data);
}
if (eventJSON.command == "web-to-script-settings") {
receiveSettings(eventJSON.data);
}
if (eventJSON.command == "use-item") {
useItem(eventJSON.data);
}
@ -95,6 +102,19 @@ function sendInventory() {
// END SEND AND RECEIVE INVENTORY STATE
// SEND AND RECEIVE SETTINGS STATE
function receiveSettings(receivedSettingsData) {
inventorySettings = receivedSettingsData;
saveSettings();
}
function sendSettings() {
sendToWeb("script-to-web-settings", inventorySettings);
}
// END SEND AND RECEIVE SETTINGS STATE
function saveInventory() {
Settings.setValue(inventoryDataSettingString, inventoryData);
}
@ -103,6 +123,14 @@ function loadInventory() {
inventoryData = Settings.getValue(inventoryDataSettingString);
}
function saveSettings() {
Settings.setValue(inventorySettingsString, inventorySettings);
}
function loadSettings() {
inventorySettings = Settings.getValue(inventorySettingsString);
}
function receivingItem(sender, type, name, url) {
var packageRequest = {
"sender": sender,
@ -168,6 +196,7 @@ function shareItem(data) {
}
function initializeInventoryApp() {
sendSettings();
sendInventory();
}
@ -182,6 +211,7 @@ function onClosed() {
function startup() {
loadInventory();
loadSettings();
Messages.messageReceived.connect(onMessageReceived);
Messages.subscribe(inventoryMessagesChannel);