feat(gui): Add animation effects to the taskbar (#1365)

- Add new animation functionality to the taskbar; icons will enlarge when the mouse hovers over them
- Introduce new CSS properties and styles to support the animation effects
- Implement mouse move and leave event handling in UITaskbar
- Add UITaskBarCreateCurve and UITask components

Author: GitHubliuzhijie

src/gui/src/UI/UITaskBarCreateCurve.js

@@ -0,0 +1,24 @@
+function baseCurve(x) {
+    if (x < 0) return 0;
+    if (x > 1) return 0;
+    return Math.sin(x * Math.PI);
+}
+export function UITaskBarCreateCurve(totalXDis, topX, minY, maxY) {
+    return function curve(x) {
+        const beginX = topX - totalXDis / 2;
+        const endX = topX + totalXDis / 2;
+        if (x < beginX) return minY;
+        if (x > endX) return minY;
+        const yDis = maxY - minY;
+        return baseCurve((x - beginX) / totalXDis) * yDis + minY;
+    };
+}
+
+export function UITaskBarLayout(items, curve) {
+    for (const item of items) {
+        const rect = item.getBoundingClientRect();
+        const x = rect.x + rect.width / 2;
+        const scale = curve(x);
+        item.style.setProperty('--i', scale);
+    }
+}

src/gui/src/UI/UITaskbar.js

@@ -7,21 +7,22 @@
  * it under the terms of the GNU Affero General Public License as published
  * by the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
- * 
+ *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU Affero General Public License for more details.
- * 
+ *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
 import UITaskbarItem from './UITaskbarItem.js'
 import UIPopover from './UIPopover.js'
 import launch_app from "../helpers/launch_app.js"
+import {UITaskBarCreateCurve, UITaskBarLayout} from './UITaskBarCreateCurve.js'
 
-async function UITaskbar(options){
+async function UITaskbar(options) {
     window.global_element_id++;
 
     options = options ?? {};
@@ -34,16 +35,18 @@ async function UITaskbar(options){
         async: true,
         contentType: "application/json",
         headers: {
-            "Authorization": "Bearer "+window.auth_token
+            "Authorization": "Bearer " + window.auth_token
         },
-        success: function (apps){ 
+        success: function (apps) {
             window.launch_apps = apps;
         }
     });
 
     let h = '';
     h += `<div id="ui-taskbar_${window.global_element_id}" class="taskbar" style="height:${window.taskbar_height}px;">`;
-        h += `<div class="taskbar-sortable" style="display: flex; justify-content: center; z-index: 99999;"></div>`;
+    h += `<div class="taskbar-menu">`;
+    h += `<div class="taskbar-sortable" style="display: flex; justify-content: center;align-items: flex-end; z-index: 99999;"></div>`;
+    h += `</div>`;
     h += `</div>`;
 
 
@@ -59,9 +62,9 @@ async function UITaskbar(options){
         sortable: false,
         keep_in_taskbar: true,
         disable_context_menu: true,
-        onClick: async function(item){
+        onClick: async function (item) {
             // skip if popover already open
-            if($(item).hasClass('has-open-popover'))
+            if ($(item).hasClass('has-open-popover'))
                 return;
 
             // show popover
@@ -77,30 +80,30 @@ async function UITaskbar(options){
 
             // In the rare case that launch_apps is not populated yet, get it from the server
             // then populate the popover
-            if(!window.launch_apps || !window.launch_apps.recent || window.launch_apps.recent.length === 0){
+            if (!window.launch_apps || !window.launch_apps.recent || window.launch_apps.recent.length === 0) {
                 // get launch apps
                 window.launch_apps = await $.ajax({
                     url: window.api_origin + "/get-launch-apps?icon_size=64",
                     type: 'GET',
                     async: true,
                     contentType: "application/json",
                     headers: {
-                        "Authorization": "Bearer "+window.auth_token
+                        "Authorization": "Bearer " + window.auth_token
                     },
                 });
             }
-            
+
             let apps_str = '';
 
             apps_str += `<div class="launch-search-wrapper">`
-                apps_str += `<input style="background-image:url('${window.icons['magnifier-outline.svg']}');" class="launch-search">`;
-                apps_str += `<img class="launch-search-clear" src="${window.icons['close.svg']}">`;
+            apps_str += `<input style="background-image:url('${window.icons['magnifier-outline.svg']}');" class="launch-search">`;
+            apps_str += `<img class="launch-search-clear" src="${window.icons['close.svg']}">`;
             apps_str += `</div>`;
 
             // -------------------------------------------
             // Recent apps
             // -------------------------------------------
-            if(window.launch_apps.recent.length > 0){
+            if (window.launch_apps.recent.length > 0) {
                 // heading
                 apps_str += `<h1 class="start-section-heading start-section-heading-recent">${i18n('recent')}</h1>`;
 
@@ -109,29 +112,29 @@ async function UITaskbar(options){
                 for (let index = 0; index < window.launch_recent_apps_count && index < window.launch_apps.recent.length; index++) {
                     const app_info = window.launch_apps.recent[index];
                     apps_str += `<div title="${html_encode(app_info.title)}" data-name="${html_encode(app_info.name)}" class="start-app-card">`;
-                        apps_str += `<div class="start-app" data-app-name="${html_encode(app_info.name)}" data-app-uuid="${html_encode(app_info.uuid)}" data-app-icon="${html_encode(app_info.icon)}" data-app-title="${html_encode(app_info.title)}">`;
-                            apps_str += `<img class="start-app-icon" src="${html_encode(app_info.icon ? app_info.icon : window.icons['app.svg'])}">`;
-                            apps_str += `<span class="start-app-title">${html_encode(app_info.title)}</span>`;
-                        apps_str += `</div>`;
+                    apps_str += `<div class="start-app" data-app-name="${html_encode(app_info.name)}" data-app-uuid="${html_encode(app_info.uuid)}" data-app-icon="${html_encode(app_info.icon)}" data-app-title="${html_encode(app_info.title)}">`;
+                    apps_str += `<img class="start-app-icon" src="${html_encode(app_info.icon ? app_info.icon : window.icons['app.svg'])}">`;
+                    apps_str += `<span class="start-app-title">${html_encode(app_info.title)}</span>`;
+                    apps_str += `</div>`;
                     apps_str += `</div>`;
                 }
                 apps_str += `</div>`;
             }
             // -------------------------------------------
             // Reccomended apps
             // -------------------------------------------
-            if(window.launch_apps.recommended.length > 0){
+            if (window.launch_apps.recommended.length > 0) {
                 // heading
                 apps_str += `<h1 class="start-section-heading start-section-heading-recommended" style="${window.launch_apps.recent.length > 0 ? 'padding-top: 30px;' : ''}">${i18n('recommended')}</h1>`;
                 // apps
                 apps_str += `<div class="launch-apps-recommended">`;
                 for (let index = 0; index < window.launch_apps.recommended.length; index++) {
                     const app_info = window.launch_apps.recommended[index];
                     apps_str += `<div title="${html_encode(app_info.title)}" data-name="${html_encode(app_info.name)}" class="start-app-card">`;
-                        apps_str += `<div class="start-app" data-app-name="${html_encode(app_info.name)}" data-app-uuid="${html_encode(app_info.uuid)}" data-app-icon="${html_encode(app_info.icon)}" data-app-title="${html_encode(app_info.title)}">`;
-                            apps_str += `<img class="start-app-icon" src="${html_encode(app_info.icon ? app_info.icon : window.icons['app.svg'])}">`;
-                            apps_str += `<span class="start-app-title">${html_encode(app_info.title)}</span>`;
-                        apps_str += `</div>`;
+                    apps_str += `<div class="start-app" data-app-name="${html_encode(app_info.name)}" data-app-uuid="${html_encode(app_info.uuid)}" data-app-icon="${html_encode(app_info.icon)}" data-app-title="${html_encode(app_info.title)}">`;
+                    apps_str += `<img class="start-app-icon" src="${html_encode(app_info.icon ? app_info.icon : window.icons['app.svg'])}">`;
+                    apps_str += `<span class="start-app-title">${html_encode(app_info.title)}</span>`;
+                    apps_str += `</div>`;
                     apps_str += `</div>`;
                 }
                 apps_str += `</div>`;
@@ -141,7 +144,7 @@ async function UITaskbar(options){
             $(popover).find('.launch-popover').append(apps_str);
 
             // focus on search input only if not on mobile
-            if(!isMobile.phone)
+            if (!isMobile.phone)
                 $(popover).find('.launch-search').focus();
 
             // make apps draggable
@@ -154,12 +157,12 @@ async function UITaskbar(options){
                 distance: 5,
                 revertDuration: 100,
                 helper: 'clone',
-                cursorAt: { left: 18, top: 20 },
-                start: function(event, ui){
+                cursorAt: {left: 18, top: 20},
+                start: function (event, ui) {
                 },
-                drag: function(event, ui){
+                drag: function (event, ui) {
                 },
-                stop: function(){
+                stop: function () {
                 }
             });
         }
@@ -175,11 +178,11 @@ async function UITaskbar(options){
         sortable: false,
         keep_in_taskbar: true,
         lock_keep_in_taskbar: true,
-        onClick: function(){
+        onClick: function () {
             let open_window_count = parseInt($(`.taskbar-item[data-app="explorer"]`).attr('data-open-windows'));
-            if(open_window_count === 0){
-                launch_app({ name: 'explorer', path: window.home_path});
-            }else{
+            if (open_window_count === 0) {
+                launch_app({name: 'explorer', path: window.home_path});
+            } else {
                 return false;
             }
         }
@@ -188,7 +191,7 @@ async function UITaskbar(options){
     //---------------------------------------------
     // Add other useful apps to the taskbar
     //---------------------------------------------
-    if(window.user.taskbar_items && window.user.taskbar_items.length > 0){
+    if (window.user.taskbar_items && window.user.taskbar_items.length > 0) {
         for (let index = 0; index < window.user.taskbar_items.length; index++) {
             const app_info = window.user.taskbar_items[index];
             // add taskbar item for each app
@@ -197,13 +200,13 @@ async function UITaskbar(options){
                 app: app_info.name,
                 name: app_info.title,
                 keep_in_taskbar: true,
-                onClick: function(){
+                onClick: function () {
                     let open_window_count = parseInt($(`.taskbar-item[data-app="${app_info.name}"]`).attr('data-open-windows'));
-                    if(open_window_count === 0){
+                    if (open_window_count === 0) {
                         launch_app({
                             name: app_info.name,
-                        }) 
-                    }else{
+                        })
+                    } else {
                         return false;
                     }
                 }
@@ -215,7 +218,7 @@ async function UITaskbar(options){
     // add `Trash` to the taskbar
     //---------------------------------------------
     const trash = await puter.fs.stat(window.trash_path);
-    if(window.socket){
+    if (window.socket) {
         window.socket.emit('trash.is_empty', {is_empty: trash.is_empty});
     }
 
@@ -226,23 +229,28 @@ async function UITaskbar(options){
         sortable: false,
         keep_in_taskbar: true,
         lock_keep_in_taskbar: true,
-        onClick: function(){
+        onClick: function () {
             let open_windows = $(`.window[data-path="${html_encode(window.trash_path)}"]`);
-            if(open_windows.length === 0){
-                launch_app({ name: 'explorer', path: window.trash_path});
-            }else{
+            if (open_windows.length === 0) {
+                launch_app({name: 'explorer', path: window.trash_path});
+            } else {
                 open_windows.focusWindow();
             }
         },
-        onItemsDrop: function(items){
+        onItemsDrop: function (items) {
             window.move_items(items, window.trash_path);
         }
     })
 
     window.make_taskbar_sortable();
+
+    //---------------------------------------------
+    // Taskbar is Animation
+    //---------------------------------------------
+    window.taskbar_is_animation()
 }
 
-window.make_taskbar_sortable = function(){
+window.make_taskbar_sortable = function () {
     //-------------------------------------------
     // Taskbar is sortable
     //-------------------------------------------
@@ -251,41 +259,41 @@ window.make_taskbar_sortable = function(){
         items: '.taskbar-item-sortable:not(.has-open-contextmenu)',
         cancel: '.has-open-contextmenu',
         placeholder: "taskbar-item-sortable-placeholder",
-        helper : 'clone',
+        helper: 'clone',
         distance: 5,
         revert: 10,
-        receive: function(event, ui){
-            if(!$(ui.item).hasClass('taskbar-item')){
+        receive: function (event, ui) {
+            if (!$(ui.item).hasClass('taskbar-item')) {
                 // if app is already in taskbar, cancel
-                if($(`.taskbar-item[data-app="${$(ui.item).attr('data-app-name')}"]`).length !== 0){
+                if ($(`.taskbar-item[data-app="${$(ui.item).attr('data-app-name')}"]`).length !== 0) {
                     $(this).sortable('cancel');
                     $('.taskbar .start-app').remove();
                     return;
                 }
             }
         },
-        update: function(event, ui){
-            if(!$(ui.item).hasClass('taskbar-item')){
+        update: function (event, ui) {
+            if (!$(ui.item).hasClass('taskbar-item')) {
                 // if app is already in taskbar, cancel
-                if($(`.taskbar-item[data-app="${$(ui.item).attr('data-app-name')}"]`).length !== 0){
+                if ($(`.taskbar-item[data-app="${$(ui.item).attr('data-app-name')}"]`).length !== 0) {
                     $(this).sortable('cancel');
                     $('.taskbar .start-app').remove();
                     return;
                 }
-                
+
                 let item = UITaskbarItem({
                     icon: $(ui.item).attr('data-app-icon'),
                     app: $(ui.item).attr('data-app-name'),
                     name: $(ui.item).attr('data-app-title'),
                     append_to_taskbar: false,
                     keep_in_taskbar: true,
-                    onClick: function(){
+                    onClick: function () {
                         let open_window_count = parseInt($(`.taskbar-item[data-app="${$(ui.item).attr('data-app-name')}"]`).attr('data-open-windows'));
-                        if(open_window_count === 0){
+                        if (open_window_count === 0) {
                             launch_app({
                                 name: $(ui.item).attr('data-app-name'),
-                            }) 
-                        }else{
+                            })
+                        } else {
                             return false;
                         }
                     }
@@ -297,11 +305,26 @@ window.make_taskbar_sortable = function(){
                 window.update_taskbar();
             }
             // only proceed to update DB if the item sorted was a pinned item otherwise no point in updating the taskbar in DB
-            else if($(ui.item).attr('data-keep-in-taskbar') === 'true'){
+            else if ($(ui.item).attr('data-keep-in-taskbar') === 'true') {
                 window.update_taskbar();
             }
         },
     });
 }
 
+window.taskbar_is_animation = function () {
+    const range = 300;
+    const maxScale = 1.8;
+    const items = $('.taskbar-item');
+    const taskbar = $('.taskbar')
+    taskbar.on('mousemove', function (e) {
+        const curve = UITaskBarCreateCurve(range, e.clientX, 1, maxScale);
+        console.log(curve, 'UITaskBarCreateCurve');
+        UITaskBarLayout(items, curve)
+    })
+    taskbar.on("mouseleave", function () {
+        UITaskBarLayout(items, () => 1);
+    })
+}
+
 export default UITaskbar;