Feature Request: Make the icons in dock behave like the icons in macOS dock

[Saurav92]

Please make the icons in panel behave like macOS panel. Like if you hover on icon they will zoom in. On clicking they will jump for a little. Please see the behavior in macOS. Same thing is available in plank dock also.

[nd2s]

I don't think GNOME is supposed to mimic Mac OS.

[zapashcanon]

If you're running some Debian based distribution, you may want to use Docky, looks like it even has a Trash icon. ;)

# apt-get update && apt-get install docky

Or wait for someone to implement it in dash-to-dock. :)

[micheleg]

It's very unlikely I will ever consider implementing something like the "zoom" effect. Mocking the Mac OS X interface is out of the scope of this project. Which benefit would it bring? I understand it helps finding the launcher if you end up having a lots of them and the size is shrunk down. There is a scrolling behaviour and now even a workspace isolated option which can fix this issue. Moreover, to be honest, I personally don't like it. Same apply to the launching animation: there's already an animated feedback.

[Saurav92]

It seems its not possible to enable this effect in the dock. I tried to tweak the gnome-shell.css. Its like gnome shell does not support the css3 scale(). Not sure if any other method will work or not.

[micheleg]

Not all CSS properties are supported by the GNOME Shell toolkit. I'm afraid such effect has to be coded, also because you probably want to change the zooming depending on the actual mouse position.

[RicardoEPRodrigues]

If anyone needs the function to choose the scale of an icon here it is:

function plotOnBell(x, scale, stdD, mean) {
    if (scale === void 0) { scale = false; }
    if (stdD === void 0) { stdD = .125; }
    if (mean === void 0) { mean = 0.5; }
    //It returns values along a bell curve from 0 - 1 - 0 with an input of 0 - 1.
    if (scale) {
        return 1 / ((1 / (stdD * Math.sqrt(2 * Math.PI))) * Math.pow(Math.E, -1 * Math.pow(x - mean, 2) / (2 * Math.pow(stdD, 2))));
    }
    else {
        return ((1 / (stdD * Math.sqrt(2 * Math.PI))) * Math.pow(Math.E, -1 * Math.pow(x - mean, 2) / (2 * Math.pow(stdD, 2)))) * plotOnBell(.5, true, stdD, mean);
    }
}

Found it here https://codepen.io/zapplebee/pen/ByvmMo

[rugk]

This is a nice idea, just for style reasons. It does not matter that Mac OS also has this feature, it just looks nice… :smiley: So implementing it would be nice.

[aviwad]

damn cool! I'm with this icon scale thing! Not because it mimics macOS, but rather because I like beautiful aesthetics, and this just so happens to be one of my chosen design i rather fantasize having on the gnome shell desktop, especially now that alternatives (like Plank, docky) don't work properly in GNOME on Wayland!

edit after 2 years: wow I was weird. calling it "craposx" was such a 14 year old thing to do

[rugk]

@GNOME-IS-LIFE when they don't work, you should probably open issues in their repos since Wayland is the future-proof technology.

[aviwad]

when they don't work, you should probably open issues in their repos since Wayland is the future-proof technology.

thats not the point. Running native GNOME extensions is always better than third party applications using a custom runtime

[rugk]

Yeah maybe, but I also like Docky very much exactly because of this nice effect (which I don't care that other OSes also have - just to emphasize this again) and seeing such nice software dying just because of a new technology is very sad.🙁

[somas95]

I'm using plank instead of dash to dock just because this feature. I think it makes more responsible and easy to use the dock I don't know, but it doesn't seem specially difficult to implement, and it's a must have to many users +1 to the request

[micheleg]

@somas95 (or anybody else) please provide a reasonable implementation and I will be happy to reconsider this as an optional feature: I'm easier to convince when I don't have to do all the work by myself... Unfortunately I don't see myself putting effort into this any time soon, as I have other priorities at the moment.

[rugk]

I think @RicardoEPRodrigues already had some code, so?

[micheleg]

That's just a snippet with the equation of a gaussian, just simple math. I'm looking for a working prototype, even a dirty one to start.

[somas95]

Right now I'm in my final exams, after that I could try to analyze the implementation of this feature in plank and make a prototype for dash to dock In what language is written the extension?

El dom., 4 jun. 2017 15:02, Michele notifications@github.com escribió:

That's just a snippet with the equation of a gaussian, just simple math. I'm looking for a working prototype, even a dirty one to start.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/micheleg/dash-to-dock/issues/357#issuecomment-306038736, or mute the thread https://github.com/notifications/unsubscribe-auth/AIgEN5-mvYIlJuG5H6jy0zKJDTTVLzUVks5sAqrwgaJpZM4JfA_4 .

[micheleg]

The language is Javascript, and the graphical toolkit is Clutter/St

https://developer.gnome.org/clutter/1.26/ https://developer.gnome.org/st/stable/

[somas95]

Thanks :)

El dom., 4 jun. 2017 15:27, Michele notifications@github.com escribió:

The language is Javascript, and the graphical toolkit is Clutter/St

https://developer.gnome.org/clutter/1.26/ https://developer.gnome.org/st/stable/

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/micheleg/dash-to-dock/issues/357#issuecomment-306039981, or mute the thread https://github.com/notifications/unsubscribe-auth/AIgEN99z38yu6IjCNUQDaME1LxHcbsMZks5sArDAgaJpZM4JfA_4 .

[RicardoEPRodrigues]

I made a similar behavior using that gaussian function in a website. I used JQuery so the code doesn't translate so easily.

https://jsfiddle.net/xw1vqtzm/

It works well on chromium based browsers, it stutters a lot on Firefox. Hope this helps.

[somas95]

Well, I've investigating a little the code of plank. I think that the part responsible of the effect is this: (lines 770-872 https://git.launchpad.net/plank/tree/lib/PositionManager.vala)

// ZoomPercent is a number greater than 1. It should never be less than one.

        // zoom_in_percent is a range of 1 to ZoomPercent.
        // We need a number that is 1 when ZoomIn is 0, and ZoomPercent when ZoomIn is 1.
        // Then we treat this as if it were the ZoomPercent for the rest of the calculation.
        bool expand_for_drop = (controller.drag_manager.ExternalDragActive && !prefs.LockItems);
        bool zoom_enabled = prefs.ZoomEnabled;
        double zoom_in_progress = (zoom_enabled || expand_for_drop ? renderer.zoom_in_progress : 0.0);
        double zoom_in_percent = (zoom_enabled ? 1.0 + (ZoomPercent - 1.0) * zoom_in_progress : 1.0);
        double zoom_icon_size = ZoomIconSize;

        foreach (unowned DockItem item in items) {
            DockItemDrawValue val = new DockItemDrawValue ();
            val.opacity = 1.0;
            val.darken = 0.0;
            val.lighten = 0.0;
            val.show_indicator = true;
            val.zoom = 1.0;

            val.static_center = center;

            // get us some handy doubles with fancy names
            double cursor_position = cursor.x;
            double center_position = center.x;

            // offset from the center of the true position, ranged between 0 and the zoom size
            double offset = double.min (Math.fabs (cursor_position - center_position), zoom_icon_size);

            double offset_percent;
            if (expand_for_drop) {
                // Provide space for dropping between items
                offset += offset * zoom_icon_size / icon_size;
                offset_percent = double.min (1.0, offset / (2.0 * zoom_icon_size));
            } else {
                offset_percent = offset / zoom_icon_size;
            }

            if (offset_percent > 0.99)
                offset_percent = 1.0;

            // pull in our offset to make things less spaced out
            // explaination since this is a bit tricky...
            // we have three terms, basically offset = f(x) * h(x) * g(x)
            // f(x) == offset identity
            // h(x) == a number from 0 to DockPreference.ZoomPercent - 1.  This is used to get the smooth "zoom in" effect.
            //         additionally serves to "curve" the offset based on the max zoom
            // g(x) == a term used to move the ends of the zoom inward.  Precalculated that the edges should be 66% of the current
            //         value. The center is 100%. (1 - offset_percent) == 0,1 distance from center
            // The .66 value comes from the area under the curve.  Dont ask me to explain it too much because it's too clever for me.

            if (expand_for_drop)
                offset *= zoom_in_progress / 2.0;
            else
                offset *= zoom_in_percent - 1.0;
            offset *= 1.0 - offset_percent / 3.0;

            if (cursor_position > center_position)
                center_position -= offset;
            else
                center_position += offset;

            // zoom is calculated as 1 through target_zoom (default 2).
            // The larger your offset, the smaller your zoom

            // First we get the point on our curve that defines our current zoom
            // offset is always going to fall on a point on the curve >= 0
            var zoom = 1.0 - Math.pow (offset_percent, 2);

            // scale this to match our zoom_in_percent
            zoom = 1.0 + zoom * (zoom_in_percent - 1.0);

            double zoomed_center_height = (icon_size * zoom / 2.0);

            if (zoom == 1.0)
                center_position = Math.round (center_position);

            val.center = { center_position, zoomed_center_height };
            val.zoom = zoom;
            val.icon_size = Math.round (zoom * icon_size);

            // now we undo our transforms to the point
            if (!is_horizontal_dock ()) {
                double tmp = val.center.y;
                val.center.y = val.center.x;
                val.center.x = tmp;

                tmp = val.static_center.y;
                val.static_center.y = val.static_center.x;
                val.static_center.x = tmp;
            }

            switch (Position) {
            case Gtk.PositionType.RIGHT:
                val.center.x = height - val.center.x;
                val.static_center.x = height - val.static_center.x;
                break;
            case Gtk.PositionType.BOTTOM:
                val.center.y = height - val.center.y;
                val.static_center.y = height - val.static_center.y;
                break;
            default:
                break;
            }

[RicardoEPRodrigues]

Any news on this feature being implemented?

[imyxh]

I'm sure you already know this, but please make this behaviour possible to disable.

[Nebrit]

Please develop as option @micheleg and Any news on this feature being implemented?

[jmaris]

Still curious about this too, any updates ? i saw a pull request but it hasn't been accepted so far

Edit: apologies, I actually commented on the wrong issue, my message can be safely ignored

[micheleg]

@jmaris If there were a pull request I missed it. No updates on my side.

[ghost]

function plotOnBell(x, scale, stdD, mean) { if (scale === void 0) { scale = false; } if (stdD === void 0) { stdD = .125; } if (mean === void 0) { mean = 0.5; } //It returns values along a bell curve from 0 - 1 - 0 with an input of 0 - 1. if (scale) { return 1 / ((1 / (stdD Math.sqrt(2 Math.PI))) Math.pow(Math.E, -1 Math.pow(x - mean, 2) / (2 Math.pow(stdD, 2)))); } else { return ((1 / (stdD Math.sqrt(2 Math.PI))) Math.pow(Math.E, -1 Math.pow(x - mean, 2) / (2 Math.pow(stdD, 2)))) * plotOnBell(.5, true, stdD, mean); } } where to paste this code snippet for hover effect in launcher

[rugk]

BTW you can highlight code snippets in MArkdown/on GitHub by using ```. See https://guides.github.com/features/mastering-markdown/

But also, where do you have this code from?

[RicardoEPRodrigues]

@salomonhome @rugk I have previously written an example with this code. It's in an early comment.

https://jsfiddle.net/xw1vqtzm/

That piece of code is just a simple example that returns a scale given an X in pure JS.

[nunezfrnc]

Can this feature be inserted in dash to dock and if it can, where would these lines of code be inserted?

[RicardoEPRodrigues]

From what I read in the code, I think a good location to place the resize code should be in dash.js function _redisplay. https://github.com/micheleg/dash-to-dock/blob/842ba27266807a6b25e231b28cee3fdddea30f1d/dash.js#L696

Although I might be mistaken, since I don't know the code that well.

I also thing the resize code should go something like this:

let children = this._box.get_children().filter(function(actor) {
    return actor.child &&
           actor.child._delegate &&
           actor.child._delegate.app;
});

for (let i = 0; i < iconChildren.length; i++) {
    let icon = iconChildren[i].child._delegate.icon;
    let scale = /* Determine what scale to use depending on mouse position and the bell curve */
    icon.setIconSize(this.iconSize * scale);
}

_adjustIconSize is also a good function to explore, it uses tween for resize animations. https://github.com/micheleg/dash-to-dock/blob/842ba27266807a6b25e231b28cee3fdddea30f1d/dash.js#L589

[nunezfrnc]

thanks, but I don't see the zoom effect after hovering the icon in dash

[RicardoEPRodrigues]

Unless someone implements it, you won't see it. I just tried to help those that want to try to implement it.

I would have to spend a lot of time testing and testing the code before having it working. If some dev wants to try something out, it would be awesome.

[Nebrit]

Please develop @micheleg

[rugk]

@Nebrit I'd also like to see this feature being done, that is for sure, but calling for it like that sounds a little rude, I have to say. As with any FLOSS projects, people (including yourself) could implement it by themselves, and send a PR. (of course, theoretical, I know :smile: So please stay friendly and be excellent to each other. :smiley:

[DJTrumpDaddy]

Please develop @micheleg

@Nebrit, I'm sure Michele has many other projects to tend to in cyberspace and in life. I'm sure you mean no harm in your request, but this is a free and open-source project maintained largely if not entirely by one person. It makes sense to badger about lack-of-features with a multi-billion-dollar corporation that has enormous human and software development resources, but not so much in this space.

Here, we take what we get, learn about it, and perhaps improve on it with our own contributions. We learn, grow, and develop each others' projects to fit our needs and pass it on. That's the spirit of open-source.

[jaeming]

I'm calling this out as an a11y feature and a "must have" if you care about a11y. I should not have my dock taking 1/8th of my screen to be able to pick out the icon. smaller icon but better visibility on attempted select is great UX. Forget that this was first seen is osx. That's not relevant to the value it provides.

[rodolf0]

I got a hacky implementation of this: https://gist.github.com/rodolf0/c76e167651ecbd034c21b4fb1a008674

Mechanics works OK but... there's some icon flickering and probably some animations break :-o .. you can basically call it garbage but its a working first attempt. It'd need the polish of someone who knows the code a bit more to see where the screwups are.

[rodolf0]

New patch: https://gist.github.com/rodolf0/de8c733f0fb991e8d0aa368096afd2c3 This one doesn't flicker cause it doesn't re-create icons it just scales them.

It still needs a workaround to avoid all non-zoomed icons from vibrating because of the exchange in zoom as mouse hovers from an icon to the next.

[rodolf0]

OK, another patch: https://gist.github.com/rodolf0/f5d758f4a19af3651ab120a7c568efc3 this one is much smoother ... still needs tieing the config GUI and there's some layout minor quirks

[hnihsan]

OK, another patch: https://gist.github.com/rodolf0/f5d758f4a19af3651ab120a7c568efc3 this one is much smoother ... still needs tieing the config GUI and there's some layout minor quirks

hello @rodolf0 , how to apply these tweak ?

[rodolf0]

OK, another patch: https://gist.github.com/rodolf0/f5d758f4a19af3651ab120a7c568efc3 this one is much smoother ... still needs tieing the config GUI and there's some layout minor quirks

hello @rodolf0 , how to apply these tweak ?

Hey @hnihsan you just need a checkout of the dash-to-dock extension from this repo and apply the patch.... something like $ patch -p1 < smooth-dock-zoom.diff

See attached GIF for how it looks

[shirkerohit]

Looks awesome.. can this make it in dash-to-dock repo??😅 it's a nice UI addon!

[rodolf0]

Looks awesome.. can this make it in dash-to-dock repo??sweat_smile it's a nice UI addon!

Dunno. I don't think it works smooth enough or is good enough quality to just submit a plain pull request. I'd need someone with more understanding of the whole extension to integrate it in a cleaner way. This is just a proof of concept. @micheleg any thoughts?

[RaghavRao]

This is near perfect for me. The only three bugs I see are:

1) Applications button is not inline with the rest 2) The background box also grows to fit the largest icon instead of staying fixed size. 3) The dock stays up with the icons scrolling even when the mouse is far above the dock

Apart from that, there are no bugs so far.

One other suggestion is to add some padding between icons such that the padding + hovered icon + the adjacent icons is constant. Currently when the mouse is between two icons, two icons are larger, pushing the icons at the end outwards, which then come back inwards when the focus is on only one icon. This means that as you move quickly across icons, all the icons jitter sideways between when two icons are large, vs when only one icon is large.

[ebrensi]

Wow @rodolf0 I was not expecting to see node.

[rugk]

So when can we expect to see a PR (being merged :thinking:)?

[diegolpedro]

Looks awesome.. can this make it in dash-to-dock repo??sweat_smile it's a nice UI addon!

Dunno. I don't think it works smooth enough or is good enough quality to just submit a plain pull request. I'd need someone with more understanding of the whole extension to integrate it in a cleaner way. This is just a proof of concept. @micheleg any thoughts?

Yo creo que va genial. Le sacaria la redimension del box, como decian por ahi, y le haria el pull request para que lo agreguen. Esta genial!!

[zachbryant]

OK, another patch: https://gist.github.com/rodolf0/f5d758f4a19af3651ab120a7c568efc3 this one is much smoother ... still needs tieing the config GUI and there's some layout minor quirks

hello @rodolf0 , how to apply these tweak ?

Hey @hnihsan you just need a checkout of the dash-to-dock extension from this repo and apply the patch.... something like $ patch -p1 < smooth-dock-zoom.diff

See attached GIF for how it looks

snip

This is awesome work. Can you share which hash you patched it on? Tried cloning /tmp/gnome-3.36 but I had to apply some of the patch manually. It turned out unstable the way I did it.

Again, awesome job bringing this to dash-to-dock. I'll keep an eye out for your PR :)

[rodolf0]

This is awesome work. Can you share which hash you patched it on? Tried cloning /tmp/gnome-3.36 but I had to apply some of the patch manually. It turned out unstable the way I did it.

Again, awesome job bringing this to dash-to-dock. I'll keep an eye out for your PR :)

I don't recall exactly but since https://gist.github.com/rodolf0/f5d758f4a19af3651ab120a7c568efc3 was created around Feb 20th 2020 I'd guess master branch around that date.

[mattiasghodsian]

Any info on when this will be added?