Commit b04df849 authored by DFN2's avatar DFN2

revert

parent 9a28e640
# Pling-Store
# opendesktop-app
Pling-Store is a Content Management App for OCS-compatible websites like opendesktop.org, gnome-look.org, etc.
It allows to download and install applications, desktop themes, icon themes, wallpapers, or mouse cursors
under various desktop environments using the "Install"-button.
Currently supported are these desktop environments:
KDE Plasma, Gnome, XFCE, Mate, Cinnamon, Budgie, LXQt, Elementary and Enlightenment.
## Usage
Using the Appimage package format, it should work on any distro like Ubuntu, Debian, Arch, Suse, Redhat and many more.
### Best with AppImageLauncher
If you never used an Appimage before, we recommend this tool to make AppImages run, install/uninstall and update on your Linux OS:
https://www.pling.com/p/1228228/
*Please see if AppImageLauncher offers native packages for your distro, if not, you may request it in the issue section.*
After installing AppImageLauncher, you can simply Double-Click on the Pling-Store Appimage to run or install it.
### Manual Run
To try the Pling-Store without installing, you can simply [make it executable](https://youtu.be/nzZ6Ikc7juw?t=78) and (double-)click on it.
## Development
The Pling-Store is a regular electron app plus the [ocs-manager](https://git.opendesktop.org/akiraohgaki/ocs-manager/). The first acts as a presentation
layer and the second is the one who handles the intallation of the different products.
### Project Setup
```
npm install
curl -fsSL -o node_modules/.bin/ocs-manager https://git.opendesktop.org/akiraohgaki/ocs-manager/uploads/d3dc42436b82d11360ebc96b38d4aaf4/ocs-manager-0.8.1-1-x86_64.AppImage
chmod +x node_modules/.bin/ocs-manager
```
### AppImage Generation
`./scripts/package appimage`
{
"main.css": "static/css/main.aaabb585.css",
"main.css.map": "static/css/main.aaabb585.css.map",
"main.js": "static/js/main.c1798dde.js",
"main.js.map": "static/js/main.c1798dde.js.map"
"main.css": "static/css/main.a2720c57.css",
"main.css.map": "static/css/main.a2720c57.css.map",
"main.js": "static/js/main.1b746c48.js",
"main.js.map": "static/js/main.1b746c48.js.map",
"static/media/opendesktop-app.png": "static/media/opendesktop-app.77b1e6fa.png"
}
\ No newline at end of file
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="./favicon.ico"><link href="./static/css/main.aaabb585.css" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="./static/js/main.c1798dde.js"></script></body></html>
\ No newline at end of file
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="./favicon.ico"><link href="./static/css/main.a2720c57.css" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="./static/js/main.1b746c48.js"></script></body></html>
\ No newline at end of file
This diff is collapsed.
{"version":3,"sources":[],"names":[],"mappings":"","file":"static/css/main.21ac58b7.css","sourceRoot":""}
\ No newline at end of file
This diff is collapsed.
{"version":3,"sources":[],"names":[],"mappings":"","file":"static/css/main.aaabb585.css","sourceRoot":""}
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
{
"name": "pling-store",
"productName": "Pling-Store",
"name": "openesktop-app",
"productName": "Opendesktop-App",
"version": "5.0.1",
"description": "Store Frontend and Management Application based on OpenCollaborationServices (OCS) of Opendesktop.org.",
"author": "Pling.com",
"author": "Opendesktop.org",
"license": "GPL-3.0",
"homepage": "./",
"repoHomepage": "https://www.pling.com/",
"repository": "https://www.opencode.net/dfn2/pling-store",
"bugs": "https://www.opencode.net/dfn2/pling-store/issues",
"main": "app/main.js",
"repoHomepage": "https://www.opendesktop.org/",
"repository": "https://www.opencode.net/dfn2/opendesktop-app",
"bugs": "https://www.opencode.net/dfn2/opendesktop-app/issues",
"main": "src/electron-starter.js",
"scripts": {
"start": "electron .",
"debug": "electron . --debug",
......
#!/bin/bash
PKGNAME='pling-store'
PKGVER='5.0.1'
PKGVER='5.1.1'
# Only timestamp development branches
if [ "${CI_COMMIT_REF_SLUG}" != "master" ]; then
......
This diff is collapsed.
import React from 'react';
import {Context} from '../context-provider';
import AppLogo from '../images/app-icons/pling-store.png';
import AppLogo from '../images/app-icons/opendesktop-app.png';
import Collections from './Collections';
import '../styles/AppDialogs.css';
......
......@@ -3,10 +3,11 @@ const ipcRenderer = electron.ipcRenderer;
import React, { useState} from 'react';
import { Context } from '../context-provider';
import { ConvertByteToHumanReadable } from '../helpers/AppHelpers';
import '../styles/Collections.css';
import LinearProgress from '@material-ui/core/LinearProgress';
import CloudDownload from '@material-ui/icons/CloudDownload';
function Collections(){
const [ view, setView ] = useState({section:'download',type:'all'});
......@@ -27,13 +28,12 @@ function CollectionsSidebar(props){
function onSetView(view){
props.onSetView(view);
}
let installedTypesMenuDisplay;
if (ocsApiState.installedItemTypes && ocsApiState.installedItemTypes.length > 0){
const InstalledTypesMenu = ocsApiState.installedItemTypes.map((iit,index) => {
const InstalledTypesMenu = ocsApiState.installedItemTypes.sort().map((iit,index) => {
const countItems = ocsApiState.installedItems.filter((i) => i.install_type === iit).length;
const menuItemCssClass = props.view.section === "installed" && props.view.type === iit ? "selected" : "";
return (
......@@ -55,9 +55,12 @@ function CollectionsSidebar(props){
}
let downloadMenuCounterDisplay;
if (ocsApiState.downloadItems && ocsApiState.downloadItems.length > 0){
downloadMenuCounterDisplay = <span className="app-badge low-emphasis">{ocsApiState.downloadItems.length}</span>
let downloadItemsCounterDisplay;
if (ocsApiState.downloadItems.length > 0){
const filteredDownloadItems = ocsApiState.downloadItems.filter((di) => di.status === "Downloading");
if (filteredDownloadItems.length > 0){
downloadItemsCounterDisplay = <span className="app-badge medium-emphasis">{filteredDownloadItems.length}</span>
}
}
return (
......@@ -66,7 +69,7 @@ function CollectionsSidebar(props){
<li>
<a className={props.view.section === "download" ? "selected" : ""} onClick={() => onSetView({section:'download',type:'all'})}>
<span className="name">Download</span>
{downloadMenuCounterDisplay}
{downloadItemsCounterDisplay}
</a>
</li>
</ul>
......@@ -79,55 +82,13 @@ function CollectionsSwitchView(props){
const { ocsApiState } = React.useContext(Context);
React.useEffect(() => {
console.log(ocsApiState.installedItems);
},[ocsApiState])
/*const arrayName = viewSection + "Items";
let initialItems = ocsApiState[arrayName];
if (viewSection !== "all" && initialItems.length > 0){
initialItems = ocsApiState[arrayName].filter((i) => i.install_type === viewType);
}
const [ items, setItems ] = useState(initialItems);*/
/*React.useEffect(() => {
const resetNewItems = []
setItems(resetNewItems);
const newSection = props.view.section;
setViewSection(newSection);
const newType = props.view.type;
setViewType(newType);
const arrayName = props.view.section + "Items";
let newItems = new Array(ocsApiState[arrayName]);
if (viewSection !== "all" && newItems.length > 0){
newItems = ocsApiState[arrayName].filter((i) => i.install_type === props.view.type);
}
setItems(newItems);
},[props.view])*/
console.log(props);
const arrayName = props.view.section + "Items";
console.log(arrayName);
let items = ocsApiState[arrayName];
if (props.view.type !== "all") items = items.filter((item) => item.install_type === props.view.type);
console.log(items);
const collectionitemsListDisplay = items.map((item,index) => (
<CollectionItem key={index} item={item}/>
))
/*let collectionitemsListDisplay;
if (items && items.length > 0){
collectionitemsListDisplay = items.map((item,index) => (
));
} else {
collectionitemsListDisplay = "loading ...";
}*/
const collectionitemsListDisplay = items.map((item,index) => (
<CollectionItem key={index} item={item} section={props.view.section}/>
));
return (
<main id="collections-switch-view">{collectionitemsListDisplay}</main>
......@@ -138,18 +99,52 @@ function CollectionItem(props){
const item = props.item;
const itemFilesDisplay = item.files.map((file,index) => (
<CollectionItemFile key={index} item={item} file={file}/>
))
let collectionItemDisplay;
if (props.section === "download"){
collectionItemDisplay = <CollectionDownloadItem item={item} />
} else {
collectionItemDisplay = item.files.map((file,index) => (
<CollectionItemFile key={index} item={item} file={file}/>
))
}
return (
<ul className="item-sublist">
{itemFilesDisplay}
{collectionItemDisplay}
</ul>
)
}
function CollectionDownloadItem(props){
const item = props.item;
let progressBarDisplay, messageDisplay = "Downloading"
if (item.status === "Downloading"){
if (item.bytesRecieved && item.bytesTotal){
const downloadedPercent = item.bytesRecieved / item.bytesTotal;
progressBarDisplay = <div className="progress-bar-container"><progress data-progress value={downloadedPercent} max="1"/></div>
messageDisplay = "Downloading... " + ConvertByteToHumanReadable(item.bytesRecieved) + "/" + ConvertByteToHumanReadable(item.bytesTotal);
}
} else {
messageDisplay = "the file has been installed";
}
return (
<li>
<figure className="preview-pic">
<i className="material-icons md-larger md-dark"><CloudDownload/></i>
</figure>
<div className="item-main">
<h4>{item.filename}</h4>
{progressBarDisplay}
<p className="message">{messageDisplay}</p>
</div>
</li>
)
}
function CollectionItemFile(props){
const { ocsApiState, ocsApiDispatch } = React.useContext(Context);
......@@ -161,11 +156,14 @@ function CollectionItemFile(props){
const item = props.item;
const file = props.file;
React.useEffect(() => {
React.useEffect(() => { checkIfIsApplicable(); },[])
React.useEffect(() => { checkIfIsApplicable(); },[props.item])
function checkIfIsApplicable(){
ocsApiState.ocsManagerApi.sendSync('DesktopThemeHandler::isApplicableType', [item.install_type]).then(function(res){
setIsApplicableType(res.data[0]);
})
},[])
}
function onApplyClick(filePath,installType){
setIsApplying(true);
......@@ -178,26 +176,28 @@ function CollectionItemFile(props){
function onOpenClick(fileUrl){
setIsOpening(true);
ocsApiState.ocsManagerApi.send('SystemHandler::openUrl', [fileUrl]).then(function(data){
setIsOpening(false);
})
setTimeout(() => {
ocsApiState.ocsManagerApi.send('SystemHandler::openUrl', [fileUrl]).then(function(data){
setIsOpening(false);
})
}, 1000);
}
function onDeleteClick(itemUrl){
setIsDeleting(true);
ocsApiState.ocsManagerApi.send('ItemHandler::uninstall', [itemUrl]);
ipcRenderer.sendSync('previewpic', 'remove', itemUrl);
const getAppConfigInstallTypes = ocsApiState.ocsManagerApi.sendSync('ConfigHandler::getAppConfigInstallTypes', [])
const getUserConfigInstalledItems = ocsApiState.ocsManagerApi.sendSync('ConfigHandler::getUsrConfigInstalledItems', []);
getAppConfigInstallTypes.then(function(res){
ocsApiDispatch({type:'SET_INSTALL_TYPES',installTypes:res.data[0]});
return getUserConfigInstalledItems;
}).then(function(res){
ocsApiDispatch({type:'SET_INSTALLED_ITEMS',installedItems:res.data[0]});
setTimeout(() => {
ocsApiState.ocsManagerApi.send('ItemHandler::uninstall', [itemUrl]);
ipcRenderer.sendSync('previewpic', 'remove', itemUrl);
const getAppConfigInstallTypes = ocsApiState.ocsManagerApi.sendSync('ConfigHandler::getAppConfigInstallTypes', [])
const getUserConfigInstalledItems = ocsApiState.ocsManagerApi.sendSync('ConfigHandler::getUsrConfigInstalledItems', []);
getAppConfigInstallTypes.then(function(res){
ocsApiDispatch({type:'SET_INSTALL_TYPES',installTypes:res.data[0]});
return getUserConfigInstalledItems;
}).then(function(res){
ocsApiDispatch({type:'SET_INSTALLED_ITEMS',installedItems:res.data[0]});
});
setIsDeleting(false);
});
setIsDeleting(false);
}
const previewpicDirectory = ipcRenderer.sendSync('previewpic', 'directory');
......@@ -210,7 +210,7 @@ function CollectionItemFile(props){
if (isApplicableType === true){
let applyProgressBar;
if (isApplying === true)applyProgressBar = <div className="progress-bar-container"><LinearProgress/></div>
if (isApplying === true) applyProgressBar = <div id="progress-bar-container"><LinearProgress/></div>
applyButtonDisplay = (
<button onClick={e => onApplyClick(filePath,item.install_type)}>
......@@ -241,7 +241,7 @@ function CollectionItemFile(props){
{deleteProgressBar}
</button>
</nav>
</li>
</li>
)
}
......
......@@ -12,6 +12,7 @@ import Folder from '@material-ui/icons/Folder';
import MoreVert from '@material-ui/icons/MoreVert';
import OpenInBrowser from '@material-ui/icons/OpenInBrowser';
import Close from '@material-ui/icons/Close';
import AccountCircle from '@material-ui/icons/AccountCircle';
import LinearProgress from '@material-ui/core/LinearProgress';
......@@ -20,7 +21,7 @@ function MenuBar(){
/* COMPONENT */
const { appDispatch, browserState, browserDispatch } = React.useContext(Context);
const { appDispatch, browserState, browserDispatch, ocsApiState } = React.useContext(Context);
const [ backButtonActive, setBackButtonActive ] = useState(false);
const [ forwardButtonActive, setForwardButtonActive ] = useState(false);
......@@ -59,6 +60,10 @@ function MenuBar(){
appDispatch({type:'SHOW_DIALOG',id:'collections'})
}
function onLoginButtonClick(){
browserDispatch({type:'LOAD_URL',newUrl:"https://www.pling.com/login",loadUrl:true});
}
/* /COMPONENT */
/* RENDER */
......@@ -110,6 +115,14 @@ function MenuBar(){
/* /RENDER */
let downloadItemsCounterDisplay;
if (ocsApiState.downloadItems.length > 0){
const filteredDownloadItems = ocsApiState.downloadItems.filter((di) => di.status === "Downloading");
if (filteredDownloadItems.length > 0){
downloadItemsCounterDisplay = <span className="app-badge medium-emphasis">{filteredDownloadItems.length}</span>
}
}
return (
<nav id="menu-bar">
<ul id="main-menu">
......@@ -127,11 +140,19 @@ function MenuBar(){
<button title="Collections" onClick={onCollectionsButtonClick}>
<i className="material-icons md-medium md-dark md-active">
<Folder/>
{downloadItemsCounterDisplay}
</i>
</button>
</li>
<li id="omnibox-menu"><OmniBox/></li>
<li><UserMenu/></li>
<li>
<button title="Login" onClick={onLoginButtonClick}>
<i className="material-icons md-medium md-dark md-active">
<AccountCircle/>
</i>
</button>
</li>
</ul>
</nav>
)
......@@ -139,7 +160,7 @@ function MenuBar(){
function OmniBox(){
const { appState, appDispatch, browserState, browserDispatch } = React.useContext(Context);
const { appState, browserState, browserDispatch, ocsApiState } = React.useContext(Context);
const [ showOmniBox, setShowOmniBox ] = useState(false);
function toggleOmniBox(){
......@@ -148,19 +169,15 @@ function OmniBox(){
}
function setAppHomePage(domain){
console.log('to do - save domain as homepage!!');
const domainUrl = domain.url;
const domainTitle = domain.title;
localStorage.setItem('homePageUrl', domainUrl);
localStorage.setItem('homePageTitle', domainTitle);
browserDispatch({type:'LOAD_URL',newUrl:domain.url,loadUrl:true});
}
let linearProgressionDisplay;
if (browserState.loading === true) {
linearProgressionDisplay = (
<div id="progress-bar-container">
<LinearProgress/>
</div>
)
}
if (browserState.loading === true) linearProgressionDisplay = <div id="progress-bar-container"><LinearProgress/></div>
const domainsListDisplay = appState.domains.map((d,index) => (
<li key={index}>
......@@ -170,17 +187,22 @@ function OmniBox(){
</li>
));
let omniboxCssClasses = "";
if (ocsApiState.downloadItems){
const filteredDownloadItems = ocsApiState.downloadItems.filter((di) => di.status === "Downloading");
if (filteredDownloadItems.length > 0) omniboxCssClasses += " download-active";
}
return (
<div id="omnibox-container">
<div id="omnibox" /*data-update-state="inactive" data-download-state="inactive"*/>
<div id="omnibox" className={omniboxCssClasses}>
<div id="omnibox-wrapper">
<div id="omnibox-content">
<div></div>
<h3 onClick={toggleOmniBox}>{browserState.title}</h3>
<div id="open-in-browser-container">
<button title="open in browser">
<i style={{"fontSize":"12px"}} className="material-icons md-smaller md-dark md-active"><OpenInBrowser/></i>
<i className="material-icons md-small md-dark md-active"><OpenInBrowser/></i>
</button>
</div>
</div>
......@@ -218,6 +240,11 @@ function UserMenu(){
updateShowMenu(false);
}
function onCheckForUpdates(){
console.log('check for updates');
updateShowMenu(false);
}
function onAboutClick(){
appDispatch({type:'SHOW_DIALOG',id:'about'});
updateShowMenu(false);
......@@ -228,6 +255,7 @@ function UserMenu(){
userMenuDisplay = (
<ul id="user-menu">
<li><a onClick={() => onReportBugClick()}>Report a Bug</a></li>
<li><a onClick={() => onCheckForUpdates()}>Check for Updates</a></li>
<li><a onClick={() => onAboutClick()}>About This App</a></li>
</ul>
);
......
{
"defaults": {
"startPage": "https://www.pling.com/",
"startPage": "https://www.opendesktop.org/",
"windowBounds": {
"x": 0,
"y": 0,
......@@ -9,14 +9,12 @@
}
},
"domains":[
{"url":"https://www.pling.com/","title":"Pling.com"},
{"url":"https://www.appimagehub.com/","title":"Appimagehub.com"},
{"url":"https://store.kde.org/","title":"KDE"},
{"url":"https://www.pling.com/s/Artwork","title":"Artwork"},
{"url":"https://www.pling.com/s/Gnome","title":"Gnome"},
{"url":"https://www.pling.com/s/Comics","title":"Comics"},
{"url":"https://www.pling.com/s/XFCE","title":"XFCE"},
{"url":"https://www.pling.com/s/Videos","title":"Videos"}
{"url":"https://www.opendesktop.org/","title":"Opendesktop.org"},
{"url":"https://my.opendesktop.org","title":"Storage"},
{"url":"https://my.opendesktop.org/index.php/apps/calendar/","title":"Calendar"},
{"url":"https://my.opendesktop.org/index.php/apps/contacts/","title":"Contacts"},
{"url":"https://forum.opendesktop.org","title":"Messages"},
{"url":"https://my.opendesktop.org/index.php/apps/music/","title":"Music"}
],
"updateCheckAfter": 86400000, "//": "milliseconds"
}
}
\ No newline at end of file
......@@ -2,7 +2,7 @@ import React from 'react';
import AppReducer, { AppReducerInitialState } from './reducers/appReducer';
import BrowserReducer, {BrowserReducerInitialState} from './reducers/browserReducer';
import OcsApiReducer, {OcsApiReducerInitialState} from '../../pling-store/src/reducers/ocsApiReducer';
import OcsApiReducer, {OcsApiReducerInitialState} from './reducers/ocsApiReducer';
export const Context = React.createContext();
const Provider = Context.Provider;
......
......@@ -14,7 +14,7 @@ const ocsManagerConfig = require('./configs/ocs-manager.json');
const isDebugMode = process.argv.includes('--debug');
const previewpicDirectory = `${app.getPath('userData')}/previewpic`;
const windowIcon = `${__dirname}/images/app-icons/pling-store.png`;
const windowIcon = `${__dirname}/images/app-icons/opendesktop-app.png`;
const indexFileUrl = `file://${__dirname}/../build/index.html`;
const appConfigStoreStorage = 'application';
......
......@@ -28,11 +28,22 @@ function OcsApiReducer(state,action){
return { ...state, installedItems:installedItems, installedItemTypes:installedItemTypes }
}
case 'SET_DOWNLOAD_ITEM':{
const item = { ...action.item,status:'Downloading' }
const downloadItems = [ ...state.downloadItems, item ]
return { ...state, downloadItems:downloadItems}
}
case 'UPDATE_ITEM_DOWNLOAD_PROGRESS':{
const downloadItemIndex = state.downloadItems.findIndex((item) => item.url === action.itemUrl);
const newDownloadItem = { ...state.downloadItems[downloadItemIndex] }
if (action.bytesRecieved) newDownloadItem.bytesRecieved = action.bytesRecieved;
if (action.bytesTotal) newDownloadItem.bytesTotal = action.bytesTotal
if (action.status) newDownloadItem.status = action.status;
const downloadItems = [
... state.downloadItems,
action.item
...state.downloadItems.slice(0,downloadItemIndex),
newDownloadItem,
...state.downloadItems.slice(downloadItemIndex + 1, state.downloadItems.length)
];
return { ...state, downloadItems:downloadItems}
return { ...state, downloadItems:downloadItems }
}
case 'SET_UPDATE_CHECK':{
return { ...state, updateCheckedAt:action.updateCheckedAt,updateCheckAfter:action.updateCheckAfter}
......
......@@ -54,6 +54,7 @@
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1;
text-transform: capitalize;
}
#collections-container aside ul li a span.app-badge {
flex: 0 0 auto;
......@@ -94,6 +95,9 @@
background-repeat: no-repeat;
background-size: contain;
}
#collections-container #collections-switch-view figure i .MuiSvgIcon-root {
font-size: inherit;
}
#collections-container #collections-switch-view div.item-main {
flex: 1 1 auto;
padding: 0 1em;
......@@ -101,10 +105,6 @@
#collections-container #collections-switch-view nav.actions {
flex: 0 0 auto;
}
#collections-container #collections-switch-view nav.actions :host {
display: inline-block;
line-height: 1;
}
#collections-container #collections-switch-view nav.actions button {
-webkit-appearance: none;
appearance: none;
......@@ -133,3 +133,11 @@
#collections-container #collections-switch-view nav.actions button + button {
margin-left: 3px;
}
#collections-container #collections-switch-view .progress-bar-container {
display: inline-block;
width: 100%;
margin: 0.5em 0;
}
#collections-container #collections-switch-view .progress-bar-container progress {
width: 100%;
}
......@@ -50,6 +50,7 @@
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1;
text-transform:capitalize;
}
span.app-badge {
......@@ -96,6 +97,12 @@
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
i {
.MuiSvgIcon-root {
font-size:inherit;
}
}
}
div.item-main {
......@@ -105,12 +112,6 @@
nav.actions {
flex: 0 0 auto;
:host {
display: inline-block;
line-height: 1;
}
button {
-webkit-appearance: none;
......@@ -146,5 +147,14 @@
}
.progress-bar-container {
display: inline-block;
width: 100%;
margin: 0.5em 0;
progress {
width:100%;
}
}
}
}
\ No newline at end of file
......@@ -45,21 +45,31 @@ nav#menu-bar #main-menu > li > button {
}
nav#menu-bar #main-menu > li > button i {
height: 24px;
position: relative;
}
nav#menu-bar #main-menu > li .app-badge {
nav#menu-bar #main-menu > li span.app-badge {
display: inline-block;
padding: 3px 6px;
border-radius: 10px;
font-size: 11px;
line-height: 1;
z-index: 1;
position: relative;
top: -36px;
left: 22px;
position: absolute;
top: -5px;
right: -12px;
font-style: initial;
}
nav#menu-bar #main-menu > li .app-badge[data-count="0"] {
display: none;
nav#menu-bar #main-menu > li span.app-badge.low-emphasis {
background-color: var(--color-active-secondary);
color: var(--color-text);
}
nav#menu-bar #main-menu > li .app-badge[data-emphasis="high"] {
z-index: 2;
nav#menu-bar #main-menu > li span.app-badge.medium-emphasis {
background-color: var(--color-information);
color: var(--color-content);
}
nav#menu-bar #main-menu > li .app-badge[data-emphasis="medium"] {
z-index: 3;
nav#menu-bar #main-menu > li span.app-badge.high-emphasis {
background-color: var(--color-important);
color: var(--color-content);
}
nav#menu-bar #main-menu > li#omnibox-menu {
display: flex;
......@@ -67,6 +77,10 @@ nav#menu-bar #main-menu > li#omnibox-menu {
flex: 1 1 auto;
justify-content: center;