Skip to content

Commit 6c29427

Browse files
jelvehjelveh
committed
close #174 
1 parent 9bfee08 commit 6c29427

File tree

2 files changed

+204
-27
lines changed

2 files changed

+204
-27
lines changed

‎src/gui/src/UI/Settings/UIWindowSettings.js

+48-4
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,15 @@ async function UIWindowSettings(options){
3333

3434
h += `<div class="settings-container">`;
3535
h += `<div class="settings">`;
36-
// side bar
36+
// sidebar toggle
37+
h += `<button class="sidebar-toggle hidden-lg hidden-xl"><div class="sidebar-toggle-button"><span></span><span></span><span></span></div></button>`;
38+
// sidebar
3739
h += `<div class="settings-sidebar disable-user-select disable-context-menu">`;
38-
tabs.forEach((tab, i) => {
39-
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>`;
40-
});
40+
// sidebar items
41+
h += `<div class="settings-sidebar-burger disable-context-menu disable-user-select" style="background-image: url(${window.icons['menu']});"></div>`;
42+
tabs.forEach((tab, i) => {
43+
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>`;
44+
});
4145
h += `</div>`;
4246

4347
// content
@@ -123,5 +127,45 @@ async function UIWindowSettings(options){
123127
});
124128
}
125129

130+
$(document).on('mousedown', '.sidebar-toggle', function(e) {
131+
e.preventDefault();
132+
$('.settings-sidebar').toggleClass('active');
133+
$('.sidebar-toggle-button').toggleClass('active');
134+
// move sidebar toggle button
135+
setTimeout(() => {
136+
$('.sidebar-toggle').css({
137+
left: $('.settings-sidebar').hasClass('active') ? 243 : 2
138+
});
139+
}, 10);
140+
})
141+
142+
$(document).on('click', '.settings-sidebar-item', function(e) {
143+
// hide sidebar
144+
$('.settings-sidebar').removeClass('active');
145+
// move sidebar toggle button ro the right
146+
setTimeout(() => {
147+
$('.sidebar-toggle').css({
148+
left: 2
149+
});
150+
}, 10);
151+
152+
})
153+
154+
// clicking anywhere on the page will close the sidebar
155+
$(document).on('click', function(e) {
156+
// print event target class
157+
158+
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')) {
159+
$('.settings-sidebar').removeClass('active');
160+
$('.sidebar-toggle-button').removeClass('active');
161+
// move sidebar toggle button ro the right
162+
setTimeout(() => {
163+
$('.sidebar-toggle').css({
164+
left: 2
165+
});
166+
}, 10);
167+
168+
}
169+
})
126170

127171
export default UIWindowSettings

‎src/gui/src/css/style.css

+156-23
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
* along with this program. If not, see <https://www.gnu.org/licenses/>.
1818
*/
1919

20-
@font-face {
20+
@font-face {
2121
font-family: 'Inter';
2222
src: url('/fonts/Inter-Thin.ttf') format('truetype');
2323
font-weight: 100;
@@ -805,6 +805,7 @@ span.header-sort-icon img {
805805
.window-menubar:not(.window-menubar-global):empty {
806806
display: none !important;
807807
}
808+
808809
.window-menubar {
809810
display: flex;
810811
box-sizing: border-box;
@@ -815,7 +816,7 @@ span.header-sort-icon img {
815816
padding: 2px 5px;
816817
}
817818

818-
.window-menubar-global{
819+
.window-menubar-global {
819820
background-color: transparent;
820821
color: white;
821822
border-bottom: none;
@@ -825,7 +826,8 @@ span.header-sort-icon img {
825826
margin-left: 15px;
826827
padding: 0;
827828
}
828-
.window-menubar-global .window-menubar-item span{
829+
830+
.window-menubar-global .window-menubar-item span {
829831
padding: 3px 10px;
830832
font-size: 13px;
831833
border-radius: 3px;
@@ -1595,13 +1597,16 @@ span.header-sort-icon img {
15951597
display: none;
15961598
pointer-events: none;
15971599
}
1600+
15981601
.context-menu .has-open-context-menu-submenu,
15991602
.context-menu .context-menu-item-active {
16001603
border-radius: 4px;
16011604
}
1602-
.context-menu .has-open-context-menu-submenu{
1605+
1606+
.context-menu .has-open-context-menu-submenu {
16031607
background-color: #dfdfdf;
16041608
}
1609+
16051610
.context-menu .context-menu-item-active {
16061611
background-color: var(--select-color);
16071612
color: white;
@@ -2456,10 +2461,11 @@ label {
24562461
/*****************************************************
24572462
* Notification
24582463
*****************************************************/
2459-
.notification, .notification-wrapper{
2464+
.notification, .notification-wrapper {
24602465
width: 320px;
24612466
border-radius: 11px;
24622467
}
2468+
24632469
.notification {
24642470
min-height: 54px;
24652471
background: #ffffffcd;
@@ -2472,9 +2478,11 @@ label {
24722478
flex-direction: row;
24732479
pointer-events: all;
24742480
}
2475-
.notification-wrapper{
2481+
2482+
.notification-wrapper {
24762483
overflow: visible;
24772484
}
2485+
24782486
.notification-close {
24792487
position: absolute;
24802488
background: white;
@@ -2491,7 +2499,8 @@ label {
24912499
.notification:hover .notification-close {
24922500
display: block;
24932501
}
2494-
.notification-icon{
2502+
2503+
.notification-icon {
24952504
width: 40px;
24962505
margin: 10px 5px 10px 15px;
24972506
border-radius: 50%;
@@ -2500,25 +2509,30 @@ label {
25002509
align-items: center;
25012510
filter: drop-shadow(0px 0px 0.5px rgb(51, 51, 51));
25022511
}
2503-
.notification-icon img{
2512+
2513+
.notification-icon img {
25042514
width: 35px;
25052515
height: 35px;
25062516
}
2507-
.notification-title{
2517+
2518+
.notification-title {
25082519
font-size: 12px;
25092520
font-weight: 600;
25102521
}
2511-
.notification-text{
2512-
font-size: 12px;
2522+
2523+
.notification-text {
2524+
font-size: 12px;
25132525
margin-top: 4px;
25142526
}
2515-
.notification-content{
2516-
flex-grow:1;
2527+
2528+
.notification-content {
2529+
flex-grow: 1;
25172530
display: flex;
25182531
flex-direction: column;
25192532
padding: 10px;
25202533
}
2521-
.notification-container{
2534+
2535+
.notification-container {
25222536
position: absolute;
25232537
top: 40px;
25242538
right: 10px;
@@ -2527,7 +2541,7 @@ label {
25272541
pointer-events: none;
25282542
}
25292543

2530-
.notifications-close-all{
2544+
.notifications-close-all {
25312545
opacity: 0;
25322546
position: absolute;
25332547
top: 0px;
@@ -2542,16 +2556,20 @@ label {
25422556
cursor: pointer;
25432557
filter: drop-shadow(0px 0px 0.5px rgb(51, 51, 51));
25442558
}
2545-
.notifications-close-all:hover{
2559+
2560+
.notifications-close-all:hover {
25462561
background-color: #dee1e3;
25472562
}
2548-
.notification-container.has-multiple{
2563+
2564+
.notification-container.has-multiple {
25492565
pointer-events: all;
25502566
}
2551-
.notification-container.has-multiple:hover .notifications-close-all{
2567+
2568+
.notification-container.has-multiple:hover .notifications-close-all {
25522569
pointer-events: all;
25532570
opacity: 1 !important;
25542571
}
2572+
25552573
/*****************************************************
25562574
* Start
25572575
*****************************************************/
@@ -3027,12 +3045,13 @@ fieldset[name=number-code] {
30273045
border: 2px solid #CCC;
30283046
}
30293047

3030-
.launch-search-wrapper{
3031-
margin-bottom: 10px;
3032-
padding: 5px;
3048+
.launch-search-wrapper {
3049+
margin-bottom: 10px;
3050+
padding: 5px;
30333051
position: relative;
30343052
}
3035-
.device-phone .launch-search-wrapper{
3053+
3054+
.device-phone .launch-search-wrapper {
30363055
margin-top: 15px;
30373056
}
30383057

@@ -3572,7 +3591,7 @@ fieldset[name=number-code] {
35723591
background-color: #f9f9f9;
35733592
border-right: 1px solid #e0e0e0;
35743593
padding: 20px;
3575-
3594+
position: relative;
35763595
}
35773596

35783597
.settings-sidebar-item {
@@ -3996,4 +4015,118 @@ fieldset[name=number-code] {
39964015
flex-direction: row;
39974016
gap: 10px;
39984017
justify-content: flex-end;
4018+
}
4019+
4020+
/* Extra small devices (phones, less than 576px) */
4021+
@media (max-width: 575.98px) {
4022+
.hidden-xs {
4023+
display: none !important;
4024+
}
4025+
}
4026+
4027+
/* Small devices (landscape phones, 576px and up) */
4028+
@media (min-width: 576px) and (max-width: 767.98px) {
4029+
.hidden-sm {
4030+
display: none !important;
4031+
}
4032+
}
4033+
4034+
/* Medium devices (tablets, 768px and up) */
4035+
@media (min-width: 768px) and (max-width: 991.98px) {
4036+
.hidden-md {
4037+
display: none !important;
4038+
}
4039+
}
4040+
4041+
/* Large devices (desktops, 992px and up) */
4042+
@media (min-width: 992px) and (max-width: 1199.98px) {
4043+
.hidden-lg {
4044+
display: none !important;
4045+
}
4046+
}
4047+
4048+
/* Extra large devices (large desktops, 1200px and up) */
4049+
@media (min-width: 1200px) {
4050+
.hidden-xl {
4051+
display: none !important;
4052+
}
4053+
}
4054+
4055+
/* Visible classes */
4056+
.visible-xs,
4057+
.visible-sm,
4058+
.visible-md,
4059+
.visible-lg,
4060+
.visible-xl {
4061+
display: none !important;
4062+
}
4063+
4064+
@media (max-width: 575.98px) {
4065+
.visible-xs {
4066+
display: block !important;
4067+
}
4068+
.settings-sidebar {
4069+
display: none;
4070+
position: fixed;
4071+
height: 100%;
4072+
z-index: 9;
4073+
}
4074+
}
4075+
4076+
@media (min-width: 576px) and (max-width: 767.98px) {
4077+
.visible-sm {
4078+
display: block !important;
4079+
}
4080+
.settings-sidebar {
4081+
display: none;
4082+
position: fixed;
4083+
height: 100%;
4084+
z-index: 9;
4085+
}
4086+
}
4087+
4088+
@media (min-width: 768px) and (max-width: 991.98px) {
4089+
.visible-md {
4090+
display: block !important;
4091+
}
4092+
}
4093+
4094+
@media (min-width: 992px) and (max-width: 1199.98px) {
4095+
.visible-lg {
4096+
display: block !important;
4097+
}
4098+
}
4099+
4100+
@media (min-width: 1200px) {
4101+
.visible-xl {
4102+
display: block !important;
4103+
}
4104+
}
4105+
4106+
.sidebar-toggle{
4107+
position: fixed;
4108+
z-index: 9999999999;
4109+
top: 32px;
4110+
left: 2px;
4111+
border: 0;
4112+
padding-top: 5px;
4113+
padding-bottom: 5px;
4114+
}
4115+
.sidebar-toggle .sidebar-toggle-button {
4116+
height: 20px;
4117+
width: 20px;
4118+
}
4119+
4120+
.sidebar-toggle span:nth-child(1) {
4121+
margin-top: 5px;
4122+
}
4123+
4124+
.sidebar-toggle span {
4125+
border-bottom: 2px solid #858585;
4126+
display: block;
4127+
margin-bottom: 5px;
4128+
width: 100%;
4129+
}
4130+
.settings-sidebar.active {
4131+
display: block;
39994132
}

0 commit comments

Comments
 (0)