diff --git a/src/gui/src/UI/UIDesktop.js b/src/gui/src/UI/UIDesktop.js index 213753405..eec8c38bf 100644 --- a/src/gui/src/UI/UIDesktop.js +++ b/src/gui/src/UI/UIDesktop.js @@ -1708,6 +1708,8 @@ window.remove_taskbar_item = function(item){ $(item).animate({width: 0}, 200, function(){ $(item).remove(); }) + + window.recalibrate_taskbar_item_positions(); } window.enter_fullpage_mode = (el_window)=>{ diff --git a/src/gui/src/UI/UITaskbar.js b/src/gui/src/UI/UITaskbar.js index 7b3281404..155712585 100644 --- a/src/gui/src/UI/UITaskbar.js +++ b/src/gui/src/UI/UITaskbar.js @@ -237,6 +237,7 @@ async function UITaskbar(options){ } }) + window.recalibrate_taskbar_item_positions(); window.make_taskbar_sortable(); } @@ -303,4 +304,27 @@ window.make_taskbar_sortable = function(){ }); } +window.recalibrate_taskbar_item_positions = function(){ + // if this is mobile rearrange taskbar item positions based on absolute position + // taskbar items must be centered unless there is overflow. If there is overflow, the taskbar items must be left aligned + if(isMobile.phone){ + let taskbar_items = $('.taskbar-item'); + let taskbar_width = taskbar_items.length * 60; + + if(taskbar_width > window.desktop_width){ + // set taskbar items to absolute position + $('.taskbar-item').css('position', 'absolute'); + // set left position for each taskbar item + let left = 0; + for (let index = 0; index < taskbar_items.length; index++) { + const taskbar_item = taskbar_items[index]; + $(taskbar_item).css('left', left); + left += 60; + } + }else{ + $('.taskbar-item').css('position', 'unset'); + $('.taskbar').css('justify-content', 'center'); + } + } +} export default UITaskbar; \ No newline at end of file diff --git a/src/gui/src/UI/UITaskbarItem.js b/src/gui/src/UI/UITaskbarItem.js index fd293cced..31007ee9c 100644 --- a/src/gui/src/UI/UITaskbarItem.js +++ b/src/gui/src/UI/UITaskbarItem.js @@ -376,6 +376,10 @@ function UITaskbarItem(options){ } }); + if(options.append_to_taskbar){ + window.recalibrate_taskbar_item_positions(); + } + return el_taskbar_item; } diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css index 43fca3c86..416287720 100644 --- a/src/gui/src/css/style.css +++ b/src/gui/src/css/style.css @@ -2412,6 +2412,44 @@ label { } } +.device-phone .taskbar { + justify-content: center; + overflow: visible !important; + overflow-x: scroll !important; +} + +.device-phone .taskbar .taskbar-item, .device-phone .taskbar .taskbar-item-sortable-placeholder { + width: 40px !important; + height: 40px !important; + margin-right: 5px; + overflow: visible !important; + padding: 5px 5px 10px 5px; + position: absolute; +} + +.device-phone .taskbar-icon { + height: 40px; + width: 40px; +} + +/* Hide scrollbar for Chrome, Safari and Opera */ +.device-phone .taskbar ::-webkit-scrollbar { + width: 0 !important; + display: none; +} + +/* Hide scrollbar for IE, Edge and Firefox */ +.device-phone .taskbar { + -ms-overflow-style: none; + /* IE and Edge */ + scrollbar-width: none; + /* Firefox */ +} + +/***************************************************** + * Tooltip + *****************************************************/ + .ui-tooltip, .arrow:after { background-color: rgba(231, 238, 245, .92); box-shadow: none;