-
Package manager
+Package manager (EXPERIMENTAL)
-
diff --git a/src/apps/groove.internal.settings/script.js b/src/apps/groove.internal.settings/script.js
index e79cc6e..5324ca2 100644
--- a/src/apps/groove.internal.settings/script.js
+++ b/src/apps/groove.internal.settings/script.js
@@ -2,6 +2,8 @@
import { applyOverscroll, appViewEvents, grooveColors, grooveThemes, setAccentColor } from "../../scripts/shared/internal-app";
import { GrooveScroll, GrooveSlide } from "../../scripts/overscrollFramework";
import imageStore from "../../scripts/imageStore";
+import fontStore from "../../scripts/fontStore";
+window.fontStore = fontStore
const settingsPages = document.getElementById("settings-pages")
const appTabs = document.querySelector("div.app-tabs")
@@ -148,16 +150,19 @@ function activeTabScroll() {
}
requestAnimationFrame(activeTabScroll)
}
+window.activeTabScroll = activeTabScroll
const scrollers = {
theme: new GrooveScroll("#theme-tab", {
bounceTime: 300,
swipeBounceTime: 200,
- outOfBoundaryDampingFactor: 1
+ outOfBoundaryDampingFactor: 1,
+ scrollbar: true
}),
about: new GrooveScroll("#about-tab", {
bounceTime: 300,
swipeBounceTime: 200,
- outOfBoundaryDampingFactor: 1
+ outOfBoundaryDampingFactor: 1,
+ scrollbar: true
}),
accentCatalogue: new GrooveScroll("div.accent-color-catalogue", {
bounceTime: 300,
@@ -189,7 +194,7 @@ window.appViewEvents = appViewEvents
const urlParams = new URLSearchParams(window.location.search);
if (!urlParams.has("accentColor")) {
- document.querySelector("div.color-picker > div.picker-option").innerText = "cobalt"
+ document.querySelector("div.color-picker > div.picker-option").innerText = "violet"
} else {
document.querySelector("div.color-picker > div.picker-option").innerText = Object.keys(grooveColors).find(key => grooveColors[key] === "#" + urlParams.get("accentColor"));
}
@@ -255,8 +260,8 @@ document.querySelector("#resetbtn").addEventListener("flowClick", () => {
"Reset Groove Launcher?",
"This will reset your launcher to its default settings. All customizations will be lost.",
[{
- title: "Yes", style: "default", inline: true, action: () => {
- window.localStorage.clear()
+ title: "Yes", style: "default", inline: true, action: async () => {
+ await window.parent.GrooveBoard.backendMethods.reset()
appViewEvents.reloadApp()
}
}, { title: "No", style: "default", inline: true, action: () => { } }]
@@ -266,28 +271,42 @@ document.getElementById("theme-chooser").addEventListener('selected', (e) => {
appViewEvents.setTheme(e.detail.index == 0 ? grooveThemes.light : grooveThemes.dark)
});
+
function handleFileInput(event) {
- const fileInput = event.target;
- const files = fileInput.files;
+ const file = event.target.files[0];
+ if (file && file.name.endsWith('.ttf')) {
+ const reader = new FileReader();
- if (files.length === 0) {
- // User clicked cancel or didn't select a file
- alert('File selection was canceled.');
+ reader.onload = function (e) {
+ const fontData = new Uint8Array(e.target.result);
+ fontStore.saveFont(file.name, fontData).then(() => {
+ //alert('Font saved successfully!');
+ document.getElementById("font-chooser").selectOption(2)
+ parent.GrooveBoard.backendMethods.font.set(2)
+ document.getElementById("clearfont").style.visibility = "visible"
+ document.querySelector("#font-chooser > div:nth-child(3) > span.name").innerText = localStorage["customFontName"] || "custom font"
+ lastX = -9999
+ setTimeout(() => {
+ lastX = -9999
+ }, 100);
+ });
+ };
+
+ reader.onerror = function () {
+ parent.GrooveBoard.alert(
+ "Can’t load font",
+ "We couldn’t read the font file. Only .ttf fonts are supported. Please try a different file.",
+ [, { title: "Ok", style: "default", inline: true, action: () => { } }]
+ );
+ };
+
+ reader.readAsArrayBuffer(file);
} else {
- const file = files[0]; // Get the selected file
-
- if (file.type === 'font/ttf') {
- // Save the font to IndexedDB (using the saveFont function from before)
- saveFont('myFont', file)
- .then(() => {
- alert('Font saved successfully!');
- })
- .catch((error) => {
- alert('Error saving font: ' + error.message);
- });
- } else {
- alert('Please select a valid TTF font file.');
- }
+ parent.GrooveBoard.alert(
+ "Unsupported file format",
+ "The font file isn’t valid. Make sure it’s a .ttf file and try uploading again.",
+ [, { title: "Ok", style: "default", inline: true, action: () => { } }]
+ );
}
}
@@ -300,9 +319,21 @@ document.getElementById("font-chooser").addEventListener("selected", (e) => {
const index = e.detail.index
const lastOne = index == document.getElementById("font-chooser").children.length - 1
if (lastOne) {
- document.getElementById("font-chooser").selectOption(e.detail.prevIndex)
- document.getElementById("font-chooser").querySelector("input").dispatchEvent(new MouseEvent("click"))
+ fontStore.hasFont().then(value => {
+ if (value) {
+ parent.GrooveBoard.backendMethods.font.set(2)
+ } else {
+ document.getElementById("font-chooser").selectOption(e.detail.prevIndex)
+ document.getElementById("font-chooser").querySelector("input").dispatchEvent(new MouseEvent("click"))
+ }
+ })
+ } else {
+ parent.GrooveBoard.backendMethods.font.set(index)
}
+ lastX = -9999
+ setTimeout(() => {
+ lastX = -9999
+ }, 100);
})
requestAnimationFrame(() => {
if (!!localStorage.getItem("UIScale")) {
@@ -313,10 +344,36 @@ requestAnimationFrame(() => {
const theme = Number(localStorage.getItem("theme"))
document.getElementById("theme-chooser").selectOption(1 - theme)
}
+ if (!!localStorage.getItem("font")) {
+ const font = Number(localStorage.getItem("font"))
+ document.getElementById("font-chooser").selectOption(font)
+ setFont(font)
+ fontStore.hasFont().then((value) => {
+ if (value) {
+ document.getElementById("clearfont").style.visibility = "visible"
+ document.querySelector("#font-chooser > div:nth-child(3) > span.name").innerText = localStorage["customFontName"] || "custom font"
+
+ } else {
+ document.getElementById("clearfont").style.visibility = "hidden"
+ }
+ });
+ }
+
document.getElementById("pm-chooser").selectOption(parent.GrooveBoard.backendMethods.packageManagerProvider.get())
})
document.getElementById("font-chooser").querySelector("input").addEventListener('change', handleFileInput);
-
+document.getElementById("clearfont").addEventListener("flowClick", () => {
+ fontStore.clearFont()
+ document.querySelector("#font-chooser > div:nth-child(3) > span.name").innerText = "choose..."
+ document.getElementById("clearfont").style.visibility = "hidden"
+ setFont(0)
+ document.getElementById("font-chooser").selectOption(0)
+ parent.GrooveBoard.backendMethods.font.set(0)
+ lastX = -9999
+ setTimeout(() => {
+ lastX = -9999
+ }, 100);
+})
document.getElementById("choose-wallpaper").querySelector("input").addEventListener('change', (event) => {
window.parent.canPressHomeButton = false
@@ -419,4 +476,8 @@ document.getElementById("pm-chooser").addEventListener('selected', (e) => {
pmtryagaian.shizuku()
break;
}
-});
\ No newline at end of file
+});
+
+document.querySelectorAll("div.credit-item > p:nth-child(2)").forEach(e => e.addEventListener("flowClick", function (event) {
+ Groove.openURL(e.getAttribute("url"))
+}))
\ No newline at end of file
diff --git a/src/apps/groove.internal.settings/style.scss b/src/apps/groove.internal.settings/style.scss
index 16b3d43..65aa607 100644
--- a/src/apps/groove.internal.settings/style.scss
+++ b/src/apps/groove.internal.settings/style.scss
@@ -13,7 +13,7 @@ body {
background-color: transparent !important;
display: flex;
flex-direction: column;
- align-items: center;
+ align-items: cente;
@keyframes app-intro-animation {
0% {
@@ -442,6 +442,58 @@ a {
background-position: center;
background-size: cover;
}
-div.group{
+
+div.group {
margin-top: 22px;
+}
+
+div.bscroll-vertical-scrollbar {
+ width: 3px !important;
+ right: 2px !important;
+
+ div.bscroll-indicator {
+ border: none !important;
+ background: #666666 !important;
+
+ body.light-mode & {
+ background: #A6A6A6 !important;
+ }
+ }
+}
+
+div.credit-item {
+ font-weight: 300;
+ font-size: 24px;
+ display: flex;
+ transform-style: preserve-3d;
+ margin: 15px 0px;
+
+ p {
+ padding: 0px;
+ margin: 0px;
+
+ span {
+ margin: 0px 10px;
+ opacity: .5;
+ font-size: 15px;
+ }
+ }
+
+ p:first-child {
+ flex-grow: 1;
+ }
+
+ p:last-child {
+ @include flow-touch;
+ color: var(--accent-color);
+ }
+
+ &:last-of-type {
+ margin-bottom: 30px;
+
+ }
+
+ &:first-of-type {
+ margin-top: 0px;
+ }
}
\ No newline at end of file
diff --git a/src/script.js b/src/script.js
index 98ef9e6..9e26d1f 100644
--- a/src/script.js
+++ b/src/script.js
@@ -1,6 +1,7 @@
import GrooveMock from "./scripts/GrooveMock.js";
const GrooveMockInstance = !window.Groove
+window.GrooveMockInstance = GrooveMockInstance
if (GrooveMockInstance) {
window.Groove = new GrooveMock("./mock/apps.json")
document.body.classList.add("groove-mock")
@@ -47,6 +48,7 @@ const scrollers = {
scrollX: false,
scrollY: true,
mouseWheel: true,
+ scrollbar: true
}),
letter_selector_scroller: new GrooveScroll('div.letter-selector', {
scrollX: false,
@@ -163,6 +165,17 @@ window.addEventListener("activityResume", () => {
startUpSequence([
+ (next) => {
+ if (GrooveBoard.backendMethods.setupNeeded()) {
+ location.href = !GrooveMockInstance ? '/assets/welcome.html' : '/www/welcome.html'
+ } else {
+ next()
+ }
+ },
+ (next) => {
+ GrooveBoard.backendMethods.reloadAppDatabase()
+ next()
+ },
(next) => {
window.iconPackDB = {}
iconPackConverter.forEach(icon => {
@@ -187,6 +200,7 @@ startUpSequence([
if (!!localStorage.getItem("theme")) GrooveBoard.backendMethods.setTheme(Number(localStorage.getItem("theme")), true)
if (!!localStorage.getItem("accentColor")) GrooveBoard.backendMethods.setAccentColor(localStorage.getItem("accentColor"), true)
if (!!localStorage.getItem("UIScale")) GrooveBoard.backendMethods.setUIScale(Number(localStorage.getItem("UIScale")), true)
+ if (!!localStorage.getItem("font")) GrooveBoard.backendMethods.font.set(localStorage.getItem("font"), true)
//if (!!localStorage.getItem("packageManagerProvider")) GrooveBoard.backendMethods.packageManagerProvider.set(Number(localStorage.getItem("packageManagerProvider")), true)
next()
},
diff --git a/src/scripts/GrooveBoard.js b/src/scripts/GrooveBoard.js
index 2346e87..8e76b35 100644
--- a/src/scripts/GrooveBoard.js
+++ b/src/scripts/GrooveBoard.js
@@ -1,11 +1,17 @@
+import { normalizeSync } from 'normalize-diacritics';
+window.normalizeDiacritics = (input = "") => {
+ return normalizeSync(input)
+}
+
import {
grooveColors,
grooveTileColumns,
grooveThemes,
} from "./GrooveProperties";
import appViewEvents from "./appViewEvents"
-import canvasImageFit from "./canvasImageFit";
+import canvasImageFit, { contain } from "./canvasImageFit";
import imageStore from "./imageStore";
+import fontStore from "./fontStore";
window.grooveTileColumns = grooveTileColumns;
window.grooveColors = grooveColors;
window.grooveThemes = grooveThemes;
@@ -52,7 +58,6 @@ function alert(title = "Alert!", message = "Message", actions = [{ title: "" }])
var alertmenu = $("div.groove-element.groove-element-alert").last()
if (actions.length <= 2) alertmenu.addClass("inline")
actions.forEach((element, index) => {
- console.log("index", index)
if (element["action"]) {
if (typeof element["action"] == "function") {
alertmenu.children("button.groove-element-alert-action").eq(index).on("click", function () {
@@ -196,7 +201,7 @@ const boardMethods = {
},
createAppMenu: (packageName) => {
const el = GrooveElements.wAppMenu(packageName, {
- "pin to start": () => {
+ "pin to home": () => {
const findTile = $(
`div.inner-page.app-list-page > div.app-list > div.app-list-container > div.groove-element.groove-app-tile[packagename="${packageName}"]`
)[0];
@@ -258,7 +263,6 @@ const boardMethods = {
if (document.querySelectorAll(`div.groove-home-tile[packagename="${packageName}"]`).length > 0) {
el.querySelector("div:nth-child(1)").classList.add("disabled")
}
- console.log("dfgsd", window.allappsarchive, packageName)
if (allappsarchive.filter(e => e.packageName == packageName)[0].type == 0) {
el.querySelector("div:nth-child(2)").remove()
el.style.setProperty("--full-height", "89px")
@@ -337,9 +341,20 @@ function sortObjectsByKey(a, b) {
return rankA - rankB;
}
}
-console.log(appSortCategories, "spp")
// Output: [{ label: "1" }, { label: "2" }, { label: "A" }, { label: "a" }, { label: "B" }, { label: "c" }, { label: "#" }, { label: "@" }]
const backendMethods = {
+ reset: async () => {
+ try {
+ const databases = await indexedDB.databases();
+ for (const db of databases) {
+ await indexedDB.deleteDatabase(db.name);
+ console.log(`Deleted database: ${db.name}`);
+ }
+ } catch (error) {
+ console.error('Error accessing databases: ', error);
+ }
+ localStorage.clear()
+ },
reloadApps: function (callback) {
document.querySelector("#main-home-slider > div > div:nth-child(2) > div > div.app-list > div.app-list-container").querySelectorAll(".groove-letter-tile, .groove-app-tile").forEach(e => e.remove())
//appSortCategories = {}
@@ -385,11 +400,10 @@ const backendMethods = {
});
});
- console.log("new ", appSortCategories)
scrollers.app_page_scroller.refresh();
},
getAppDetails: (packageName) => {
- if (window["allappsarchive"].length == 0) reloadAppDatabase();
+ if (!window["allappsarchive"]) backendMethods.reloadAppDatabase(); else if (window["allappsarchive"].length == 0) backendMethods.reloadAppDatabase();
const search = window["allappsarchive"].filter(e => e.packageName == packageName)[0]
const icon = JSON.parse(Groove.getAppIconURL(packageName))
var returnee = { packageName: "com.unknown." + Math.random().toFixed(4) * 10000, label: "Unknown", type: 0, icon: icon }
@@ -816,6 +830,38 @@ const backendMethods = {
if (await imageStore.hasImage("wallpaper")) imageStore.removeImage("wallpaper")
},
},
+ font: {
+ get: () => { Number(localStorage["font"] || 0) },
+ set: async (font, doNotSave = false) => {
+ font = Number(font)
+ font = font < 0 ? 0 : font > 2 ? 2 : font
+ document.body.classList.remove("font-1")
+ document.body.classList.remove("font-2")
+ var resultFont = 0
+ console.log("font set ", font)
+ switch (font) {
+ case 0:
+ resultFont = 0
+ break;
+ case 1:
+ resultFont = 1
+ document.body.classList.add("font-1")
+ break;
+ case 2:
+ if (fontStore.hasFont()) {
+ resultFont = 2
+ document.body.classList.add("font-2")
+ }
+ break;
+ }
+ if (!doNotSave) localStorage.setItem("font", resultFont)
+ fontStore.loadFont()
+ document.querySelectorAll("iframe.groove-app-view").forEach(e => appViewEvents.setFont(e, font))
+ },
+ remove: () => {
+ fontStore.clearFont()
+ }
+ },
appInstall: (packagename) => {
GrooveBoard.backendMethods.reloadApps()
},
@@ -830,6 +876,11 @@ const backendMethods = {
if (localStorage["accentColor"]) response.accentcolor = localStorage.accentColor
if (localStorage["theme"]) response.theme = localStorage.theme
return response;
+ },
+ setupNeeded: () => {
+ if (localStorage["lastVersion"] == undefined) return true;
+ else if (localStorage["lastVersion"] != Groove.getAppVersion()) return true;
+ else return false;
}
};
function listHistory() {
diff --git a/src/scripts/GrooveElements.js b/src/scripts/GrooveElements.js
index 281d0b2..993f087 100644
--- a/src/scripts/GrooveElements.js
+++ b/src/scripts/GrooveElements.js
@@ -34,7 +34,7 @@ function wHomeTile(
+
-
+
Groove Launcher
Version: Loading...
-WebView Version: Loading...
- +WebView Version: Loading...
+Groove Launcher is a metro-styled launcher designed for a customizable and sleek user experience. Users can @@ -233,7 +234,15 @@
Contact
style="display:block; transform-style: preserve-3d;">
-
+ Team Groove
+
+
+ Nathan Tool(Logo Design)
+ u/NateTool
+
+
Berkay Tumal(Developer)
+ berkaytumal
+
${//imageIcon ?
`
- ![]()
+ ![]()
`
/*: `
@@ -64,7 +64,7 @@ function wAppTile(
appTile.innerHTML = `
${!letterTile ?
`
- ![]()
+ ![]()
`
: `
@@ -77,14 +77,12 @@ function wAppTile(
//appTile.setAttribute("imageIcon", imageIcon);
appTile.setAttribute("icon", icon);
appTile.setAttribute("icon-bg", iconbg);
- console.log(packageName, iconbg)
appTile.setAttribute("title", title);
appTile.setAttribute("packageName", packageName);
appTile.querySelector("p.groove-app-tile-title").innerText = title;
if (!letterTile) appTile.querySelector("img.groove-app-tile-imageicon").src = icon; else appTile.querySelector("p.groove-app-tile-icon").innerText = icon;
if (iconbg && iconbg != "none") appTile.querySelector(".groove-app-tile-imageicon").style.background = "url('" + iconbg + "')";
else appTile.querySelector("p.groove-app-tile-icon").innerText = icon;
- console.log("apply", appTile.querySelector(".groove-app-tile-icon"), "url('" + iconbg + "')")
return appTile;
}
diff --git a/src/scripts/appViewEvents.js b/src/scripts/appViewEvents.js
index 2ced8bf..38979ab 100644
--- a/src/scripts/appViewEvents.js
+++ b/src/scripts/appViewEvents.js
@@ -11,6 +11,10 @@ const appViewEvents = {
const message = { action: "setAccentColor", argument: color };
iframe.contentWindow.postMessage(message, '*');
},
+ setFont: (iframe, font) => {
+ const message = { action: "setFont", argument: font };
+ iframe.contentWindow.postMessage(message, '*');
+ }
}
export default appViewEvents;
\ No newline at end of file
diff --git a/src/scripts/fontStore.js b/src/scripts/fontStore.js
new file mode 100644
index 0000000..78b7876
--- /dev/null
+++ b/src/scripts/fontStore.js
@@ -0,0 +1,117 @@
+const dbName = 'FontDB';
+const storeName = 'fonts';
+const localStorageKey = 'customFontName';
+
+
+async function initDB() {
+ return new Promise((resolve, reject) => {
+ const request = indexedDB.open(dbName, 1);
+
+ request.onupgradeneeded = (event) => {
+ const db = event.target.result;
+ if (!db.objectStoreNames.contains(storeName)) {
+ db.createObjectStore(storeName);
+ }
+ };
+
+ request.onsuccess = (event) => resolve(event.target.result);
+ request.onerror = (event) => reject(event.target.error);
+ });
+}
+
+async function saveFont(fontName, fontData) {
+ const db = await this.initDB();
+ return new Promise((resolve, reject) => {
+ const transaction = db.transaction(storeName, 'readwrite');
+ const store = transaction.objectStore(storeName);
+ const request = store.put(fontData, fontName);
+
+ request.onsuccess = () => {
+ localStorage.setItem(localStorageKey, fontName);
+ resolve();
+ };
+ request.onerror = (event) => reject(event.target.error);
+ });
+}
+
+async function loadFont() {
+ const fontName = localStorage.getItem(localStorageKey);
+ if (!fontName) return null;
+
+ const db = await this.initDB();
+ return new Promise((resolve, reject) => {
+ const transaction = db.transaction(storeName, 'readonly');
+ const store = transaction.objectStore(storeName);
+ const request = store.get(fontName);
+
+ request.onsuccess = (event) => {
+ const fontData = event.target.result;
+ if (fontData) {
+ // Revoke previous font URL if exists
+ if (window.lastFontURL) {
+ URL.revokeObjectURL(window.lastFontURL);
+ }
+
+ const blob = new Blob([fontData], { type: 'font/ttf' });
+ const fontUrl = URL.createObjectURL(blob);
+
+ // Save the new font URL to window.lastFontURL
+ window.lastFontURL = fontUrl;
+
+ // Create and inject @font-face rule
+ const fontFace = new FontFace('CustomFont', `url(${fontUrl})`);
+ fontFace.load().then(() => {
+ document.fonts.add(fontFace);
+ document.body.style.fontFamily = 'CustomFont';
+ });
+ }
+ resolve(event.target.result);
+ };
+ request.onerror = (event) => reject(event.target.error);
+ });
+}
+
+async function clearFont() {
+ const fontName = localStorage.getItem(localStorageKey);
+ if (!fontName) return;
+ localStorage.removeItem("font")
+ const db = await this.initDB();
+ return new Promise((resolve, reject) => {
+ const transaction = db.transaction(storeName, 'readwrite');
+ const store = transaction.objectStore(storeName);
+ const request = store.delete(fontName);
+
+ request.onsuccess = () => {
+ localStorage.removeItem(localStorageKey);
+
+ // Revoke current Blob URL if exists
+ if (window.lastFontURL) {
+ URL.revokeObjectURL(window.lastFontURL);
+ window.lastFontURL = null;
+ }
+
+ resolve();
+ };
+ request.onerror = (event) => reject(event.target.error);
+ });
+}
+
+async function hasFont() {
+ const fontName = localStorage.getItem(localStorageKey);
+ if (!fontName) return false;
+
+ const db = await this.initDB();
+ return new Promise((resolve, reject) => {
+ const transaction = db.transaction(storeName, 'readonly');
+ const store = transaction.objectStore(storeName);
+ const request = store.get(fontName);
+
+ request.onsuccess = (event) => resolve(!!event.target.result);
+ request.onerror = (event) => reject(event.target.error);
+ });
+}
+
+const fontStore = { initDB, saveFont, loadFont, hasFont, clearFont }
+
+export { initDB, saveFont, loadFont, hasFont, clearFont }
+export default fontStore;
\ No newline at end of file
diff --git a/src/scripts/grooveMock.js b/src/scripts/grooveMock.js
index 82b312e..742eea8 100644
--- a/src/scripts/grooveMock.js
+++ b/src/scripts/grooveMock.js
@@ -19,7 +19,10 @@ class GrooveMock {
}
getSystemInsets() {
- return JSON.stringify({ left: 0, top: 32, right: 0, bottom: 50 })
+ return JSON.stringify({
+ left: 0, top: 32, right: 0, bottom:
+ 0//50
+ })
}
retrieveApps() {
var retrievedApps = this.#retrievedApps
@@ -76,5 +79,17 @@ class GrooveMock {
}
isDeviceRooted() { return false }
isShizukuAvailable() { return true }
+ getDefaultApps() {
+ return JSON.stringify({
+ "phoneApp": "com.google.android.dialer",
+ "messageApp": "com.google.android.apps.messaging",
+ "browserApp": "com.android.chrome",
+ "mailApp": "com.google.android.gm",
+ "storeApp": "com.android.vending",
+ "contactsApp": "com.google.android.contacts",
+ "musicApp": "com.google.android.apps.youtube.music",
+ "galleryApp": "com.google.android.apps.photos"
+ })
+ }
}
export default GrooveMock;
\ No newline at end of file
diff --git a/src/scripts/iconPack.js b/src/scripts/iconPack.js
index 090404d..c2b96d5 100644
--- a/src/scripts/iconPack.js
+++ b/src/scripts/iconPack.js
@@ -1,387 +1,394 @@
const iconPackConverter = [
- {
- //CALCULATOR
- "apps": [
- "com.sec.android.app.popupcalculator",
- "com.android.calculator",
- "com.android.calculator2"
- ],
- "icon": "calculator"
- },
- //CAMERA
- {
- "apps": [
- "com.sec.android.app.camera",
- "com.samsung.android.app.cameraassistant",
- "org.lineageos.aperture",
- "com.android.camera2"
- ],
- "icon": "camera"
- },
- //CONTACTS
- {
- "apps": [
- "com.samsung.android.app.contacts",
- "com.android.contacts",
- "com.google.android.contacts"
- ],
- "icon": "people"
- },
- //PHONE
- {
- "apps": [
- "com.android.dialer",
- "com.google.android.dialer",
- "com.samsung.android.incallui",
- "com.samsung.android.dialer"
- ],
- "icon": "phone"
- },
- //MESSAGES
- {
- "apps": [
- "com.google.android.apps.messaging",
- "com.android.apps.messaging",
- "com.samsung.android.messaging",
- "com.android.messaging"
- ],
- "icon": "messages"
- },
- //STORE
- {
- "apps": [
- "com.android.vending",
- "com.sec.android.app.samsungapps",
- "com.aurora.store"
- ],
- "icon": "store"
- },
- //BROWSER
- {
- "apps": [
- "com.metro.browser",
- "org.lineageos.jelly"
- ],
- "icon": "browser"
- },
- //CALENDAR
- {
- "apps": [
- "com.samsung.android.calendar",
- "org.lineageos.etar",
- "com.google.android.calendar"
- ],
- "icon": "calendar"
- },
- //ALARM
- {
- "apps": [
- "com.sec.android.app.clockpackage",
- "com.android.deskclock",
- "com.google.android.deskclock"
- ],
- "icon": "alarms"
- },
- //FILES
- {
- "apps": [
- "com.sec.android.app.myfiles'",
- "com.android.documentsui",
- "com.google.android.documentsui"
- ],
- "icon": "files"
- },
- //PHOTOS
- {
- "apps": [
- "com.android.gallery3d",
- "com.sec.android.gallery3d"
- ],
- "icon": "photos"
- },
- //MUSIC
- {
- "apps": [
- "com.sec.android.app.music",
- "org.lineageos.eleven"
- ],
- "icon": "music",
- "accent": "emerald"
- },
- //VOICE RECORDER
- {
- "apps": [
- "com.sec.android.app.voicenote",
- "org.lineageos.recorder"
- ],
- "icon": "podcasts"
- },
- //SETTINGS
- {
- "apps": [
- "com.android.settings",
- "groove.internal.settings"
- ],
- "icon": "settings"
- },
- //GAMES
- {
- "apps": [
- "com.samsung.android.game.gamehome",
- "com.google.android.play.games"
- ],
- "icon": "games",
- "accent": "emerald"
- },
- //HEALTH
- {
- "apps": [
- "com.google.android.apps.fitness",
- "com.sec.android.app.shealth"
- ],
- "icon": "health",
- "accent": "orange"
- },
- /* {
- "apps": [
- "com.android.stk"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.google.android.gm",
- "com.samsung.android.email.provider"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.android.app.fm",
- "com.sec.android.app.fm"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.google.android.apps.fitness",
- "com.sec.android.app.shealth"
- ],
- "icon": "",
- "accent": "rgb(210,71,38)"
- },
- {
- "apps": [
- "web.bmdominatezz.gravy"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.discord",
- "com.aliucord"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.android.chrome"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.spotify.music"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.reddit.frontpage"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.google.android.googlequicksearchbox"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.valvesoftware.android.steam.community"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.pinterest"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.linkedin.android"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.facebook.katana"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.facebook.orca"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.chess"
- ],
- "icon": ""
- },
- {
- "apps": [
- "org.lichess.mobileapp"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.ebay.mobile"
- ],
- "icon": ""
- },
- {
- "apps": [
- "org.mozilla.firefox"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.google.android.apps.fitness"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.instagram.android"
- ],
- "icon": ""
- },
- {
- "apps": [
- "org.krita"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.netflix.mediaclient"
- ],
- "icon": ""
- },
- {
- "apps": [
- "app.revanced.android.youtube",
- "com.google.android.youtube",
- "app.rvx.android.youtube"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.google.android.apps.youtube.creator"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.google.android.apps.maps"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.whatsapp"
- ],
- "icon": ""
- },
- {
- "apps": [
- "org.telegram.messenger"
- ],
- "icon": ""
- },
- {
- "apps": [
- "org.torproject.torbrowser"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.google.android.apps.translate"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.samsung.android.app.tips"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.microsoft.teams"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.skype.raider"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.snapchat.android"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.microsoft.skydrive"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.microsoft.office.onenote"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.microsoft.office.outlook"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.microsoft.office.officehubrow"
- ],
- "icon": ""
- },
- {
- "apps": [
- "com.google.android.apps.docs"
- ],
- "icon": ""
- }*/
+ {
+ //CALCULATOR
+ "apps": [
+ "com.sec.android.app.popupcalculator",
+ "com.android.calculator",
+ "com.android.calculator2"
+ ],
+ "icon": "calculator"
+ },
+ //CAMERA
+ {
+ "apps": [
+ "com.sec.android.app.camera",
+ "com.samsung.android.app.cameraassistant",
+ "org.lineageos.aperture",
+ "com.android.camera2"
+ ],
+ "icon": "camera"
+ },
+ //CONTACTS
+ {
+ "apps": [
+ "com.samsung.android.app.contacts",
+ "com.android.contacts",
+ "com.google.android.contacts"
+ ],
+ "icon": "people"
+ },
+ //PHONE
+ {
+ "apps": [
+ "com.android.dialer",
+ "com.google.android.dialer",
+ "com.samsung.android.incallui",
+ "com.samsung.android.dialer"
+ ],
+ "icon": "phone"
+ },
+ //MESSAGES
+ {
+ "apps": [
+ "com.google.android.apps.messaging",
+ "com.android.apps.messaging",
+ "com.samsung.android.messaging",
+ "com.android.messaging"
+ ],
+ "icon": "messages"
+ },
+ //STORE
+ {
+ "apps": [
+ "com.android.vending",
+ "com.sec.android.app.samsungapps",
+ "com.aurora.store"
+ ],
+ "icon": "store"
+ },
+ //BROWSER
+ {
+ "apps": [
+ "com.metro.browser",
+ "org.lineageos.jelly"
+ ],
+ "icon": "browser"
+ },
+ //CALENDAR
+ {
+ "apps": [
+ "com.samsung.android.calendar",
+ "org.lineageos.etar",
+ "com.google.android.calendar"
+ ],
+ "icon": "calendar"
+ },
+ //ALARM
+ {
+ "apps": [
+ "com.sec.android.app.clockpackage",
+ "com.android.deskclock",
+ "com.google.android.deskclock"
+ ],
+ "icon": "alarms"
+ },
+ //FILES
+ {
+ "apps": [
+ "com.sec.android.app.myfiles'",
+ "com.android.documentsui",
+ "com.google.android.documentsui"
+ ],
+ "icon": "files"
+ },
+ //PHOTOS
+ {
+ "apps": [
+ "com.android.gallery3d",
+ "com.sec.android.gallery3d"
+ ],
+ "icon": "photos"
+ },
+ //MUSIC
+ {
+ "apps": [
+ "com.sec.android.app.music",
+ "org.lineageos.eleven"
+ ],
+ "icon": "music",
+ "accent": "emerald"
+ },
+ //VOICE RECORDER
+ {
+ "apps": [
+ "com.sec.android.app.voicenote",
+ "org.lineageos.recorder"
+ ],
+ "icon": "podcasts"
+ },
+ //SETTINGS
+ {
+ "apps": [
+ "com.android.settings",
+ "groove.internal.settings"
+ ],
+ "icon": "settings"
+ },
+ //GAMES
+ {
+ "apps": [
+ "com.samsung.android.game.gamehome",
+ "com.google.android.play.games"
+ ],
+ "icon": "games",
+ "accent": "emerald"
+ },
+ //HEALTH
+ {
+ "apps": [
+ "com.google.android.apps.fitness",
+ "com.sec.android.app.shealth"
+ ],
+ "icon": "health",
+ "accent": "orange"
+ },
+ /* {
+ "apps": [
+ "com.android.stk"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.google.android.gm",
+ "com.samsung.android.email.provider"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.android.app.fm",
+ "com.sec.android.app.fm"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.google.android.apps.fitness",
+ "com.sec.android.app.shealth"
+ ],
+ "icon": "",
+ "accent": "rgb(210,71,38)"
+ },
+ {
+ "apps": [
+ "web.bmdominatezz.gravy"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.discord",
+ "com.aliucord"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.android.chrome"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.spotify.music"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.reddit.frontpage"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.google.android.googlequicksearchbox"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.valvesoftware.android.steam.community"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.pinterest"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.linkedin.android"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.facebook.katana"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.facebook.orca"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.chess"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "org.lichess.mobileapp"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.ebay.mobile"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "org.mozilla.firefox"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.google.android.apps.fitness"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.instagram.android"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "org.krita"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.netflix.mediaclient"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "app.revanced.android.youtube",
+ "com.google.android.youtube",
+ "app.rvx.android.youtube"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.google.android.apps.youtube.creator"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.google.android.apps.maps"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.whatsapp"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "org.telegram.messenger"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "org.torproject.torbrowser"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.google.android.apps.translate"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.samsung.android.app.tips"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.microsoft.teams"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.skype.raider"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.snapchat.android"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.microsoft.skydrive"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.microsoft.office.onenote"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.microsoft.office.outlook"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.microsoft.office.officehubrow"
+ ],
+ "icon": ""
+ },
+ {
+ "apps": [
+ "com.google.android.apps.docs"
+ ],
+ "icon": ""
+ }*/
]
+window.iconPackDB = {}
+iconPackConverter.forEach(icon => {
+ icon.apps.forEach(packageName => {
+ window.iconPackDB[packageName] = { icon: icon.icon, accent: icon["accent"] }
+ });
+});
export default iconPackConverter;
+
diff --git a/src/scripts/overscrollFramework.js b/src/scripts/overscrollFramework.js
index 48c8e37..ca2fa1d 100644
--- a/src/scripts/overscrollFramework.js
+++ b/src/scripts/overscrollFramework.js
@@ -68,6 +68,9 @@ function GrooveScroll(selector, options = {}) {
useTransition: false
}, options))
applyOverscroll(scroller)
+ setTimeout(() => {
+ scroller.refresh()
+ }, 500);
scroller.cancelScroll = () => { cancelScroll(scroller) }
scroller.content.style.setProperty("will-change","transform")
return scroller
@@ -88,6 +91,7 @@ function GrooveSlide(selector, options = {}) {
easing: "cubic-bezier(0.075, 0.82, 0.165, 1)"
}
}, options))
+
scroller.cancelScroll = () => { cancelScroll(scroller) }
return scroller
}
diff --git a/src/scripts/shared/internal-app.js b/src/scripts/shared/internal-app.js
index f246d4b..2d95331 100644
--- a/src/scripts/shared/internal-app.js
+++ b/src/scripts/shared/internal-app.js
@@ -1,7 +1,7 @@
import { grooveColors, grooveThemes } from "../GrooveProperties";
import clickDetectorConfig from "../clickDetector.js";
import applyOverscroll from "../overscrollFramework.js";
-
+import fontStore from "../fontStore.js";
import GrooveMock from "./../GrooveMock.js";
const GrooveMockInstance = !window.Groove
@@ -25,28 +25,56 @@ const setTheme = (theme) => {
console.error("Invalid theme!");
}
};
+const setFont = (font) => {
+ font = Number(font)
+ font = font < 0 ? 0 : font > 2 ? 2 : font
+ document.body.classList.remove("font-1")
+ document.body.classList.remove("font-2")
+ var resultFont = 0
+ console.log("font set ", font)
+ switch (font) {
+ case 0:
+ resultFont = 0
+ break;
+ case 1:
+ resultFont = 1
+ document.body.classList.add("font-1")
+ break;
+ case 2:
+ if (fontStore.hasFont()) {
+ fontStore.loadFont()
+ resultFont = 2
+ document.body.classList.add("font-2")
+
+ }
+ break;
+ }
+}
window.setAccentColor = setAccentColor;
window.setTheme = setTheme;
+window.setFont = setFont;
window.addEventListener("message", (event) => {
if (event.data["action"]) {
if (event.data.action == "setTheme") {
setTheme(event.data.argument);
+ } if (event.data.action == "setFont") {
+ setFont(event.data.argument);
} else if (event.data.action == "setAccentColor") {
setAccentColor(event.data.argument);
} else if (event.data.action == "softExit") {
- if(event.data.argument){
+ if (event.data.argument) {
document.body.classList.add("soft-exit-home")
- }else{
+ } else {
document.body.classList.add("soft-exit")
}
-
+
}
}
});
const urlParams = new URLSearchParams(window.location.search);
-setAccentColor(localStorage["accentColor"] || grooveColors.cobalt);
+setAccentColor(localStorage["accentColor"] || grooveColors.violet);
setTheme(Number(localStorage["theme"]) || grooveThemes.dark);
const appViewEvents = {
diff --git a/src/styles.scss b/src/styles.scss
index 7a5bd5e..8f1e6a0 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -31,6 +31,15 @@ img {
* {
font-family: SymbolsNerd, OpenSans;
+
+ body.font-1 & {
+ font-family: SymbolsNerd, NotoSans;
+ }
+
+ body.font-2 & {
+ font-family: SymbolsNerd, CustomFont, OpenSans;
+ }
+
//word-spacing: -6px;
//letter-spacing: -.5px;
touch-action: none;
@@ -89,4 +98,19 @@ iframe.groove-element.groove-app-view {
box-shadow: 0px calc(var(--window-inset-top) * -1) var(--metro-background), 0px var(--window-inset-bottom) var(--metro-background);
width: calc(100vw - var(--window-inset-left) - var(--window-inset-right));
height: calc(100vh - var(--window-inset-top) - var(--window-inset-bottom));
+}
+
+div.bscroll-vertical-scrollbar {
+ width: 3px !important;
+ right: 2px !important;
+
+ div.bscroll-indicator {
+ border: none !important;
+ background: #666666 !important;
+
+ body.light-mode & {
+ background: #A6A6A6 !important;
+
+ }
+ }
}
\ No newline at end of file
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 695878e..7e3b7a3 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -41,7 +41,7 @@ $metro-color-taupe: #87794E; //#87794E;
--metro-color-steel: #{$metro-color-steel};
--metro-color-mauve: #{$metro-color-mauve};
--metro-color-taupe: #{$metro-color-taupe};
- --accent-color: var(--metro-color-cobalt);
+ --accent-color: var(--metro-color-violet);
}
//Default dark mode color palette
diff --git a/src/styles/pages/welcome.scss b/src/styles/pages/welcome.scss
index 5bcadda..68d24d7 100644
--- a/src/styles/pages/welcome.scss
+++ b/src/styles/pages/welcome.scss
@@ -1,3 +1,20 @@
+body {
+ &.fade-out {
+ transition: .25s;
+ filter: brightness(0);
+
+ #background {
+ background-image: none !important;
+ background-color: var(--metro-background);
+ transition: .25s;
+
+ filter: brightness(0);
+ opacity: 1;
+ }
+ }
+
+}
+
#welcome-app {
perspective: var(--flow-perspective);
@@ -54,15 +71,37 @@
pointer-events: none !important;
animation: page-enter-0 .5s .25s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
transform: translateX(100%);
- opacity: 1 !important;
@keyframes page-enter-0 {
from {
transform: translateX(100%);
+ opacity: 1;
}
to {
transform: translateX(0%);
+ opacity: 1;
+ }
+ }
+
+ h1 {
+ animation: page-enter-0-title .75s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
+
+ @keyframes page-enter-0-title {
+
+ 0% {
+ transform: translateX(300vw);
+ opacity: 0;
+ }
+
+ 40% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translateX(0%);
+ }
}
}
}
@@ -73,11 +112,17 @@
opacity: 1 !important;
@keyframes page-leave-0 {
- to {
+ 100% {
transform: translateX(-100%);
+ filter: opacity(0);
}
- from {
+ 99% {
+ filter: opacity(1);
+ }
+
+ 0% {
+ filter: opacity(1);
transform: translateX(0%);
}
}
@@ -87,15 +132,16 @@
pointer-events: none !important;
animation: page-enter-1 .5s .25s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
transform: translateX(-100%);
- opacity: 1 !important;
@keyframes page-enter-1 {
- from {
+ 0% {
transform: translateX(-100%);
+ opacity: 1;
}
- to {
+ 100% {
transform: translateX(0%);
+ opacity: 1;
}
}
}
@@ -106,11 +152,17 @@
opacity: 1 !important;
@keyframes page-leave-1 {
- to {
+ 100% {
transform: translateX(100%);
+ filter: opacity(0);
}
- from {
+ 99% {
+ filter: opacity(1);
+ }
+
+ 0% {
+ filter: opacity(1);
transform: translateX(0%);
}
}
@@ -194,11 +246,27 @@
margin: 0px;
font-size: 23px;
font-weight: 400;
+
+ text-transform: none;
+ font-size: 64px;
+ margin-bottom: 20px;
+ margin-top: 35px;
+ font-weight: 200;
+ //transform: translateZ(100px) translate(20px, 30px) !important;
}
- p {
+ p,
+ ul {
+ font-weight: 300;
margin: 22px 0px;
font-size: 22px;
+ padding: 0px;
+
+ li {
+ margin-bottom: 20px;
+ list-style-type: none;
+
+ }
}
}
@@ -377,8 +445,15 @@
transition: transform .1s ease-out;
pointer-events: none;
content: "";
+
background: white;
color: black;
+
+ body.light-mode & {
+ background: black;
+ color: white;
+ }
+
position: absolute;
right: 0px;
top: 0px;
@@ -395,6 +470,12 @@
&.selected {
box-shadow: inset 0px 0px 0px 5px white;
+
+ body.light-mode & {
+ box-shadow: inset 0px 0px 0px 5px black;
+
+ }
+
position: relative;
&::after {
@@ -407,4 +488,51 @@
}
}
}
+}
+
+#page-welcome h1:first-child {
+ animation: page-enter-1-title 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
+
+ @keyframes page-enter-1-title {
+ 0% {
+ transform: translateX(50vw);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translateX(0%);
+ }
+ }
+}
+
+
+div.scroller {
+ height: 0px;
+ max-width: 724px;
+ width: 100%;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ margin-top: 30px;
+ transform-style: preserve-3d;
+ perspective: var(--flow-perspective);
+ overflow: hidden;
+}
+
+body.fade-out {
+ transition: 0.25s;
+ filter: brightness(0);
+}
+
+body.fade-out #background {
+ background-image: none !important;
+ background-color: var(--metro-background);
+ transition: 0.25s;
+ filter: brightness(0);
+ opacity: 1;
+}
+#page-welcome > div.setup-body > p:nth-child(2) > img{
+ body.light-mode &{
+ filter: brightness(0) !important;
+ }
}
\ No newline at end of file
diff --git a/src/styles/shared/internal-app.scss b/src/styles/shared/internal-app.scss
index d595309..9b881d9 100644
--- a/src/styles/shared/internal-app.scss
+++ b/src/styles/shared/internal-app.scss
@@ -29,6 +29,15 @@ img {
* {
font-family: SymbolsNerd, OpenSans;
+
+ body.font-1 & {
+ font-family: SymbolsNerd, NotoSans;
+ }
+
+ body.font-2 & {
+ font-family: SymbolsNerd, CustomFont, OpenSans;
+ }
+
//word-spacing: -6px;
//letter-spacing: -.5px;
touch-action: none;
diff --git a/src/welcome.js b/src/welcome.js
index defa41b..332b602 100644
--- a/src/welcome.js
+++ b/src/welcome.js
@@ -1,12 +1,16 @@
-import GrooveMock from "./scripts/GrooveMock.js";
+import iconPackConverter from "./scripts/iconPack.js";
import jQuery from "jquery";
window.$ = jQuery
+import GrooveMock from "./scripts/GrooveMock.js";
+
const GrooveMockInstance = !window.Groove
-import {GrooveScroll} from "./scripts/overscrollFramework.js";
+window.GrooveMockInstance = GrooveMockInstance
if (GrooveMockInstance) {
window.Groove = new GrooveMock("./mock/apps.json")
document.body.classList.add("groove-mock")
}
+
+import { GrooveScroll } from "./scripts/overscrollFramework.js";
import detectDeviceType from "./scripts/detectDeviceType";
import GrooveBoard from "./scripts/GrooveBoard";
window.GrooveBoard = GrooveBoard
@@ -25,14 +29,17 @@ setTimeout(() => {
}, 1000);
window.currentPage = 0
function goToPage(index) {
- if(index == 0){
+ if (index == 0) {
$("#background").removeClass("hide")
- }else{
+ } else {
$("#background").addClass("hide")
}
+ if (index == 7) {
+ $("body").addClass("fade-out")
+ }
const oldpage = currentPage
currentPage = index
- $(".setup-page").eq(0).css("opacity","")
+ $(".setup-page").eq(0).css("opacity", "")
const p0 = $(".setup-page").eq(oldpage)
const p1 = $(".setup-page").eq(index)
p0.removeClass("active")
@@ -50,7 +57,7 @@ function goToPage(index) {
p1.addClass("active").addClass("button-anim")
setTimeout(() => {
p1.removeClass("button-anim")
- }, 500);
+ }, 1000);
}, 800);
}
window.goToPage = goToPage
@@ -63,10 +70,210 @@ window.goToPage = goToPage
console.log(alert)
function finishSetup() {
-
+
}
-const accent_color_scroller = new GrooveScroll("div.accent-color-catalogue")
-$("div.accent-color-catalogue-item").on("flowClick",function () {
+
+const accessibility_scroller = new GrooveScroll("#page-access div.scroller", {
+ scrollbar: true
+
+})
+const accent_color_scroller = new GrooveScroll("div.accent-color-catalogue", {
+ scrollbar: true
+
+})
+const whats_new_scroller = new GrooveScroll("#page-readme div.scroller", {
+ scrollbar: true
+
+})
+
+$("div.accent-color-catalogue-item").on("flowClick", function () {
$("div.accent-color-catalogue-item").removeClass("selected")
$(this).addClass("selected")
-})
\ No newline at end of file
+})
+
+var setup = {
+ welcome_back: true,
+ update_wizard: true,
+ accessibility: true,
+ pick_accent: true,
+ whats_new: true,
+}
+const updatedApp = !!localStorage["lastVersion"]
+setup.welcome_back = updatedApp
+setup.update_wizard = updatedApp && localStorage["lastVersion"] != Groove.getAppVersion()
+setup.pick_accent = !!!localStorage["accentColor"]
+setup.accessibility = !!!localStorage["theme"] && !!!localStorage["UIScale"]
+if (updatedApp) {
+ document.querySelector("#page-welcome > div.setup-body > h1").innerText = "Welcome back"
+ document.querySelector("#page-welcome > div.setup-body > p:nth-child(3)").innerText = "Let’s check a few details to enhance your updated experience."
+}
+var history = []
+history.push(0)
+console.log(setup)
+document.querySelector("#page-welcome button.right-btn").addEventListener("flowClick", (e) => {
+ if (setup.update_wizard) {
+ goToPage(1)
+ } else if (setup.accessibility) {
+ goToPage(3)
+ history.push(3)
+ } else if (setup.pick_accent) {
+ goToPage(4)
+ history.push(4)
+ } else if (setup.whats_new) {
+ goToPage(5)
+ history.push(5)
+ }
+
+})
+document.querySelector("#page-wizard button.left-btn").addEventListener("flowClick", (e) => {
+ goToPage(history.slice(-2)[0])
+ history.pop()
+})
+document.querySelector("#page-wizard button.right-btn").addEventListener("flowClick", (e) => {
+ goToPage(2);
+ setTimeout(() => {
+ const loader = document.getElementById("update-loader");
+ loader.classList.add("finished");
+ document.querySelector("#update-loading p").innerText = "All done!"
+ document.querySelector("#update-loading div.setup-footer").style.removeProperty("display")
+ $("#update-loading").addClass("active").addClass("button-anim")
+ localStorage.setItem("lastVersion", Groove.getAppVersion())
+ setup.update_wizard = false
+ history = history.filter(e => e != 1 || e != 2)
+ setTimeout(() => {
+
+ $("#update-loading").removeClass("button-anim")
+ }, 500);
+ }, 2000);
+
+})
+
+document.querySelector("#update-loading button.right-btn").addEventListener("flowClick", (e) => {
+ if (setup.accessibility) {
+ goToPage(3)
+ history.push(3)
+ } else if (setup.pick_accent) {
+ goToPage(4)
+ history.push(4)
+ } else if (setup.whats_new) {
+ goToPage(5)
+ history.push(5)
+ }
+})
+document.querySelector("#page-access button.left-btn").addEventListener("flowClick", (e) => {
+
+ goToPage(history.slice(-2)[0])
+ history.pop()
+
+})
+document.querySelector("#page-access button.right-btn").addEventListener("flowClick", (e) => {
+ if (setup.pick_accent) {
+ goToPage(4)
+ history.push(4)
+ } else if (setup.whats_new) {
+ goToPage(5)
+ history.push(5)
+ }
+})
+document.querySelector("#accent-color-picker button.left-btn").addEventListener("flowClick", (e) => {
+ goToPage(history.slice(-2)[0])
+ history.pop()
+
+})
+document.querySelector("#accent-color-picker button.right-btn").addEventListener("flowClick", (e) => {
+ if (setup.whats_new) {
+ goToPage(5)
+ history.push(5)
+ }
+})
+document.querySelector("#page-readme button.left-btn").addEventListener("flowClick", (e) => {
+ goToPage(history.slice(-2)[0])
+ history.pop()
+
+})
+document.querySelector("#page-readme button.right-btn").addEventListener("flowClick", (e) => {
+ if (GrooveBoard.backendMethods.setupNeeded()) {
+ localStorage.setItem("lastVersion", Groove.getAppVersion())
+ }
+ if (!localStorage["homeConfiguration"]) {
+ try {
+ const defaultApps = JSON.parse(Groove.getDefaultApps())
+ const searchApps = {
+ "phoneApp": [0, 0, 2, 2],
+ "messageApp": [2, 0, 1, 1],
+ "browserApp": [3, 0, 1, 1],
+ "mailApp": [2, 1, 1, 1],
+ "storeApp": [3, 1, 1, 1],
+ "contactsApp": [0, 2, 2, 2],
+ "musicApp": [2, 2, 2, 2],
+ "galleryApp": [0, 4, 4, 2]
+ }
+ var homeConfiguration = []
+ Object.keys(searchApps).forEach(element => {
+ try {
+ const appdetail = GrooveBoard.backendMethods.getAppDetails(defaultApps[element])
+ const app = searchApps[element]
+ console.log("app", element, app, appdetail)
+ if (appdetail.label = "Unknown") throw new Error("App not found for ", element);
+
+ homeConfiguration.push({
+ "p": appdetail.packageName,
+ "t": appdetail.label,
+ "ii": false,
+ "i": appdetail.icon.foreground,
+ "ib": appdetail.icon.background,
+ "s": [
+ "s",
+ "m",
+ "w"
+ ],
+ "w": app[2],
+ "h": app[3],
+ "x": app[0],
+ "y": app[1]
+ })
+
+ } catch (error) {
+
+ }
+ });
+ localStorage["homeConfiguration"] = JSON.stringify(homeConfiguration)
+ } catch (error) {
+ }
+ }
+ goToPage(6);
+ setTimeout(() => {
+ if (GrooveBoard.backendMethods.setupNeeded()) {
+ GrooveBoard.alert("Setup Error", "Something went wrong while setting up. Please try again.", [{
+ title: "Retry", style: "default", action: () => {
+ window.location.reload()
+ }
+ }, { title: "Cancel", style: "default", action: () => { } }])
+ } else {
+ goToPage(7)
+
+ setTimeout(() => {
+ location.href = !GrooveMockInstance ? '/assets/index.html' : '/www'
+ }, 500);
+ }
+
+ }, 2000);
+})
+setTimeout(() => {
+ // goToPage(3)
+}, 500);
+
+document.getElementById("theme-chooser").addEventListener('selected', (e) => {
+ GrooveBoard.backendMethods.setTheme(e.detail.index == 0 ? grooveThemes.light : grooveThemes.dark)
+});
+document.getElementById("display-scaling-chooser").addEventListener("selected", (e) => {
+ const options = [.8, .9, 1, 1.1, 1.25]
+ GrooveBoard.backendMethods.setUIScale(options[e.detail.index])
+})
+document.querySelectorAll("div.accent-color-catalogue-item").forEach(e => e.addEventListener("flowClick", (e) => {
+ GrooveBoard.backendMethods.setAccentColor(grooveColors[e.target.style.background.slice(18).slice(0, -1)])
+}))
+if (!!localStorage.getItem("tileColumns")) GrooveBoard.backendMethods.setTileColumns(Number(localStorage.getItem("tileColumns")), true)
+if (!!localStorage.getItem("theme")) GrooveBoard.backendMethods.setTheme(Number(localStorage.getItem("theme")), true)
+if (!!localStorage.getItem("accentColor")) GrooveBoard.backendMethods.setAccentColor(localStorage.getItem("accentColor"), true)
+if (!!localStorage.getItem("UIScale")) GrooveBoard.backendMethods.setUIScale(Number(localStorage.getItem("UIScale")), true)
diff --git a/www/index.html b/www/index.html
index 24e53f9..7e7520b 100644
--- a/www/index.html
+++ b/www/index.html
@@ -5,7 +5,7 @@
Groove Launcher
-
+
diff --git a/www/welcome.html b/www/welcome.html
index 0198a69..b8a92c5 100644
--- a/www/welcome.html
+++ b/www/welcome.html
@@ -5,7 +5,7 @@
Groove Launcher
-
+
@@ -15,10 +15,8 @@
+
-
@@ -39,18 +36,8 @@ Welcome!
-
Welcome
+
Groove
Launcher
Update Wizard
Let's ensure your data is moved across safely! Click next to continue.
@@ -72,13 +59,44 @@