Deck (#6504)
* wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip
This commit is contained in:
syuilo
@@ -1,9 +1,10 @@
|
||||
import Vuex from 'vuex';
|
||||
import createPersistedState from 'vuex-persistedstate';
|
||||
import * as nestedProperty from 'nested-property';
|
||||
import { faTerminal, faHashtag, faBroadcastTower, faFireAlt, faSearch, faStar, faAt, faListUl, faUserClock, faUsers, faCloud, faGamepad, faFileAlt, faSatellite, faDoorClosed } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faTerminal, faHashtag, faBroadcastTower, faFireAlt, faSearch, faStar, faAt, faListUl, faUserClock, faUsers, faCloud, faGamepad, faFileAlt, faSatellite, faDoorClosed, faColumns } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faBell, faEnvelope, faComments } from '@fortawesome/free-regular-svg-icons';
|
||||
import { apiUrl } from './config';
|
||||
import { apiUrl, deckmode } from './config';
|
||||
import { erase } from '../prelude/array';
|
||||
|
||||
export const defaultSettings = {
|
||||
tutorial: 0,
|
||||
@@ -35,7 +36,13 @@ export const defaultDeviceUserSettings = {
|
||||
'explore',
|
||||
'announcements',
|
||||
'search',
|
||||
'-',
|
||||
'deck',
|
||||
],
|
||||
deck: {
|
||||
columns: [],
|
||||
layout: [],
|
||||
},
|
||||
};
|
||||
|
||||
export const defaultDeviceSettings = {
|
||||
@@ -50,6 +57,7 @@ export const defaultDeviceSettings = {
|
||||
darkTheme: '8c539dc1-0fab-4d47-9194-39c508e9bfe1',
|
||||
lightTheme: '4eea646f-7afa-4645-83e9-83af0333cd37',
|
||||
darkMode: false,
|
||||
deckMode: false,
|
||||
syncDeviceDarkMode: true,
|
||||
animation: true,
|
||||
animatedMfm: true,
|
||||
@@ -60,6 +68,9 @@ export const defaultDeviceSettings = {
|
||||
fixedWidgetsPosition: false,
|
||||
roomGraphicsQuality: 'medium',
|
||||
roomUseOrthographicCamera: true,
|
||||
deckColumnAlign: 'left',
|
||||
deckAlwaysShowMainColumn: true,
|
||||
deckMainColumnPlace: 'left',
|
||||
sfxVolume: 0.3,
|
||||
sfxNote: 'syuilo/down',
|
||||
sfxNoteMy: 'syuilo/up',
|
||||
@@ -197,6 +208,14 @@ export default () => new Vuex.Store({
|
||||
get show() { return getters.isSignedIn; },
|
||||
get to() { return `/@${state.i.username}/room`; },
|
||||
},
|
||||
deck: {
|
||||
title: deckmode ? 'undeck' : 'deck',
|
||||
icon: faColumns,
|
||||
action: () => {
|
||||
localStorage.setItem('deckmode', (!deckmode).toString());
|
||||
location.reload();
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
|
||||
@@ -399,6 +418,137 @@ export default () => new Vuex.Store({
|
||||
w.data = x.data;
|
||||
}
|
||||
},
|
||||
|
||||
//#region Deck
|
||||
addDeckColumn(state, column) {
|
||||
if (column.name == undefined) column.name = null;
|
||||
state.deck.columns.push(column);
|
||||
state.deck.layout.push([column.id]);
|
||||
},
|
||||
|
||||
removeDeckColumn(state, id) {
|
||||
state.deck.columns = state.deck.columns.filter(c => c.id != id);
|
||||
state.deck.layout = state.deck.layout.map(ids => erase(id, ids));
|
||||
state.deck.layout = state.deck.layout.filter(ids => ids.length > 0);
|
||||
},
|
||||
|
||||
swapDeckColumn(state, x) {
|
||||
const a = x.a;
|
||||
const b = x.b;
|
||||
const aX = state.deck.layout.findIndex(ids => ids.indexOf(a) != -1);
|
||||
const aY = state.deck.layout[aX].findIndex(id => id == a);
|
||||
const bX = state.deck.layout.findIndex(ids => ids.indexOf(b) != -1);
|
||||
const bY = state.deck.layout[bX].findIndex(id => id == b);
|
||||
state.deck.layout[aX][aY] = b;
|
||||
state.deck.layout[bX][bY] = a;
|
||||
},
|
||||
|
||||
swapLeftDeckColumn(state, id) {
|
||||
state.deck.layout.some((ids, i) => {
|
||||
if (ids.indexOf(id) != -1) {
|
||||
const left = state.deck.layout[i - 1];
|
||||
if (left) {
|
||||
// https://vuejs.org/v2/guide/list.html#Caveats
|
||||
//state.deck.layout[i - 1] = state.deck.layout[i];
|
||||
//state.deck.layout[i] = left;
|
||||
state.deck.layout.splice(i - 1, 1, state.deck.layout[i]);
|
||||
state.deck.layout.splice(i, 1, left);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
swapRightDeckColumn(state, id) {
|
||||
state.deck.layout.some((ids, i) => {
|
||||
if (ids.indexOf(id) != -1) {
|
||||
const right = state.deck.layout[i + 1];
|
||||
if (right) {
|
||||
// https://vuejs.org/v2/guide/list.html#Caveats
|
||||
//state.deck.layout[i + 1] = state.deck.layout[i];
|
||||
//state.deck.layout[i] = right;
|
||||
state.deck.layout.splice(i + 1, 1, state.deck.layout[i]);
|
||||
state.deck.layout.splice(i, 1, right);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
swapUpDeckColumn(state, id) {
|
||||
const ids = state.deck.layout.find(ids => ids.indexOf(id) != -1);
|
||||
ids.some((x, i) => {
|
||||
if (x == id) {
|
||||
const up = ids[i - 1];
|
||||
if (up) {
|
||||
// https://vuejs.org/v2/guide/list.html#Caveats
|
||||
//ids[i - 1] = id;
|
||||
//ids[i] = up;
|
||||
ids.splice(i - 1, 1, id);
|
||||
ids.splice(i, 1, up);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
swapDownDeckColumn(state, id) {
|
||||
const ids = state.deck.layout.find(ids => ids.indexOf(id) != -1);
|
||||
ids.some((x, i) => {
|
||||
if (x == id) {
|
||||
const down = ids[i + 1];
|
||||
if (down) {
|
||||
// https://vuejs.org/v2/guide/list.html#Caveats
|
||||
//ids[i + 1] = id;
|
||||
//ids[i] = down;
|
||||
ids.splice(i + 1, 1, id);
|
||||
ids.splice(i, 1, down);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
stackLeftDeckColumn(state, id) {
|
||||
const i = state.deck.layout.findIndex(ids => ids.indexOf(id) != -1);
|
||||
state.deck.layout = state.deck.layout.map(ids => erase(id, ids));
|
||||
const left = state.deck.layout[i - 1];
|
||||
if (left) state.deck.layout[i - 1].push(id);
|
||||
state.deck.layout = state.deck.layout.filter(ids => ids.length > 0);
|
||||
},
|
||||
|
||||
popRightDeckColumn(state, id) {
|
||||
const i = state.deck.layout.findIndex(ids => ids.indexOf(id) != -1);
|
||||
state.deck.layout = state.deck.layout.map(ids => erase(id, ids));
|
||||
state.deck.layout.splice(i + 1, 0, [id]);
|
||||
state.deck.layout = state.deck.layout.filter(ids => ids.length > 0);
|
||||
},
|
||||
|
||||
addDeckWidget(state, x) {
|
||||
const column = state.deck.columns.find(c => c.id == x.id);
|
||||
if (column == null) return;
|
||||
if (column.widgets == null) column.widgets = [];
|
||||
column.widgets.unshift(x.widget);
|
||||
},
|
||||
|
||||
removeDeckWidget(state, x) {
|
||||
const column = state.deck.columns.find(c => c.id == x.id);
|
||||
if (column == null) return;
|
||||
column.widgets = column.widgets.filter(w => w.id != x.widget.id);
|
||||
},
|
||||
|
||||
renameDeckColumn(state, x) {
|
||||
const column = state.deck.columns.find(c => c.id == x.id);
|
||||
if (column == null) return;
|
||||
column.name = x.name;
|
||||
},
|
||||
|
||||
updateDeckColumn(state, x) {
|
||||
let column = state.deck.columns.find(c => c.id == x.id);
|
||||
if (column == null) return;
|
||||
column = x;
|
||||
},
|
||||
//#endregion
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user