Skip to content
This repository has been archived by the owner on Jan 5, 2025. It is now read-only.

Commit

Permalink
Update taskbar CSS (#129)
Browse files Browse the repository at this point in the history
  • Loading branch information
@black-backdoor
black-backdoor authored Jan 3, 2025
1 parent 1d0bae1 commit 4a23d92
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 67 deletions.
6 changes: 6 additions & 0 deletions docs/taskbar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,12 @@ The taskbar is composed of the following components:

## Properties

### Variants
The menu bar variant can be changed by adding the following classes to the menu bar element:

* `taskbar--floating` - A floating taskbar


### Position
The taskbar can be positioned by setting the `position` property in the HTML.

Expand Down
92 changes: 47 additions & 45 deletions src/css/taskbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,24 @@
--taskbar-bg-color: #1c1c1c;
}

#taskbar {
height: 50px;
background-color: var(--taskbar-bg-color);

position: absolute;
bottom: 0;

width: 100vw;
height: 55px;
padding: 8px;

.taskbar {
display: flex;
align-items: center;
justify-content: space-around;
background-color: var(--taskbar-bg-color);
position: absolute;
bottom: 0;
width: 100vw;
height: 55px;
padding: 8px;
}



/* APPS */
#taskbar .apps {
.taskbar__apps {
display: flex;
align-items: center;
align-content: flex-start;
Expand All @@ -30,52 +29,57 @@
width: 100%;
}

#taskbar .apps taskbar-app {
.taskbar__apps taskbar-app {
height: 100%;
}

#taskbar .apps .separator {
.taskbar__separator {
height: 100%;
width: 1px;
background-color: #333;
}



/* APPLETS */
#taskbar .applets {
.taskbar__applets {
display: flex;
}



/* WEATHER APPLET */
#taskbar .weather {
.taskbar__weather {
display: none;
}



/* TIME & DATE */
#taskbar .time-date {
.taskbar__time-date {
display: none;
}


/* ##### FLOAT Variant ##### */
#taskbar[design="float"] {

/* ##### FLOATING Variant ##### */
.taskbar--floating {
margin: 6px;
border-radius: 12px;
width: unset;
left: 50%;
transform: translateX(-50%);
}

#taskbar[position="bottom"][design="float"] .applets {
.taskbar[position="bottom"].taskbar--floating .taskbar__applets {
display: none;
}



/* ##### SIDE Variant ##### */
#taskbar[position="left"],
#taskbar[position="right"] {
.taskbar[position="left"],
.taskbar[position="right"] {
transform: none;
height: 80vh;
width: 50px;
Expand All @@ -86,41 +90,41 @@
}


#taskbar[position="left"] {
.taskbar[position="left"] {
left: 0;
right: unset;
}
#taskbar[position="right"] {
.taskbar[position="right"] {
right: 0;
left: unset;
}


#taskbar[position="left"] > *,
#taskbar[position="right"] > * {
.taskbar[position="left"] > *,
.taskbar[position="right"] > * {
width: 100%;
height: unset;
}

#taskbar[position="left"] .apps taskbar-app,
#taskbar[position="right"] .apps taskbar-app {
.taskbar[position="left"] .taskbar__apps taskbar-app,
.taskbar[position="right"] .taskbar__apps taskbar-app {
width: 100%;
height: unset;
}

#taskbar[position="left"] .apps .separator,
#taskbar[position="right"] .apps .separator {
.taskbar[position="left"] .taskbar__separator,
.taskbar[position="right"] .taskbar__separator {
width: 100%;
height: 1px;
}

#taskbar[position="left"] .applets,
#taskbar[position="right"] .applets {
.taskbar[position="left"] .taskbar__applets,
.taskbar[position="right"] .taskbar__applets {
display: unset;
}

#taskbar[position="left"] .applets *,
#taskbar[position="right"] .applets * {
.taskbar[position="left"] .taskbar__applets *,
.taskbar[position="right"] .taskbar__applets * {
width: 100%;
height: block;
}
Expand All @@ -129,23 +133,23 @@


/* ### BOTTOM Variant ### */
#taskbar[position="bottom"] {
.taskbar[position="bottom"] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
height: 50px;
}

#taskbar[position="bottom"] > * {
.taskbar[position="bottom"] > * {
height: 80%;
}
#taskbar[position="bottom"] > * > * {
.taskbar[position="bottom"] > * > * {
height: 100%;
}


#taskbar[position="bottom"] .apps {
.taskbar[position="bottom"] .taskbar__apps {
/* center the apps in the middle of the taskbar (ignoring other elements) */
/*
position: absolute;
Expand All @@ -163,34 +167,32 @@


/* hide power button */
#taskbar[position="bottom"] .applets button-power {
.taskbar[position="bottom"] .taskbar__applets button-power {
display: none;
}




#taskbar[position="bottom"] .weather {
.taskbar[position="bottom"] .taskbar__weather {
display: unset;
}


/* ## TASKBAR TIME ## */
#taskbar[position="bottom"] .time-date {
.taskbar[position="bottom"] .taskbar__time-date {
display: flex;
}

#taskbar .time-date {
.taskbar__time-date {
justify-content: center;
flex-direction: column;
color: white;
text-align: right;
font-size: 14px;

justify-content: center;
flex-direction: column;

user-select: none;
}

#taskbar .time-date * {
.taskbar__time-date * {
height: unset;
}
24 changes: 12 additions & 12 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
<link rel="stylesheet" href="/css/push-notifications.css">

<link rel="stylesheet" href="/css/action-menu.css">
<script src="/js/taskbar/action-menu.js"></script>
<script defer src="/js/taskbar/action-menu.js"></script>

<script src="/js/context-menu.js"></script>
<link rel="stylesheet" href="/css/context-menu.css">
Expand Down Expand Up @@ -160,23 +160,23 @@ <h3>Notifications</h3>
</div>

<!-- Taskbar -->
<div id="taskbar" position="bottom" design="center">
<div class="weather">
<div class="taskbar" position="bottom">
<div class="taskbar__weather">
<widget-weather></widget-weather>
</div>
<div class="apps">
<taskbar-app name="App Menu" icon="/assets/app-menu.svg"></taskbar-app>
<div class="separator"></div>
<div class="taskbar__apps">
<taskbar-app class="taskbar__app--menu" name="App Menu" icon="/assets/app-menu.svg"></taskbar-app>
<div class="taskbar__separator"></div>
<taskbar-app name="fullscreen" icon="/assets/expand-arrows.svg"></taskbar-app>
<taskbar-app name="about" icon="/assets/apps/about.svg"></taskbar-app>
</div>
<div class="applets">
<applet-network></applet-network>
<applet-sound></applet-sound>
<applet-battery></applet-battery>
<button-power></button-power>
<div class="taskbar__applets">
<applet-network class="taskbar__applet"></applet-network>
<applet-sound class="taskbar__applet"></applet-sound>
<applet-battery class="taskbar__applet"></applet-battery>
<button-power class="taskbar__applet"></button-power>
</div>
<div class="time-date">
<div class="taskbar__time-date">
<taskbar-clock></taskbar-clock>
</div>
</div>
Expand Down
31 changes: 21 additions & 10 deletions src/js/taskbar/action-menu.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,25 @@
document.addEventListener('DOMContentLoaded', function() {
const taskbarTime = document.querySelector('#taskbar .time-date');
(function () {
const taskbarTimeWidgets = document.querySelectorAll('.taskbar__time-date');
const actionMenu = document.querySelector('#action-menu');

taskbarTime.addEventListener('click', function() {
actionMenu.classList.toggle('open');
});
taskbarTimeWidgets.forEach((taskbarTime) => {
taskbarTime.addEventListener('click', function () {
actionMenu.classList.toggle('open');
});

document.addEventListener('mousedown', function(event) {
if (!actionMenu.contains(event.target) && !taskbarTime.contains(event.target)) {
actionMenu.classList.remove('open');
}
document.addEventListener('mousedown', function (event) {
if (!actionMenu.contains(event.target)) {
let shouldClose = true;
taskbarTimeWidgets.forEach((element) => {
if (element.contains(event.target)) {
shouldClose = false;
}
});

if (shouldClose) {
actionMenu.classList.remove('open');
}
}
});
});
});
})();

0 comments on commit 4a23d92

Please sign in to comment.