mirror of
https://github.com/HeyPuter/puter
synced 2024-11-14 22:06:00 +00:00
close #174
This commit is contained in:
Nariman Jelveh
parent
9bfee0862f
commit
6c29427e16
@ -33,8 +33,12 @@ async function UIWindowSettings(options){
|
||||
|
||||
h += `<div class="settings-container">`;
|
||||
h += `<div class="settings">`;
|
||||
// side bar
|
||||
// sidebar toggle
|
||||
h += `<button class="sidebar-toggle hidden-lg hidden-xl"><div class="sidebar-toggle-button"><span></span><span></span><span></span></div></button>`;
|
||||
// sidebar
|
||||
h += `<div class="settings-sidebar disable-user-select disable-context-menu">`;
|
||||
// sidebar items
|
||||
h += `<div class="settings-sidebar-burger disable-context-menu disable-user-select" style="background-image: url(${window.icons['menu']});"></div>`;
|
||||
tabs.forEach((tab, i) => {
|
||||
h += `<div class="settings-sidebar-item disable-context-menu disable-user-select ${i === 0 ? 'active' : ''}" data-settings="${tab.id}" style="background-image: url(${window.icons[tab.icon]});">${i18n(tab.title_i18n_key)}</div>`;
|
||||
});
|
||||
@ -123,5 +127,45 @@ async function UIWindowSettings(options){
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on('mousedown', '.sidebar-toggle', function(e) {
|
||||
e.preventDefault();
|
||||
$('.settings-sidebar').toggleClass('active');
|
||||
$('.sidebar-toggle-button').toggleClass('active');
|
||||
// move sidebar toggle button
|
||||
setTimeout(() => {
|
||||
$('.sidebar-toggle').css({
|
||||
left: $('.settings-sidebar').hasClass('active') ? 243 : 2
|
||||
});
|
||||
}, 10);
|
||||
})
|
||||
|
||||
$(document).on('click', '.settings-sidebar-item', function(e) {
|
||||
// hide sidebar
|
||||
$('.settings-sidebar').removeClass('active');
|
||||
// move sidebar toggle button ro the right
|
||||
setTimeout(() => {
|
||||
$('.sidebar-toggle').css({
|
||||
left: 2
|
||||
});
|
||||
}, 10);
|
||||
|
||||
})
|
||||
|
||||
// clicking anywhere on the page will close the sidebar
|
||||
$(document).on('click', function(e) {
|
||||
// print event target class
|
||||
|
||||
if (!$(e.target).closest('.settings-sidebar').length && !$(e.target).closest('.sidebar-toggle-button').length && !$(e.target).hasClass('sidebar-toggle-button') && !$(e.target).hasClass('sidebar-toggle')) {
|
||||
$('.settings-sidebar').removeClass('active');
|
||||
$('.sidebar-toggle-button').removeClass('active');
|
||||
// move sidebar toggle button ro the right
|
||||
setTimeout(() => {
|
||||
$('.sidebar-toggle').css({
|
||||
left: 2
|
||||
});
|
||||
}, 10);
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
export default UIWindowSettings
|
||||
@ -17,7 +17,7 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('/fonts/Inter-Thin.ttf') format('truetype');
|
||||
font-weight: 100;
|
||||
@ -805,6 +805,7 @@ span.header-sort-icon img {
|
||||
.window-menubar:not(.window-menubar-global):empty {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.window-menubar {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
@ -815,7 +816,7 @@ span.header-sort-icon img {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.window-menubar-global{
|
||||
.window-menubar-global {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
border-bottom: none;
|
||||
@ -825,7 +826,8 @@ span.header-sort-icon img {
|
||||
margin-left: 15px;
|
||||
padding: 0;
|
||||
}
|
||||
.window-menubar-global .window-menubar-item span{
|
||||
|
||||
.window-menubar-global .window-menubar-item span {
|
||||
padding: 3px 10px;
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
@ -1595,13 +1597,16 @@ span.header-sort-icon img {
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.context-menu .has-open-context-menu-submenu,
|
||||
.context-menu .context-menu-item-active {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.context-menu .has-open-context-menu-submenu{
|
||||
|
||||
.context-menu .has-open-context-menu-submenu {
|
||||
background-color: #dfdfdf;
|
||||
}
|
||||
|
||||
.context-menu .context-menu-item-active {
|
||||
background-color: var(--select-color);
|
||||
color: white;
|
||||
@ -2456,10 +2461,11 @@ label {
|
||||
/*****************************************************
|
||||
* Notification
|
||||
*****************************************************/
|
||||
.notification, .notification-wrapper{
|
||||
.notification, .notification-wrapper {
|
||||
width: 320px;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.notification {
|
||||
min-height: 54px;
|
||||
background: #ffffffcd;
|
||||
@ -2472,9 +2478,11 @@ label {
|
||||
flex-direction: row;
|
||||
pointer-events: all;
|
||||
}
|
||||
.notification-wrapper{
|
||||
|
||||
.notification-wrapper {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.notification-close {
|
||||
position: absolute;
|
||||
background: white;
|
||||
@ -2491,7 +2499,8 @@ label {
|
||||
.notification:hover .notification-close {
|
||||
display: block;
|
||||
}
|
||||
.notification-icon{
|
||||
|
||||
.notification-icon {
|
||||
width: 40px;
|
||||
margin: 10px 5px 10px 15px;
|
||||
border-radius: 50%;
|
||||
@ -2500,25 +2509,30 @@ label {
|
||||
align-items: center;
|
||||
filter: drop-shadow(0px 0px 0.5px rgb(51, 51, 51));
|
||||
}
|
||||
.notification-icon img{
|
||||
|
||||
.notification-icon img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
.notification-title{
|
||||
|
||||
.notification-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.notification-text{
|
||||
|
||||
.notification-text {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.notification-content{
|
||||
flex-grow:1;
|
||||
|
||||
.notification-content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
}
|
||||
.notification-container{
|
||||
|
||||
.notification-container {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 10px;
|
||||
@ -2527,7 +2541,7 @@ label {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.notifications-close-all{
|
||||
.notifications-close-all {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
@ -2542,16 +2556,20 @@ label {
|
||||
cursor: pointer;
|
||||
filter: drop-shadow(0px 0px 0.5px rgb(51, 51, 51));
|
||||
}
|
||||
.notifications-close-all:hover{
|
||||
|
||||
.notifications-close-all:hover {
|
||||
background-color: #dee1e3;
|
||||
}
|
||||
.notification-container.has-multiple{
|
||||
|
||||
.notification-container.has-multiple {
|
||||
pointer-events: all;
|
||||
}
|
||||
.notification-container.has-multiple:hover .notifications-close-all{
|
||||
|
||||
.notification-container.has-multiple:hover .notifications-close-all {
|
||||
pointer-events: all;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/*****************************************************
|
||||
* Start
|
||||
*****************************************************/
|
||||
@ -3027,12 +3045,13 @@ fieldset[name=number-code] {
|
||||
border: 2px solid #CCC;
|
||||
}
|
||||
|
||||
.launch-search-wrapper{
|
||||
.launch-search-wrapper {
|
||||
margin-bottom: 10px;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.device-phone .launch-search-wrapper{
|
||||
|
||||
.device-phone .launch-search-wrapper {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
@ -3572,7 +3591,7 @@ fieldset[name=number-code] {
|
||||
background-color: #f9f9f9;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
padding: 20px;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.settings-sidebar-item {
|
||||
@ -3997,3 +4016,117 @@ fieldset[name=number-code] {
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Extra small devices (phones, less than 576px) */
|
||||
@media (max-width: 575.98px) {
|
||||
.hidden-xs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
@media (min-width: 576px) and (max-width: 767.98px) {
|
||||
.hidden-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
@media (min-width: 768px) and (max-width: 991.98px) {
|
||||
.hidden-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
@media (min-width: 992px) and (max-width: 1199.98px) {
|
||||
.hidden-lg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
@media (min-width: 1200px) {
|
||||
.hidden-xl {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Visible classes */
|
||||
.visible-xs,
|
||||
.visible-sm,
|
||||
.visible-md,
|
||||
.visible-lg,
|
||||
.visible-xl {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.visible-xs {
|
||||
display: block !important;
|
||||
}
|
||||
.settings-sidebar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) and (max-width: 767.98px) {
|
||||
.visible-sm {
|
||||
display: block !important;
|
||||
}
|
||||
.settings-sidebar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991.98px) {
|
||||
.visible-md {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199.98px) {
|
||||
.visible-lg {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.visible-xl {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggle{
|
||||
position: fixed;
|
||||
z-index: 9999999999;
|
||||
top: 32px;
|
||||
left: 2px;
|
||||
border: 0;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.sidebar-toggle .sidebar-toggle-button {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.sidebar-toggle span:nth-child(1) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.sidebar-toggle span {
|
||||
border-bottom: 2px solid #858585;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
.settings-sidebar.active {
|
||||
display: block;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user