Cinnamon app menu a mess.

Please post suggestions for improvement of Cinnamon here
https://github.com/linuxmint/Cinnamon
Post Reply
violent23
Level 1
Level 1
Posts: 15
Joined: Sun Sep 05, 2010 10:23 pm

Cinnamon app menu a mess.

Post by violent23 » Mon Jan 28, 2013 5:48 pm

Why are the apps in Administration duplicated in Preferences? What makes it even worse is that the menu editor cannot edit these two categories.

It is very redundant to have the Administration tab in the app menu when all those apps are already listed under the Preferences tab.

Pablo Pablo
Level 1
Level 1
Posts: 5
Joined: Thu Nov 22, 2012 2:59 pm

Re: Cinnamon app menu a mess.

Post by Pablo Pablo » Tue Jan 29, 2013 6:21 am

*very* redundant? :D

User avatar
roblm
Level 8
Level 8
Posts: 2420
Joined: Sun Feb 24, 2013 2:41 pm

Re: Cinnamon app menu a mess.

Post by roblm » Sun Feb 24, 2013 5:36 pm

Update for Mint 18.3 Cinnamon:

I have added information on how to edit the Mint 18.3 Cinnamon menu and panel to my last post in this topic.



This is also one of my main gripes with Cinnamon 1.6.7. The Preferences category is especially bad. Besides it's own separate apps and apps found in other categories, it individually lists all 15 of the apps found in Cinnamon Settings and the 14 apps found in System Settings and of course these are all repeated in the All Applications category. This would be alright if the Preferences and Administration categories could be edited. I like to tweak my menus to be as compact as possible. To my knowledge they could be edited in past versions using Alacarte. I even tried other menu editors like Mozo and Kmenuedit, knowing they probably wouldn't work. My solution was to eliminate the Preferences category. To do this go to "/etc/xdg/menus". Open as root the file "cinnamon-setting.menu". Delete the 10 lines starting with "<- Merge in these other files as submenus ->" up to "</Menu>". Then delete the resulting extra spaces between lines so that there is only one space. Be sure the line "<!- System Settings ->" lines up with the line "<DefaulMergeDirs/>" on the left side. Go down the list and under "<Layout>" delete the line "<Menuname>Preferences</Menuname>". Close the space that forms. Save the new settings and close the file. Do not delete this file hoping to eliminate both the Preferences and Administration categories or your menu will be unusable. Restart Cinnamon and the Preferences category should be gone. Also, all the apps listed under it will disappear from the All Applications category.
Now you will need to replace any removed apps that you may need to access. I added "Cinnamon Settings" and "Startup Applications" to the "System Tools" category. To do this I right clicked the menu button and selected "edit menu". I highlighted "System Tools" on the left and clicked "New Item" on the right. In the "Create Launcher" window I typed "Cinnamon Settings" under "name". For the "command" line, I temporarily left this window open and opened the file manager and went to "/usr/share/applications". I right clicked on "Cinnamon Settings" and selected "properties". I copied the words in the "command" line, which were "cinnamon-settings", and pasted them into the "command" line in the "Create Launcher" window. I then clicked on the icon and selected "icons" on the left and then on the right selected Mint-X>categories>24>gnome-system.png. Click "open" and OK. I repeated the process for the "Startup Applications" app except for the icon I went to icons/Mint-X/apps/24/gnome-session.png. For any other apps in the Administration category you want to remove, then here is a solution. Go to "/usr/share" and create a new folder named "applications-2". Open as root "/usr/share/applications" and move any apps you won't need to open over to the applications-2 folder. I moved "User Accounts" and "Windows Wireless Drivers" as I will not have any immediate need to use them. To make my menu even more compact, I replaced the default Cinnamon Menu with the "Simpler Menu" by downloading the Simpler Menu applet. It eliminates the Quit, Logout and Lock Screen buttons on the menu. I prefer one single button that contains all the options when clicked. I downloaded the "Quit" applet to replace these 3 buttons and it was installed on the panel directly under the menu. This freed up more space for adding other apps to the favorites section of the menu and lowers the height significantly for short mouse movements. I also removed the "Places" category that came with the Simpler Menu by editing the "applets.js" file that came with it. I am very happy with the new compact menu and each category has no more than 6 apps listed in them and there is no need for scrolling in them except for the All Applications category, which now only has 21 apps. I want to emphasize the point that if you decide to follow this procedure, then you do so at your own risk. First make a copy of the “cinnamon-settings.menu” file in case something goes wrong. I have VirtualBox installed on my computer and I then installed Linux Mint 14 Cinnamon in a virtual environment to test out the procedure before making any permanent changes. I have not experienced any problems yet but I made the changes only two days ago.

This is an update to this message. There is now a better solution to this problem. See my February 27th message below.
Last edited by roblm on Wed Feb 14, 2018 5:41 pm, edited 9 times in total.

User avatar
roblm
Level 8
Level 8
Posts: 2420
Joined: Sun Feb 24, 2013 2:41 pm

Re: Cinnamon app menu a mess.

Post by roblm » Sun Feb 24, 2013 6:25 pm

Screenshot 11.png
Preferences category removed.
Screenshot 12.png
Unused applications moved out of Administration category.
Screenshot 13.png
Quit applet.
Last edited by roblm on Tue Mar 05, 2013 9:21 pm, edited 4 times in total.

violent23
Level 1
Level 1
Posts: 15
Joined: Sun Sep 05, 2010 10:23 pm

Re: Cinnamon app menu a mess.

Post by violent23 » Sun Feb 24, 2013 11:06 pm

roblm wrote:This is also one of my main gripes with Cinnamon 1.6. The Preferences category is especially bad. Besides listing apps found in other categories, it individually lists all 15 of the apps found in Cinnamon Settings and the 14 apps found in System Settings and of course these are all repeated in the All Applications category. This would be alright if the Preferences and Administration categories could be edited. I like to tweak my menus to be as compact as possible. To my knowledge they could be edited in past versions using Alacarte. I even tried other menu editors like Mozo and Kmenuedit, knowing they probably wouldn't work. My solution was to eliminate the Preferences category. To do this go to "/etc/xdg/menus". Open as root the file "cinnamon-setting.menu". Delete the 10 lines starting with "<- Merge in these other files as submenus ->" up to "</Menu>". Then delete the resulting extra spaces between lines so that there is only one space. Be sure the line "<!- System Settings ->" lines up with the line "<DefaulMergeDirs/>" on the left side. Go down the list and under "<Layout>" delete the line "<Menuname>Preferences</Menuname>". Close the space that forms. Save the new settings and close the file. Do not delete this file hoping to eliminate both the Preferences and Administration categories or your menu will be unusable. Restart Cinnamon and the Preferences category should be gone. Also, all the apps listed under it will disappear from the All Applications category.
Now you will need to replace any removed apps that you may need to access. I added "Cinnamon Settings" and "Startup Applications" to the "System Tools" category. To do this I right clicked the menu button and selected "edit menu". I highlighted "System Tools" on the left and clicked "New Item" on the right. In the "Create Launcher" window I typed "Cinnamon Settings" under "name". For the "command" line, I temporarily left this window open and opened the file manager and went to "/usr/share/applications". I right clicked on "Cinnamon Settings" and selected "properties". I copied the words in the "command" line, which were "cinnamon-settings", and pasted them into the "command" line in the "Create Launcher" window. I then clicked on the icon and selected "icons" on the left and then on the right selected Mint-X>categories>24>gnome-system.png. Click "open" and OK. I repeated the process for the "Startup Applications" app except for the icon I went to icons/Mint-X/apps/24/gnome-session.png. For any other apps in the Administration category you want to remove, then here is a solution. Go to "/usr/share" and create a new folder named "applications-2". Open as root "/usr/share/applications" and move any apps you won't need to open over to the applications-2 folder. I moved "User Accounts" and "Windows Wireless Drivers" as I will not have any immediate need to use them. To make my menu even more compact, I replaced the default Cinnamon Menu with the "Simpler Menu" by downloading the Simpler Menu applet. It eliminates the Quit, Logout and Lock Screen buttons on the menu. I prefer one single button that contains all the options when clicked. I downloaded the "Quit" applet to replace these 3 buttons and it was installed on the panel directly under the menu. This freed up more space for adding other apps to the favorites section of the menu and lowers the height significantly for short mouse movements. I also removed the "Places" category that came with the Simpler Menu by editing the "applets.js" file that came with it. I am very happy with the new compact menu and each category has no more than 6 apps listed in them and there is no need for scrolling in them except for the All Applications category, which now only has 21 apps. I want to emphasize the point that if you decide to follow this procedure, then you do so at your own risk. First make a copy of the “cinnamon-settings.menu” file in case something goes wrong. I have VirtualBox installed on my computer and I then installed Linux Mint 14 Cinnamon in a virtual environment to test out the procedure before making any permanent changes. I have not experienced any problems yet but I made the changes only two days ago. Check out the attached picture of the new menu.
Wow, very useful tips, thanks.

I too use Simpler Menu and the Quit applet. If you wouldn't mind sharing a little bit more depth, what did you edit out of the applets.js for Simpler Menu. If it is too hard to explain could you upload the edited applets.js for me to replace mine as I too do not like the places category.

User avatar
roblm
Level 8
Level 8
Posts: 2420
Joined: Sun Feb 24, 2013 2:41 pm

Re: Cinnamon app menu a mess.

Post by roblm » Mon Feb 25, 2013 5:51 pm

To remove the Places category in the Simpler Menu delete 13 lines of code in the first quarter of the applet.js file, from the line
“function PlaceCategoryButton(app) {“
up to and including the line
“Signals.addSignalMethods(PlaceCategoryButton.prototype);”
and the brackets and spaces between these lines. There should then be a space between the line
“Signals.addSignalMethods(CategoryButton.prototype);”
and the line
“function FavoritesButton(appsMenuButton, app, nbFavorites) {“.

Then go down to the last quarter of the file and delete 14 more lines of code, from the line
“this.placesButton = new PlaceCategoryButton();”
up to and including the line
“this.categoriesBox.add_actor(this.placesButton.actor);”
and the brackets and spaces between these lines. There should then be a space between the line
“this._refreshApps();”
and the line
“this.selectedAppBox = new St.BoxLayout({ style_class: 'menu-selected-app-box', vertical: true });”.

Save the settings and close the file. Restart Cinnamon.


Modified "applets.js" file for Simpler Menu is below.

Code: Select all

const Applet = imports.ui.applet;
const Mainloop = imports.mainloop;
const GMenu = imports.gi.GMenu;
const Lang = imports.lang;
const Cinnamon = imports.gi.Cinnamon;
const St = imports.gi.St;
const Clutter = imports.gi.Clutter;
const Main = imports.ui.main;
const PopupMenu = imports.ui.popupMenu;
const AppFavorites = imports.ui.appFavorites;
const Gtk = imports.gi.Gtk;
const Gio = imports.gi.Gio;
const Signals = imports.signals;
const GnomeSession = imports.misc.gnomeSession;
const ScreenSaver = imports.misc.screenSaver;
const FileUtils = imports.misc.fileUtils;
const Util = imports.misc.util;
const Tweener = imports.ui.tweener;
const DND = imports.ui.dnd;
const Meta = imports.gi.Meta;

const ICON_SIZE = 16;
const MAX_FAV_ICON_SIZE = 32;
const CATEGORY_ICON_SIZE = 22;
const APPLICATION_ICON_SIZE = 22;

const USER_DESKTOP_PATH = FileUtils.getUserDesktopDir();

let appsys = Cinnamon.AppSystem.get_default();

function ApplicationContextMenuItem(appButton, label, action) {
    this._init(appButton, label, action);
}

ApplicationContextMenuItem.prototype = {
    __proto__: PopupMenu.PopupBaseMenuItem.prototype,

    _init: function (appButton, label, action) {
        PopupMenu.PopupBaseMenuItem.prototype._init.call(this, {focusOnHover: false});

        this._appButton = appButton;
        this._action = action;
        this.label = new St.Label({ text: label });
        this.addActor(this.label);
    },

    activate: function (event) {
        switch (this._action){
            case "add_to_panel":
                let settings = new Gio.Settings({ schema: 'org.cinnamon' });
                let desktopFiles = settings.get_strv('panel-launchers');
                desktopFiles.push(this._appButton.app.get_id());
                settings.set_strv('panel-launchers', desktopFiles);
                break;
            case "add_to_desktop":
                let file = Gio.file_new_for_path(this._appButton.app.get_app_info().get_filename());
                let destFile = Gio.file_new_for_path(USER_DESKTOP_PATH+"/"+this._appButton.app.get_id());
                try{
                    file.copy(destFile, 0, null, function(){});
                    // Need to find a way to do that using the Gio library, but modifying the access::can-execute attribute on the file object seems unsupported
                    Util.spawnCommandLine("chmod +x \""+USER_DESKTOP_PATH+"/"+this._appButton.app.get_id()+"\"");
                }catch(e){
                    global.log(e);
                }
                break;
            case "add_to_favorites":
                AppFavorites.getAppFavorites().addFavorite(this._appButton.app.get_id());
                break;
            case "remove_from_favorites":
                AppFavorites.getAppFavorites().removeFavorite(this._appButton.app.get_id());
                break;
        }
        this._appButton.actor.grab_key_focus();
        this._appButton.toggleMenu();
        return false;
    }

};

function GenericApplicationButton(appsMenuButton, app) {
    this._init(appsMenuButton, app);
}

GenericApplicationButton.prototype = {
    __proto__: PopupMenu.PopupSubMenuMenuItem.prototype,
    
    _init: function(appsMenuButton, app, withMenu) {
        this.app = app;
        this.appsMenuButton = appsMenuButton;
        PopupMenu.PopupBaseMenuItem.prototype._init.call(this, {hover: false});
        
        this.withMenu = withMenu;
        
        if (this.withMenu){
            this.menu = new PopupMenu.PopupSubMenu(this.actor);
            this.menu.actor.set_style_class_name('menu-context-menu');
            this.menu.connect('open-state-changed', Lang.bind(this, this._subMenuOpenStateChanged));
        }
    },
    
    _onButtonReleaseEvent: function (actor, event) {
        if (event.get_button()==1){
            this.activate(event);
        }
        if (event.get_button()==3){
            this.appsMenuButton.closeApplicationsContextMenus(this.app, true);
            this.toggleMenu();
        }
        return true;
    },
    
    activate: function(event) {
        this.app.open_new_window(-1);
        this.appsMenuButton.menu.close();
    },
    
    closeMenu: function() {
        if (this.withMenu) this.menu.close();
    },
    
    toggleMenu: function() {
        if (!this.withMenu) return;
        
        if (!this.menu.isOpen){
            let children = this.menu.box.get_children();
            for (var i in children){
                children[i].destroy();
            }
            let menuItem;
            menuItem = new ApplicationContextMenuItem(this, _("Add to panel"), "add_to_panel");
            this.menu.addMenuItem(menuItem);
            if (USER_DESKTOP_PATH){
                menuItem = new ApplicationContextMenuItem(this, _("Add to desktop"), "add_to_desktop");
                this.menu.addMenuItem(menuItem);
            }
            if (AppFavorites.getAppFavorites().isFavorite(this.app.get_id())){
                menuItem = new ApplicationContextMenuItem(this, _("Remove from favorites"), "remove_from_favorites");
                this.menu.addMenuItem(menuItem);
            }else{
                menuItem = new ApplicationContextMenuItem(this, _("Add to favorites"), "add_to_favorites");
                this.menu.addMenuItem(menuItem);
            }
        }
        this.menu.toggle();
    },
    
    _subMenuOpenStateChanged: function() {
        if (this.menu.isOpen) this.appsMenuButton._scrollToButton(this.menu);
    }
}

function ApplicationButton(appsMenuButton, app) {
    this._init(appsMenuButton, app);
}

ApplicationButton.prototype = {
    __proto__: GenericApplicationButton.prototype,
    
    _init: function(appsMenuButton, app) {
        GenericApplicationButton.prototype._init.call(this, appsMenuButton, app, true);

        this.actor.add_style_class_name('menu-application-button');
        this.icon = this.app.create_icon_texture(APPLICATION_ICON_SIZE);
        this.addActor(this.icon);
        this.label = new St.Label({ text: this.app.get_name(), style_class: 'menu-application-button-label' });
        this.addActor(this.label);
        
        this._draggable = DND.makeDraggable(this.actor);
        this.isDraggableApp = true;
    },
    
    get_app_id: function() {
        return this.app.get_id();
    },
    
    getDragActor: function() {
        let favorites = AppFavorites.getAppFavorites().getFavorites();
        let nbFavorites = favorites.length;
        let monitorHeight = Main.layoutManager.primaryMonitor.height;
        let real_size = (0.7*monitorHeight) / nbFavorites;
        let icon_size = 0.6*real_size;
        if (icon_size>MAX_FAV_ICON_SIZE) icon_size = MAX_FAV_ICON_SIZE;
        return this.app.create_icon_texture(icon_size);
    },

    // Returns the original actor that should align with the actor
    // we show as the item is being dragged.
    getDragActorSource: function() {
        return this.actor;
    }
};
Signals.addSignalMethods(ApplicationButton.prototype);

function PlaceButton(appsMenuButton, place, button_name) {
    this._init(appsMenuButton, place, button_name);
}

PlaceButton.prototype = {
    _init: function(appsMenuButton,place, button_name) {
this.place = place;
        this.button_name = button_name;
        this.actor = new St.Button({ reactive: true, label: this.button_name, style_class: 'menu-application-button', x_align: St.Align.START });
        this.actor._delegate = this;
        this.buttonbox = new St.BoxLayout();
        this.label = new St.Label({ text: this.button_name, style_class: 'menu-application-button-label' });
        this.icon = place.iconFactory(APPLICATION_ICON_SIZE);
        this.buttonbox.add_actor(this.icon);
        this.buttonbox.add_actor(this.label);
        this.actor.set_child(this.buttonbox);
        this.actor.connect('clicked', Lang.bind(this, function() {
this.place.launch();
            appsMenuButton.menu.close();
}));
    }
};
Signals.addSignalMethods(PlaceButton.prototype);

function CategoryButton(app) {
    this._init(app);
}

CategoryButton.prototype = {
    _init: function(category) {
        var label;
if (category){
           let icon = category.get_icon();
           if (icon && icon.get_names)
               this.icon_name = icon.get_names().toString();
           else
               this.icon_name = "";
           label = category.get_name();
        }else label = _("All Applications");
        this.actor = new St.Button({ reactive: true, label: label, style_class: 'menu-category-button', x_align: St.Align.START });
        this.actor._delegate = this;
        this.buttonbox = new St.BoxLayout();
        this.label = new St.Label({ text: label, style_class: 'menu-category-button-label' });
        if (category && this.icon_name){
           this.icon = new St.Icon({icon_name: this.icon_name, icon_size: CATEGORY_ICON_SIZE, icon_type: St.IconType.FULLCOLOR});
           this.buttonbox.add_actor(this.icon);
        }
        this.buttonbox.add_actor(this.label);
        this.actor.set_child(this.buttonbox);
        //this.actor.set_tooltip_text(category.get_name());
    }
};
Signals.addSignalMethods(CategoryButton.prototype);

function FavoritesButton(appsMenuButton, app, nbFavorites) {
    this._init(appsMenuButton, app, nbFavorites);
}

FavoritesButton.prototype = {
    __proto__: GenericApplicationButton.prototype,
    
    _init: function(appsMenuButton, app, nbFavorites) {
        GenericApplicationButton.prototype._init.call(this, appsMenuButton, app);        
        let monitorHeight = Main.layoutManager.primaryMonitor.height;
        let real_size = (0.7*monitorHeight) / nbFavorites;
        let icon_size = 0.6*real_size;
        if (icon_size>MAX_FAV_ICON_SIZE) icon_size = MAX_FAV_ICON_SIZE;
        this.actor.style = "padding-top: "+(icon_size/3)+"px;padding-bottom: "+(icon_size/3)+"px; margin:auto;"

        this.actor.add_style_class_name('menu-favorites-button');
        this.addActor(app.create_icon_texture(icon_size));  
        
        this._draggable = DND.makeDraggable(this.actor);     
        this.isDraggableApp = true;
    },
    
    get_app_id: function() {
        return this.app.get_id();
    },
    
    getDragActor: function() {
        return new Clutter.Clone({ source: this.actor });
    },

    // Returns the original actor that should align with the actor
    // we show as the item is being dragged.
    getDragActorSource: function() {
        return this.actor;
    }
};

function SystemButton(appsMenuButton, icon, nbFavorites) {
    this._init(appsMenuButton, icon, nbFavorites);
}

SystemButton.prototype = {
    _init: function(appsMenuButton, icon, nbFavorites) {
        this.actor = new St.Button({ reactive: true, style_class: 'menu-favorites-button' });        
        let monitorHeight = Main.layoutManager.primaryMonitor.height;
        let real_size = (0.7*monitorHeight) / nbFavorites;
        let icon_size = 0.6*real_size;
        if (icon_size>MAX_FAV_ICON_SIZE) icon_size = MAX_FAV_ICON_SIZE;
        this.actor.style = "padding-top: "+(icon_size/3)+"px;padding-bottom: "+(icon_size/3)+"px; margin:auto;"
        let iconObj = new St.Icon({icon_name: icon, icon_size: icon_size, icon_type: St.IconType.FULLCOLOR});
        this.actor.set_child(iconObj);             
    }
};

function CategoriesApplicationsBox() {
    this._init();
}

CategoriesApplicationsBox.prototype = {
    _init: function() {
        this.actor = new St.BoxLayout();
        this.actor._delegate = this;
    },
    
    acceptDrop : function(source, actor, x, y, time) {
        if (source instanceof FavoritesButton){
            AppFavorites.getAppFavorites().removeFavorite(source.app.get_id());
            return true;
        }
        return false;
    }
}

function FavoritesBox() {
    this._init();
}

FavoritesBox.prototype = {
    _init: function() {
        this.actor = new St.BoxLayout({ vertical: true });
        this.actor._delegate = this;
        
        this._dragPlaceholder = null;
        this._dragPlaceholderPos = -1;
        this._animatingPlaceholdersCount = 0;
    },
    
    _clearDragPlaceholder: function() {
        if (this._dragPlaceholder) {
            this._dragPlaceholder.animateOutAndDestroy();
            this._dragPlaceholder = null;
            this._dragPlaceholderPos = -1;
        }
    },
    
    handleDragOver : function(source, actor, x, y, time) {
        let app = source.app;

        // Don't allow favoriting of transient apps
        if (app == null || app.is_window_backed() || (!(source instanceof FavoritesButton) && app.get_id() in AppFavorites.getAppFavorites().getFavoriteMap()))
            return DND.DragMotionResult.NO_DROP;

        let favorites = AppFavorites.getAppFavorites().getFavorites();
        let numFavorites = favorites.length;

        let favPos = favorites.indexOf(app);

        let children = this.actor.get_children();
        let numChildren = children.length;
        let boxHeight = this.actor.height;

        // Keep the placeholder out of the index calculation; assuming that
        // the remove target has the same size as "normal" items, we don't
        // need to do the same adjustment there.
        if (this._dragPlaceholder) {
            boxHeight -= this._dragPlaceholder.actor.height;
            numChildren--;
        }

        let pos = Math.round(y * numFavorites / boxHeight);

        if (pos != this._dragPlaceholderPos && pos <= numFavorites) {
            if (this._animatingPlaceholdersCount > 0) {
                let appChildren = children.filter(function(actor) {
                    return (actor._delegate instanceof FavoritesButton);
                });
                this._dragPlaceholderPos = children.indexOf(appChildren[pos]);
            } else {
                this._dragPlaceholderPos = pos;
            }

            // Don't allow positioning before or after self
            if (favPos != -1 && (pos == favPos || pos == favPos + 1)) {
                if (this._dragPlaceholder) {
                    this._dragPlaceholder.animateOutAndDestroy();
                    this._animatingPlaceholdersCount++;
                    this._dragPlaceholder.actor.connect('destroy',
                        Lang.bind(this, function() {
                            this._animatingPlaceholdersCount--;
                        }));
                }
                this._dragPlaceholder = null;

                return DND.DragMotionResult.CONTINUE;
            }

            // If the placeholder already exists, we just move
            // it, but if we are adding it, expand its size in
            // an animation
            let fadeIn;
            if (this._dragPlaceholder) {
                this._dragPlaceholder.actor.destroy();
                fadeIn = false;
            } else {
                fadeIn = true;
            }

            this._dragPlaceholder = new DND.GenericDragPlaceholderItem();
            this._dragPlaceholder.child.set_width (source.actor.height);
            this._dragPlaceholder.child.set_height (source.actor.height);
            this.actor.insert_actor(this._dragPlaceholder.actor,
                                   this._dragPlaceholderPos);
            if (fadeIn)
                this._dragPlaceholder.animateIn();
        }

        let srcIsFavorite = (favPos != -1);

        if (srcIsFavorite)
            return DND.DragMotionResult.MOVE_DROP;

        return DND.DragMotionResult.COPY_DROP;
    },
    
    // Draggable target interface
    acceptDrop : function(source, actor, x, y, time) {
        let app = source.app;

        // Don't allow favoriting of transient apps
        if (app == null || app.is_window_backed()) {
            return false;
        }

        let id = app.get_id();

        let favorites = AppFavorites.getAppFavorites().getFavoriteMap();

        let srcIsFavorite = (id in favorites);

        let favPos = 0;
        let children = this.actor.get_children();
        for (let i = 0; i < this._dragPlaceholderPos; i++) {
            if (this._dragPlaceholder &&
                children[i] == this._dragPlaceholder.actor)
                continue;
            
            if (!(children[i]._delegate instanceof FavoritesButton)) continue;

            let childId = children[i]._delegate.app.get_id();
            if (childId == id)
                continue;
            if (childId in favorites)
                favPos++;
        }

        Meta.later_add(Meta.LaterType.BEFORE_REDRAW, Lang.bind(this,
            function () {
                let appFavorites = AppFavorites.getAppFavorites();
                if (srcIsFavorite)
                    appFavorites.moveFavoriteToPos(id, favPos);
                else
                    appFavorites.addFavoriteAtPos(id, favPos);
                return false;
            }));

        return true;
    }
}

function MyApplet(orientation) {
    this._init(orientation);
}

MyApplet.prototype = {
    __proto__: Applet.TextIconApplet.prototype,

    _init: function(orientation) {        
        Applet.TextIconApplet.prototype._init.call(this, orientation);
        
        try {                    
            this.set_applet_tooltip(_("Menu"));
                                    
            this.menuManager = new PopupMenu.PopupMenuManager(this);
            this.menu = new Applet.AppletPopupMenu(this, orientation);
            this.menuManager.addMenu(this.menu);   
                        
            this.actor.connect('key-press-event', Lang.bind(this, this._onSourceKeyPress));
                        
            this.menu.actor.add_style_class_name('menu-background');
            this.menu.connect('open-state-changed', Lang.bind(this, this._onOpenStateChanged));                                
                                    
            this._updateIcon();
            
            global.settings.connect("changed::menu-icon", Lang.bind(this, function() {
                this._updateIcon();
            })); 
            
            this.set_applet_label(_("Menu"));                                            
            let menuLabel = global.settings.get_string("menu-text");
            if (menuLabel != "Menu") {
                this.set_applet_label(menuLabel);                 
            } 
            global.settings.connect("changed::menu-text", Lang.bind(this, function() {
                    this.set_applet_label(global.settings.get_string("menu-text"));
                })); 
            this._searchInactiveIcon = new St.Icon({ style_class: 'menu-search-entry-icon',
                                               icon_name: 'edit-find',
                                               icon_type: St.IconType.SYMBOLIC });
            this._searchActiveIcon = new St.Icon({ style_class: 'menu-search-entry-icon',
                                             icon_name: 'edit-clear',
                                             icon_type: St.IconType.SYMBOLIC });
            this._searchTimeoutId = 0;
            this._searchIconClickedId = 0;
            this._applicationsButtons = new Array();
            this._favoritesButtons = new Array();
            this._selectedItemIndex = null;
            this._previousSelectedItemIndex = null;
            this._activeContainer = null;
            this._applicationsBoxWidth = 0;

            this._display();
            appsys.connect('installed-changed', Lang.bind(this, this._refreshApps));
            AppFavorites.getAppFavorites().connect('changed', Lang.bind(this, this._refreshFavs));

            this.menu.connect('open-state-changed', Lang.bind(this, this._onOpenStateToggled));  
            
            
            this.hover_delay = global.settings.get_int("menu-hover-delay") / 1000;
            global.settings.connect("changed::menu-hover-delay", Lang.bind(this, function() {
                    this.hover_delay = global.settings.get_int("menu-hover-delay") / 1000;
            })); 
                
            global.display.connect('overlay-key', Lang.bind(this, function(){
                try{
                    this.menu.toggle();
                }
                catch(e) {
                    global.logError(e);
                }
            }));    
            
            this.edit_menu_item = new Applet.MenuItem(_("Edit menu"), Gtk.STOCK_EDIT, Lang.bind(this, this._launch_editor));
            this._applet_context_menu.addMenuItem(this.edit_menu_item);
                                                                           
        }
        catch (e) {
            global.logError(e);
        }
    },
    
    on_orientation_changed: function (orientation) {
        this.menu.destroy();
        this.menu = new Applet.AppletPopupMenu(this, orientation);
        this.menuManager.addMenu(this.menu);
        
        this.menu.actor.add_style_class_name('menu-background');
        this.menu.connect('open-state-changed', Lang.bind(this, this._onOpenStateChanged));
        this.menu.connect('open-state-changed', Lang.bind(this, this._onOpenStateToggled));
        
        this._display();
    },
    
    _launch_editor: function() {
        Util.spawnCommandLine("cinnamon-menu-editor");
    },
    
    on_applet_clicked: function(event) {
        this.menu.toggle();     
    },        
           
    _onSourceKeyPress: function(actor, event) {
        let symbol = event.get_key_symbol();

        if (symbol == Clutter.KEY_space || symbol == Clutter.KEY_Return) {
            this.menu.toggle();
            return true;
        } else if (symbol == Clutter.KEY_Escape && this.menu.isOpen) {
            this.menu.close();
            return true;
        } else if (symbol == Clutter.KEY_Down) {
            if (!this.menu.isOpen)
                this.menu.toggle();
            this.menu.actor.navigate_focus(this.actor, Gtk.DirectionType.DOWN, false);
            return true;
        } else
            return false;
    },

    _onOpenStateChanged: function(menu, open) {
        if (open) {
            this.actor.add_style_pseudo_class('active');            
		}
        else {
            this.actor.remove_style_pseudo_class('active');            
            if (this.searchActive) {
				this.resetSearch();
				this._select_category(null, this._allAppsCategoryButton);
			}
        }
    },

    destroy: function() {
        this.actor._delegate = null;
        this.menu.destroy();
        this.actor.destroy();
        this.emit('destroy');
    },
    
    _updateIcon: function(){
        let icon_file = global.settings.get_string("menu-icon");
        try{
           this.set_applet_icon_path(icon_file);               
        }catch(e){
           global.log("WARNING : Could not load icon file \""+icon_file+"\" for menu button");
        }
    },

    _onMenuKeyPress: function(actor, event) {

        let symbol = event.get_key_symbol();
        
        if (symbol==Clutter.KEY_Super_L && this.menu.isOpen) {
            this.menu.close();
            return true;
        }

        if (this._activeContainer === null && symbol == Clutter.KEY_Up) {
            this._activeContainer = this.applicationsBox;
            children = this._activeContainer.get_children();
            this._selectedItemIndex = children.length;
        } else if (this._activeContainer === null && symbol == Clutter.KEY_Down) {
            this._activeContainer = this.applicationsBox;
            children = this._activeContainer.get_children();
            this._selectedItemIndex = -1;
        }else if (this._activeContainer === null) {
            this._activeContainer = this.categoriesBox;
            this._selectedItemIndex = -1;
            this._previousSelectedItemIndex = -1;
        }
        
        
        let children = this._activeContainer.get_children();
        
        if (children.length==0){
            this._activeContainer = this.categoriesBox;
            this._selectedItemIndex = -1;
            this._previousSelectedItemIndex = -1;
            children = this._activeContainer.get_children();
        }

        let index = this._selectedItemIndex;

        if (symbol == Clutter.KEY_Up) {
            if (this._activeContainer==this.applicationsBox) index = this._selectedItemIndex - 1 < 0 ? 0 : this._selectedItemIndex - 2;
            else index = this._selectedItemIndex - 1 < 0 ? 0 : this._selectedItemIndex - 1;
        } else if (symbol == Clutter.KEY_Down) {
            if (this._activeContainer==this.applicationsBox && this._selectedItemIndex!=-1) index = this._selectedItemIndex + 2 >= children.length ? children.length - 2 : this._selectedItemIndex + 2;
            else index = this._selectedItemIndex + 1 == children.length ? children.length - 1 : this._selectedItemIndex + 1;
        } else if (symbol == Clutter.KEY_Right && this._activeContainer === this.categoriesBox) {
            this._activeContainer = this.applicationsBox;
            children = this._activeContainer.get_children();
            index = 0;
            this._previousSelectedItemIndex = this._selectedItemIndex;
            this._selectedItemIndex = -1;
        } else if (symbol == Clutter.KEY_Left && this._activeContainer === this.applicationsBox && !this.searchActive) {
            this._clearSelections(this.applicationsBox);
            this._activeContainer = this.categoriesBox;
            children = this._activeContainer.get_children();
            index = this._previousSelectedItemIndex;
            this._selectedItemIndex = -1;
        } else if (this._activeContainer === this.applicationsBox && (symbol == Clutter.KEY_Return || symbol == Clutter.KP_Enter)) {
            let item_actor = children[this._selectedItemIndex];
            item_actor._delegate.activate();
            return true;
        } else {
            return false;
        }

        if (index == this._selectedItemIndex) {
            return true;
        }
        
        if (this._activeContainer==this.applicationsBox){
            if (index>=children.length-1) index = children.length-2;
        }else{
            if (index>=children.length) index = children.length-1;
        }

        this._selectedItemIndex = index;
        let item_actor = children[this._selectedItemIndex];

        if (!item_actor || item_actor === this.searchEntry) {
            return false;
        }

        item_actor._delegate.emit('enter-event');
        return true;
    },

    _addEnterEvent: function(button, callback) {
        let _callback = Lang.bind(this, function() {
            let parent = button.actor.get_parent();
            if (this._activeContainer === this.categoriesBox && parent !== this._activeContainer) {
                this._previousSelectedItemIndex = this._selectedItemIndex;
            }
            this._activeContainer = parent;
            let children = this._activeContainer.get_children();
            for (let i=0, l=children.length; i<l; i++) {
                if (button.actor === children[i]) {
                    this._selectedItemIndex = i;
                }
            };
            callback();
        });
        button.connect('enter-event', _callback);
        button.actor.connect('enter-event', _callback);
    },

    _clearSelections: function(container) {
        container.get_children().forEach(function(actor) {
            actor.style_class = "menu-category-button";
        });
    },

    _onOpenStateToggled: function(menu, open) {
       if (open) {
           global.stage.set_key_focus(this.searchEntry);
           this._selectedItemIndex = null;
           this._activeContainer = null;
           let monitorHeight = Main.layoutManager.primaryMonitor.height;
           let applicationsBoxHeight = this.applicationsBox.get_allocation_box().y2-this.applicationsBox.get_allocation_box().y1;
           let scrollBoxHeight = (this.leftBox.get_allocation_box().y2-this.leftBox.get_allocation_box().y1)                                    
                                    -(this.searchBox.get_allocation_box().y2-this.searchBox.get_allocation_box().y1);           
           // if (scrollBoxHeight < (0.2*monitorHeight)  &&  (scrollBoxHeight < applicationsBoxHeight)) {
             //    scrollBoxHeight = Math.min(0.2*monitorHeight, applicationsBoxHeight);
            // }
            this.applicationsScrollBox.style = "height: "+scrollBoxHeight+"px;";
       } else {
           this.closeApplicationsContextMenus(null, false);
           //this.resetSearch();
           //this._clearSelections(this.categoriesBox);
           //this._clearSelections(this.applicationsBox);
       }
    },
    
    _refreshApps : function() {
        this._applicationsButtons = new Array();
        this._applicationsBoxWidth = 0;
        
        //Remove all categories
    	this.categoriesBox.get_children().forEach(Lang.bind(this, function (child) {
            child.destroy();
        })); 
        
        this._allAppsCategoryButton = new CategoryButton(null);
             this._allAppsCategoryButton.actor.connect('clicked', Lang.bind(this, function() {
            this._select_category(null, this._allAppsCategoryButton);
         }));
         this._addEnterEvent(this._allAppsCategoryButton, Lang.bind(this, function() {
             if (!this.searchActive) {
                 this._allAppsCategoryButton.isHovered = true;
                 Tweener.addTween(this, {
                        time: this.hover_delay,
                        onComplete: function () {
                            if (this._allAppsCategoryButton.isHovered) {
                                this._select_category(null, this._allAppsCategoryButton);
                            }
                        }
                 });
            }
         }));
         this._allAppsCategoryButton.actor.connect('leave-event', Lang.bind(this, function () {
            this._allAppsCategoryButton.isHovered = false;
         }));
         this.categoriesBox.add_actor(this._allAppsCategoryButton.actor);
        
        let trees = [appsys.get_tree(), appsys.get_settings_tree()];
        
        for (var i in trees) {
            let tree = trees[i];
            let root = tree.get_root_directory();
            
            let iter = root.iter();
            let nextType;
            while ((nextType = iter.next()) != GMenu.TreeItemType.INVALID) {
                if (nextType == GMenu.TreeItemType.DIRECTORY) {
                    let dir = iter.get_directory();
                    if (dir.get_is_nodisplay())
                        continue;
                    this.applicationsByCategory[dir.get_menu_id()] = new Array();
                    this._loadCategory(dir);
                    if (this.applicationsByCategory[dir.get_menu_id()].length>0){
                       let categoryButton = new CategoryButton(dir);
                       categoryButton.actor.connect('clicked', Lang.bind(this, function() {
                         this._select_category(dir, categoryButton);
                      }));
                      this._addEnterEvent(categoryButton, Lang.bind(this, function() {
                          if (!this.searchActive) {
                             categoryButton.isHovered = true;
                             Tweener.addTween(this, {
                                time: this.hover_delay,
                                onComplete: function () {
                                    if (categoryButton.isHovered) {
                                        this._select_category(dir, categoryButton);
                                    }
                                }
                             });
                          }
                      }));
                      categoryButton.actor.connect('leave-event', function () {
                            categoryButton.isHovered = false;
                      });
                      this.categoriesBox.add_actor(categoryButton.actor);
                    }
                }
            } 
        }
        
        this._select_category(null, this._allAppsCategoryButton);    
        this._setCategoriesButtonActive(!this.searchActive);                 
    },
    
    _refreshFavs : function() {     	
    	//Remove all favorites
    	this.leftBox.get_children().forEach(Lang.bind(this, function (child) {
            child.destroy();
        }));
        
        let favoritesBox = new FavoritesBox();
        this.leftBox.add_actor(favoritesBox.actor, { y_align: St.Align.END, y_fill: false });
    	 
        //Load favorites again
        this._favoritesButtons = new Array();
        let launchers = global.settings.get_strv('favorite-apps');
        let appSys = Cinnamon.AppSystem.get_default();
        let j = 0;
        for ( let i = 0; i < launchers.length; ++i ) {
            let app = appSys.lookup_app(launchers[i]);
            if (!app) app = appSys.lookup_settings_app(launchers[i]);
            if (app) {
                let button = new FavoritesButton(this, app, launchers.length +3); // + 3 because we're adding 3 system buttons at the bottom
                this._favoritesButtons[app] = button;
                favoritesBox.actor.add_actor(button.actor, { y_align: St.Align.END, y_fill: false });
                button.actor.connect('enter-event', Lang.bind(this, function() {
                   this.selectedAppTitle.set_text(button.app.get_name());
                   if (button.app.get_description()) this.selectedAppDescription.set_text(button.app.get_description());
                   else this.selectedAppDescription.set_text("");
                }));
                button.actor.connect('leave-event', Lang.bind(this, function() {
                   this.selectedAppTitle.set_text("");
                   this.selectedAppDescription.set_text("");
                }));
                ++j;
            }
        }

               
    },
   
    _loadCategory: function(dir, top_dir) {
        var iter = dir.iter();
        var nextType;
        if (!top_dir) top_dir = dir;
        while ((nextType = iter.next()) != GMenu.TreeItemType.INVALID) {
            if (nextType == GMenu.TreeItemType.ENTRY) {
                var entry = iter.get_entry();
                if (!entry.get_app_info().get_nodisplay()) {
					var app = appsys.lookup_app_by_tree_entry(entry);
                    if (!app) app = appsys.lookup_settings_app_by_tree_entry(entry);
                 	if (!this.applicationsByCategory[top_dir.get_menu_id()]) this.applicationsByCategory[top_dir.get_menu_id()] = new Array();
					this.applicationsByCategory[top_dir.get_menu_id()].push(app);
				}
            } else if (nextType == GMenu.TreeItemType.DIRECTORY) {
                this._loadCategory(iter.get_directory(), top_dir);
            }
        }
    },
    
    _scrollToButton: function(button) {
        var current_scroll_value = this.applicationsScrollBox.get_vscroll_bar().get_adjustment().get_value();
        var box_height = this.applicationsScrollBox.get_allocation_box().y2-this.applicationsScrollBox.get_allocation_box().y1;
        var new_scroll_value = current_scroll_value;
        if (current_scroll_value > button.actor.get_allocation_box().y1-10) new_scroll_value = button.actor.get_allocation_box().y1-10;
        if (box_height+current_scroll_value < button.actor.get_allocation_box().y2+10) new_scroll_value = button.actor.get_allocation_box().y2-box_height+10;
        if (new_scroll_value!=current_scroll_value) this.applicationsScrollBox.get_vscroll_bar().get_adjustment().set_value(new_scroll_value);
    },
               
    _display : function() {
        this._activeContainer = null;
        let section = new PopupMenu.PopupMenuSection();
        this.menu.addMenuItem(section);
        
        let leftPane = new St.BoxLayout({ vertical: true });
                  
        this.leftBox = new St.BoxLayout({ style_class: 'menu-favorites-box', vertical: true });        
        
        this._session = new GnomeSession.SessionManager();
        this._screenSaverProxy = new ScreenSaver.ScreenSaverProxy();            
                                       
        leftPane.add_actor(this.leftBox, { y_align: St.Align.END, y_fill: false });        
        
        let rightPane = new St.BoxLayout({ vertical: true });
        
        this.searchBox = new St.BoxLayout({ style_class: 'menu-search-box' });
        rightPane.add_actor(this.searchBox);
        
        this.searchEntry = new St.Entry({ name: 'menu-search-entry',
                                     hint_text: _("Type to search..."),
                                     track_hover: true,
                                     can_focus: true });
        this.searchEntry.set_secondary_icon(this._searchInactiveIcon);
        this.searchBox.add_actor(this.searchEntry);
        this.searchActive = false;
        this.searchEntryText = this.searchEntry.clutter_text;
        this.searchEntryText.connect('text-changed', Lang.bind(this, this._onSearchTextChanged));
        this.searchEntryText.connect('key-press-event', Lang.bind(this, this._onMenuKeyPress));
        this._previousSearchPattern = "";

        this.categoriesApplicationsBox = new CategoriesApplicationsBox();
        rightPane.add_actor(this.categoriesApplicationsBox.actor);
        this.categoriesBox = new St.BoxLayout({ style_class: 'menu-categories-box', vertical: true });
        this.applicationsScrollBox = new St.ScrollView({ x_fill: true, y_fill: false, y_align: St.Align.START, style_class: 'vfade menu-applications-scrollbox' });
        
        let vscroll = this.applicationsScrollBox.get_vscroll_bar();
        vscroll.connect('scroll-start',
                        Lang.bind(this, function() {
                                      this.menu.passEvents = true;
                                  }));
        vscroll.connect('scroll-stop',
                        Lang.bind(this, function() {
                                      this.menu.passEvents = false;
                                  }));
        
        this.applicationsBox = new St.BoxLayout({ style_class: 'menu-applications-box', vertical:true });
        this.applicationsScrollBox.add_actor(this.applicationsBox);
        this.applicationsScrollBox.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
        this.categoriesApplicationsBox.actor.add_actor(this.categoriesBox);
        this.categoriesApplicationsBox.actor.add_actor(this.applicationsScrollBox);
                     
        this._refreshFavs();
                                                          
        this.mainBox = new St.BoxLayout({ style_class: 'menu-applications-box', vertical:false });       
                
        this.mainBox.add_actor(leftPane, { span: 1 });
        this.mainBox.add_actor(rightPane, { span: 1 });
        
        section.actor.add_actor(this.mainBox);
        
		this.applicationsByCategory = {};
        this._refreshApps();
                       
        this.selectedAppBox = new St.BoxLayout({ style_class: 'menu-selected-app-box', vertical: true });
        this.selectedAppTitle = new St.Label({ style_class: 'menu-selected-app-title', text: "" });
        this.selectedAppBox.add_actor(this.selectedAppTitle);
        this.selectedAppDescription = new St.Label({ style_class: 'menu-selected-app-description', text: "" });
        this.selectedAppBox.add_actor(this.selectedAppDescription);
        section.actor.add_actor(this.selectedAppBox);
    },
    
    _clearApplicationsBox: function(selectedActor){
       let actors = this.applicationsBox.get_children();
		for (var i=0; i<actors.length; i++) {
			let actor = actors[i];
			this.applicationsBox.remove_actor(actor);
		}
		       
       let actors = this.categoriesBox.get_children();

         for (var i=0; i<actors.length; i++){
             let actor = actors[i];
             if (this.searchActive) actor.style_class = "menu-category-button-greyed";
             else if (actor==selectedActor) actor.style_class = "menu-category-button-selected";
             else actor.style_class = "menu-category-button";
         }
    },
    
    _select_category : function(dir, categoryButton) {
	       this.resetSearch();
	       this._clearApplicationsBox(categoryButton.actor);
	       if (dir) this._displayButtons(this._listApplications(dir.get_menu_id()));
	       else this._displayButtons(this._listApplications(null));
           this.closeApplicationsContextMenus(null, false);
	},
    
    closeApplicationsContextMenus: function(excludeApp, animate) {
        for (var app in this._applicationsButtons){
            if (app!=excludeApp && this._applicationsButtons[app].menu.isOpen){
                if (animate)
                    this._applicationsButtons[app].toggleMenu();
                else
                    this._applicationsButtons[app].closeMenu();
            }
        }
    },
    
    _onApplicationButtonRealized: function(actor) {
        if (actor.get_width() > this._applicationsBoxWidth){
            this._applicationsBoxWidth = actor.get_width();
            this.applicationsBox.set_width(this._applicationsBoxWidth);
        }
    },
    
    _displayButtons: function(apps, places){
         if (apps){
            for (var i=0; i<apps.length; i++) {
               let app = apps[i];
               if (!this._applicationsButtons[app]){
                  let applicationButton = new ApplicationButton(this, app);
                  applicationButton.actor.connect('realize', Lang.bind(this, this._onApplicationButtonRealized));
                  applicationButton.actor.connect('leave-event', Lang.bind(this, function() {
                     this.selectedAppTitle.set_text("");
                     this.selectedAppDescription.set_text("");
                  }));
                  this._addEnterEvent(applicationButton, Lang.bind(this, function() {
                      this.selectedAppTitle.set_text(applicationButton.app.get_name());
                      if (applicationButton.app.get_description()) this.selectedAppDescription.set_text(applicationButton.app.get_description());
                      else this.selectedAppDescription.set_text("");
                      this._clearSelections(this.applicationsBox);
                      applicationButton.actor.style_class = "menu-category-button-selected";
                      this._scrollToButton(applicationButton);
                  }));
                  this._applicationsButtons[app] = applicationButton;
               }
               this.applicationsBox.add_actor(this._applicationsButtons[app].actor);
               this.applicationsBox.add_actor(this._applicationsButtons[app].menu.actor);
            }
         }

         if (places){
            for (var i=0; i<places.length; i++) {
               let place = places[i];
               let button = new PlaceButton(this, place, place.name);
               this._addEnterEvent(button, Lang.bind(this, function() {
                   this._clearSelections(this.applicationsBox);
                   button.actor.style_class = "menu-category-button-selected";
                   this._scrollToButton(button);
               }));
               this.applicationsBox.add_actor(button.actor);
            }
         }
    },
     
     _select_places : function(button) {
         this.resetSearch();
		 this._clearApplicationsBox(button.actor);
               
         let bookmarks = this._listBookmarks();
         let devices = this._listDevices();
         this._displayButtons(null, bookmarks.concat(devices));
    },        
     
     _setCategoriesButtonActive: function(active) {         
         try{
             let categoriesButtons = this.categoriesBox.get_children();
             for (var i in categoriesButtons){
                 let button = categoriesButtons[i];
                 let icon = button._delegate.icon;
                 if (active){
                     button.remove_style_class_name("menu-category-button-greyed");
                     button.add_style_class_name("menu-category-button");
                 }else{
                     button.remove_style_class_name("menu-category-button");
                     button.add_style_class_name("menu-category-button-greyed");
                 }
             }
        }catch(e){
             global.log(e);
        }
     },
     
     resetSearch: function(){
        this.searchEntry.set_text("");
        this.searchActive = false;
        this._setCategoriesButtonActive(true);
        global.stage.set_key_focus(this.searchEntry);
     },
     
     _onSearchTextChanged: function (se, prop) {
        this._clearSelections(this.categoriesBox);
        this._clearSelections(this.applicationsBox);
        this.searchActive = this.searchEntry.get_text() != '';
        if (this.searchActive) {
            this.searchEntry.set_secondary_icon(this._searchActiveIcon);

            if (this._searchIconClickedId == 0) {
                this._searchIconClickedId = this.searchEntry.connect('secondary-icon-clicked',
                    Lang.bind(this, function() {
                        this.resetSearch();       
                        this._select_category(null, this._allAppsCategoryButton);                 
                    }));
            }
            
            this._setCategoriesButtonActive(false);
        } else {
            if (this._searchIconClickedId > 0)
                this.searchEntry.disconnect(this._searchIconClickedId);
            this._searchIconClickedId = 0;

            this.searchEntry.set_secondary_icon(this._searchInactiveIcon);
            
            this._setCategoriesButtonActive(true);
        }
        if (!this.searchActive) {
            if (this._searchTimeoutId > 0) {
                Mainloop.source_remove(this._searchTimeoutId);
                this._searchTimeoutId = 0;
            }
            return;
        }
        if (this._searchTimeoutId > 0)
            return;
        this._searchTimeoutId = Mainloop.timeout_add(150, Lang.bind(this, this._doSearch));
    },
    
    _listBookmarks: function(pattern){
       let bookmarks = Main.placesManager.getBookmarks();
       var res = new Array();
       for (let id = 0; id < bookmarks.length; id++) {
          if (!pattern || bookmarks[id].name.toLowerCase().indexOf(pattern)!=-1) res.push(bookmarks[id]);
       }
       return res;
    },
    
    _listDevices: function(pattern){
       let devices = Main.placesManager.getMounts();
       var res = new Array();
       for (let id = 0; id < devices.length; id++) {
          if (!pattern || devices[id].name.toLowerCase().indexOf(pattern)!=-1) res.push(devices[id]);
       }
       return res;
    },
    
    _listApplications: function(category_menu_id, pattern){
       var applist;
       if (category_menu_id) applist = this.applicationsByCategory[category_menu_id];
       else{
          applist = new Array();
          for (directory in this.applicationsByCategory) applist = applist.concat(this.applicationsByCategory[directory]);
       }
       
       var res;
       if (pattern){
          res = new Array();
          for (var i in applist){
             let app = applist[i];
             if (app.get_name().toLowerCase().indexOf(pattern)!=-1 || (app.get_description() && app.get_description().toLowerCase().indexOf(pattern)!=-1) || (app.get_id() && app.get_id().slice(0, -8).toLowerCase().indexOf(pattern)!=-1)) res.push(app);
          }
       }else res = applist;
       
       res.sort(function(a,b){
          return a.get_name().toLowerCase() > b.get_name().toLowerCase();
       });
       
       return res;
    },
    
    _doSearch: function(){
       this._searchTimeoutId = 0;
       let pattern = this.searchEntryText.get_text().replace(/^\s+/g, '').replace(/\s+$/g, '').toLowerCase();
       if (pattern==this._previousSearchPattern) return false;
       this._previousSearchPattern = pattern;
       
       this._activeContainer = null;
       this._selectedItemIndex = null;
       this._previousSelectedItemIndex = null;
       
       // _listApplications returns all the applications when the search
       // string is zero length. This will happend if you type a space
       // in the search entry.
       if (pattern.length == 0) {
           return false;
       }

       var appResults = this._listApplications(null, pattern);
       
       var placesResults = new Array();
       
       var bookmarks = this._listBookmarks(pattern);
       for (var i in bookmarks) placesResults.push(bookmarks[i]);
       
       var devices = this._listDevices(pattern);
       for (var i in devices) placesResults.push(devices[i]);
       
       this._clearApplicationsBox();
       this._displayButtons(appResults, placesResults);
       
       let applicationsBoxChilren = this.applicationsBox.get_children();
       if (applicationsBoxChilren.length>0){
           this._activeContainer = this.applicationsBox;
           this._selectedItemIndex = 0;
           let item_actor = applicationsBoxChilren[this._selectedItemIndex];
           if (item_actor && item_actor !== this.searchEntry) {
               item_actor._delegate.emit('enter-event');
           }
       }

       return false;
    }
    
    
};

function main(metadata, orientation) {  
    let myApplet = new MyApplet(orientation);
    return myApplet;      
}
Last edited by roblm on Tue Mar 05, 2013 9:38 pm, edited 6 times in total.

User avatar
roblm
Level 8
Level 8
Posts: 2420
Joined: Sun Feb 24, 2013 2:41 pm

Re: Cinnamon app menu a mess.

Post by roblm » Wed Feb 27, 2013 7:03 pm

This is an important update to the message I previously posted on February 24. I have been working on the problem of not being able to edit the Preferences and Administration categories in the Linux Mint 14.1 Cinnamon menu. I now have a better solution which will allow you to edit both of these categories. To enable this go to “/etc/xdg/menus”. Right click the file “cinnamon-settings.menu” and select “Open as Root”. Open the file and copy 21 lines of code starting with line
“<!-- Merge in these other files as submenus -->”
up to and including the line
“</Menu> <!-- End System Settings -->”.
Close the file. In the same folder open the file “ cinnamon-applications.menu”. Paste the previously copied lines into the space between any two sections of code in the bottom section of the file. I put mine between the “ <!-- System Tools-->” section and the “ <!-- Other -->” section. There should be a space above the first pasted line and a space below the last pasted line. Now two lines that were just pasted need to be changed. In the line
“<!-- Merge in these other files as submenus -->” remove the words and type “Settings” so that the new line will read “<!-- Settings -->”. The line “</Menu>” will be changed to “</Menu> <!-- End Settings -->”. Save the new settings and close the file. Reopen the file “cinnamon-settings.menu” and now delete the 21 lines that you previously were asked to copy. There will then be a space between “<DefaultMergeDirs/>” and “<Layout>”. Save the settings and close the file. Restart Cinnamon by pressing the keys Alt+F2 at the same time and in the command window type r. You should now be able to edit the Preferences and Administration categories in the menu.

If anyone followed the instructions on my February 24th posting, then you will not have the original “cinnamon-settings.menu” file because some of the lines were deleted. Hopefully you made a copy of the file before making the alteration. I have posted an original file below. Also, you can move the contents in the folder “/user/share/applications-2” back to /user/share/applications” and then delete the applications-2 folder. I have also posted the modified "cinnamon-applications.menu" and "cinnamon-settings.menu" files below.


Original "cinnamon-settings.menu" file is below:

Code: Select all

<!DOCTYPE Menu PUBLIC "-//freedesktop//DTD Menu 1.0//EN"
 "http://www.freedesktop.org/standards/menu-spec/1.0/menu.dtd">

<Menu>

  <Name>Desktop</Name>
  <Directory>cinnamon-menu-system.directory</Directory>

  <!-- Read standard .directory and .desktop file locations -->
  <DefaultAppDirs/>
  <DefaultDirectoryDirs/>

  <!-- Read in overrides and child menus from applications-merged/ -->
  <DefaultMergeDirs/>
  
  <!-- Merge in these other files as submenus -->
  <Menu>
    <Name>Preferences</Name>
    <Directory>cinnamon-settings.directory</Directory>
    <Include>
      <And>
        <Category>Settings</Category>
      </And>
    </Include>
  </Menu>

  <!-- System Settings -->
  <Menu>
    <Name>Administration</Name>
    <Directory>cinnamon-settings-system.directory</Directory>
    <Include>
      <And>
        <Category>Settings</Category>
        <Category>System</Category>
      </And>
    </Include>
  </Menu>     <!-- End System Settings -->

  <Layout>
    <Menuname>Preferences</Menuname>
    <Menuname>Administration</Menuname>
    <Merge type="menus"/>
    <Merge type="files"/>
  </Layout>

</Menu> <!-- End Settings -->


Modified "cinnamon-settings.menu" file is below:

Code: Select all

<!DOCTYPE Menu PUBLIC "-//freedesktop//DTD Menu 1.0//EN"
 "http://www.freedesktop.org/standards/menu-spec/1.0/menu.dtd">

<Menu>

  <Name>Desktop</Name>
  <Directory>cinnamon-menu-system.directory</Directory>

  <!-- Read standard .directory and .desktop file locations -->
  <DefaultAppDirs/>
  <DefaultDirectoryDirs/>

  <!-- Read in overrides and child menus from applications-merged/ -->
  <DefaultMergeDirs/>

  <Layout>
    <Menuname>Preferences</Menuname>
    <Menuname>Administration</Menuname>
    <Merge type="menus"/>
    <Merge type="files"/>
  </Layout>

</Menu> <!-- End Settings -->


Modified "cinnamon-applications.menu" file is below:

Code: Select all

<!DOCTYPE Menu PUBLIC "-//freedesktop//DTD Menu 1.0//EN"
 "http://www.freedesktop.org/standards/menu-spec/1.0/menu.dtd">

<Menu>

  <Name>Applications</Name>
  <Directory>cinnamon-menu-applications.directory</Directory>

  <!-- Scan legacy dirs first, as later items take priority -->
  <KDELegacyDirs/>
  <LegacyDir>/etc/X11/applnk</LegacyDir>
  <LegacyDir>/usr/share/cinnamon/apps</LegacyDir>

  <!-- Read standard .directory and .desktop file locations -->
  <DefaultAppDirs/>
  <DefaultDirectoryDirs/>

  <!-- Read in overrides and child menus from applications-merged/ -->
  <DefaultMergeDirs/>

  <!-- Accessories submenu -->
  <Menu>
    <Name>Accessories</Name>
    <Directory>cinnamon-utility.directory</Directory>
    <Include>
      <And>
        <Category>Utility</Category>
	<!-- Accessibility spec must have either the Utility or Settings
	     category, and we display an accessibility submenu already for
	     the ones that do not have Settings, so don't display accessibility
	     applications here -->
        <Not><Category>Accessibility</Category></Not>
        <Not><Category>System</Category></Not>
      </And>
    </Include>
  </Menu> <!-- End Accessories -->

  <!-- Accessibility submenu -->
  <Menu>
    <Name>Universal Access</Name>
    <Directory>cinnamon-utility-accessibility.directory</Directory>
    <Include>
      <And>
        <Category>Accessibility</Category>
        <Not><Category>Settings</Category></Not>
      </And>
    </Include>
  </Menu> <!-- End Accessibility -->

  <!-- Development Tools -->
  <Menu>
    <Name>Development</Name>
    <Directory>cinnamon-development.directory</Directory>
    <Include>
      <And>
        <Category>Development</Category>
      </And>
      <Filename>emacs.desktop</Filename>
    </Include>
  </Menu> <!-- End Development Tools -->

  <!-- Education -->
  <Menu>
    <Name>Education</Name>
    <Directory>cinnamon-education.directory</Directory>
    <Include>
      <And>
        <Category>Education</Category>
      </And>
    </Include>
  </Menu> <!-- End Education -->

  <!-- Games -->
  <Menu>
    <Name>Games</Name>
    <Directory>cinnamon-game.directory</Directory>
    <Include>
      <And>
        <Category>Game</Category>
      </And>
    </Include>
  </Menu> <!-- End Games -->

  <!-- Graphics -->
  <Menu>
    <Name>Graphics</Name>
    <Directory>cinnamon-graphics.directory</Directory>
    <Include>
      <And>
        <Category>Graphics</Category>
      </And>
    </Include>
  </Menu> <!-- End Graphics -->

  <!-- Internet -->
  <Menu>
    <Name>Internet</Name>
    <Directory>cinnamon-network.directory</Directory>
    <Include>
      <And>
        <Category>Network</Category>
      </And>
    </Include>
  </Menu>   <!-- End Internet -->

  <!-- Multimedia -->
  <Menu>
    <Name>Multimedia</Name>
    <Directory>cinnamon-audio-video.directory</Directory>
    <Include>
      <And>
        <Category>AudioVideo</Category>
      </And>
    </Include>
  </Menu>   <!-- End Multimedia -->

  <!-- Office -->
  <Menu>
    <Name>Office</Name>
    <Directory>cinnamon-office.directory</Directory>
    <Include>
      <And>
        <Category>Office</Category>
      </And>
    </Include>
  </Menu> <!-- End Office -->

  <!-- System Tools-->
  <Menu>
    <Name>System</Name>
    <Directory>cinnamon-system-tools.directory</Directory>
    <Include>
      <And>
        <Category>System</Category>
        <Not><Category>Settings</Category></Not>
      </And>
    </Include>
  </Menu>   <!-- End System Tools -->

  <!-- Settings -->
  <Menu>
    <Name>Preferences</Name>
    <Directory>cinnamon-settings.directory</Directory>
    <Include>
      <And>
        <Category>Settings</Category>
      </And>
    </Include>
  </Menu> <!-- End Settings -->

  <!-- System Settings -->
  <Menu>
    <Name>Administration</Name>
    <Directory>cinnamon-settings-system.directory</Directory>
    <Include>
      <And>
        <Category>Settings</Category>
        <Category>System</Category>
      </And>
    </Include>
  </Menu>     <!-- End System Settings -->
  
  <!-- Other -->
  <Menu>
    <Name>Other</Name>
    <Directory>cinnamon-other.directory</Directory>
    <OnlyUnallocated/>
    <Include>
      <And>
        <Not><Category>Core</Category></Not>
        <Not><Category>Settings</Category></Not>
        <Not><Category>Screensaver</Category></Not>
      </And>
    </Include>
  </Menu> <!-- End Other -->
  
   <!-- Wine -->
  <Menu>
    <Name>Wine</Name>
    <Directory>wine-wine.directory</Directory>
    <Include>
      <And>
        <Category>Wine</Category>
      </And>
    </Include>
  </Menu> <!-- End Wine -->

</Menu> <!-- End Applications -->
Attachments
Menu Screenshot 4.png
Last edited by roblm on Thu Feb 28, 2013 9:11 pm, edited 7 times in total.

User avatar
roblm
Level 8
Level 8
Posts: 2420
Joined: Sun Feb 24, 2013 2:41 pm

Re: Cinnamon app menu a mess.

Post by roblm » Wed Feb 27, 2013 7:27 pm

Screenshot menu-editor.png
Preferences and Administration categories are now displayed in the Menu Editor window.
Screenshot 10.png
Now the categories in the menu can be lined up in the correct alphabetical order.
Screenshot 9.png
If you make a new category, it can now be moved to the bottom of the list for quick access. The default menu had Preferences and Administration in a fixed position at the bottom. Some people may prefer to have their favorites list displayed with icons and text instead of just plain icons, to more easily recognize them.
Last edited by roblm on Wed Mar 06, 2013 8:56 am, edited 9 times in total.

violent23
Level 1
Level 1
Posts: 15
Joined: Sun Sep 05, 2010 10:23 pm

Re: Cinnamon app menu a mess.

Post by violent23 » Wed Feb 27, 2013 8:43 pm

roblm wrote:Now the categories in the menu can be lined up in the correct alphabetical order.
Can't wait to try this. One question, are all the categories now editable in the Cinnamon edit menu app?

User avatar
roblm
Level 8
Level 8
Posts: 2420
Joined: Sun Feb 24, 2013 2:41 pm

Re: Cinnamon app menu a mess.

Post by roblm » Wed Feb 27, 2013 9:37 pm

All the categories can be edited now by either right clicking on menu or clicking on the Cinnamon Menu Editor app.

One problem I just noticed is that when I pasted the contents of the 3 files into the text window, the original formatting was correct, but after clicking on the submit button then some of the formatting was changed. Every line now is lined up with the left margin. When I click on the edit button all of the original formatting shows up correctly in the text window. I just took a screenshot of the original cinnamon-settings.menu file contents and uploaded the picture below.
To test these files with the changed format, I ran Linux Mint in a virtual environment with the VirtualBox program. I did not notice any change in the operation of the menu.
Attachments
cinnamon-settings.menu.png

violent23
Level 1
Level 1
Posts: 15
Joined: Sun Sep 05, 2010 10:23 pm

Re: Cinnamon app menu a mess.

Post by violent23 » Thu Feb 28, 2013 10:38 am

roblm wrote:All the categories can be edited now by either right clicking on menu or clicking on the Cinnamon Menu Editor app.

One problem I just noticed is that when I pasted the contents of the 3 files into the text window, the original formatting was correct, but after clicking on the submit button then some of the formatting was changed. Every line now is lined up with the left margin. When I click on the edit button all of the original formatting shows up correctly in the text window. I just took a screenshot of the original cinnamon-settings.menu file contents and uploaded the picture below.
To test these files with the changed format, I ran Linux Mint in a virtual environment with the VirtualBox program. I did not notice any change in the operation of the menu.
You could always edit the post and put the code text in a code box. It's the fifth option from the left.

Code: Select all

like this

User avatar
roblm
Level 8
Level 8
Posts: 2420
Joined: Sun Feb 24, 2013 2:41 pm

Re: Cinnamon app menu a mess.

Post by roblm » Thu Feb 28, 2013 9:22 pm

I used your suggestion about using the code option and made the changes to the 3 files listed in the February 27th post. The formatting appears correct now.
I had planned to send the 3 files as attachments, which also worked. This topic is actually the first time I have responded in the linux forum so I was not familiar with the options above the text window.

violent23
Level 1
Level 1
Posts: 15
Joined: Sun Sep 05, 2010 10:23 pm

Re: Cinnamon app menu a mess.

Post by violent23 » Thu Feb 28, 2013 9:36 pm

Great work roblm. Glad to have a way to fix this broken menu and it's editing app.

User avatar
roblm
Level 8
Level 8
Posts: 2420
Joined: Sun Feb 24, 2013 2:41 pm

Re: Cinnamon app menu a mess.

Post by roblm » Thu Feb 28, 2013 11:04 pm

Mint 18.3 Cinnamon Menu and Panel Editing

Some of this info comes from the topic Cinnamon menu editing in this link:
viewtopic.php?f=228&t=129524

However, that topic is now locked, so I can’t add any updates to it. The updates will be added to this topic instead. This guide should be used by Mint 17 and 18 users because it has some updated info. The goal is to make the default Cinnamon menu as compact as possible by reducing it’s dimensions and removing unneeded Categories, Applications and features. This helps to minimize scrolling and mouse movements when searching for an app. I will also discuss changing the icons in the menu and panel to more vibrant ones and creating a custom panel.

First remove any unneeded menu Categories. In my menu, there are two apps that I use in the Internet Category. Firefox is on the panel and Transmission is in the Favorites box, so the Internet Category can be removed. In the Graphics Category, I use GIMP and Inkscape. GIMP is already in the Favorites box. I can add Inkscape to another Category, so then the Graphics Category can be removed. I add Inkscape to the Accessories category by opening the menu editor, clicking once on Inkscape to highlight it, clicking the Copy button on the right, selecting the Accessories category and then clicking the Paste button on the right.

Remove any duplicate app that is listed in the Favorites column or has a panel launcher and is also visible in a Category. For example, my Favorites column lists Terminal and it is also in the Administration category. However, if I open the menu editor and make it invisible in the Administration category, then it will disappear from the Favorites column. To prevent that, I can make a copy of Terminal in the menu editor and paste it into another category that is not listed in the menu, such as System Tools, but be sure it is marked as visible.

Then remove any menu apps that are infrequently or never used. Many of the apps found in the Administration and Preferences categories can be found in Preferences > System Settings.

The icons in the Favorites column of the default menu are larger than the Category and Application icons and there is an excessive amount of vertical spacing between them. This can be seen in the left menu in the picture below.

Cinnamon menu-b.jpeg

The icon size and vertical spacing can be reduced. The menu on the right is the edited compact menu. At that particular height, the default menu can display 2 extra icons above the 3 system icons in the Favorites box. The edited menu has room for 7 extra icons in the Favorites box and 3 extra icons in the Apps column.

My first change was to remove the Lock Screen icon in the Favorites box on the left side. I never use it but it’s function can be executed by pressing Ctrl+Alt+L at the same time. The Logout icon was also removed. It’s function can be executed by pressing Ctrl+Alt+Backspace at the same time.

To remove those icons, open the File Manager and go to /usr/share/cinnamon/applets
Right click on the folder menu@cinnamon.org and select Open as Root. Before editing any files, always make a backup copy first. Right click on the applet.js file and select Copy. Then right click in the empty space and select Paste. Then open the file and in the menu at the top click Search > Find. Then type: //Separator

Add /* followed by a space in front of the line //Separator.
Then type //Shutdown button in the Search > Find window. The line just above will be edited. Go to the end of the line, add a space and then add */. The lines between those two symbols will not be read now. Save the file. Any changes made can be seen by restarting Cinnamon, using one of these four methods:

1. Right click on the panel and select Troubleshoot > Restart Cinnamon.
2. Press the Ctrl+Alt+Esc keys at the same time. (My least favorite method. It has the least amount of visual feedback when used and sometimes doesn't work).
3. Press the Alt+F2 keys at the same time. Then type the letter r and Press Enter.
4. Add the Restart Cinnamon applet to the panel but it needs to be installed first. Right click on the panel and select Add applets to the panel. Click the Download button. Find the Restart Cinnamon applet and click the down arrow to install it. Then click the Manage button. The new applet should be at the top. Now only a single click is needed.

I recommend making only one change at a time. If there is an undesired effect, then it can be easily reversed. The code box below shows the edited section:

Code: Select all

/* //Separator
        if (launchers.length != 0) {
                let separator = new PopupMenu.PopupSeparatorMenuItem();
                this.favoritesBox.add(separator.actor, { y_align: St.Align.END, y_fill: false });
        }

        //Lock screen
        let button = new SystemButton(this, "system-lock-screen", launchers.length + 3,
                                      _("Lock screen"),
                                      _("Lock the screen"));

        this._addEnterEvent(button, Lang.bind(this, this._favEnterEvent, button));
        button.actor.connect('leave-event', Lang.bind(this, this._favLeaveEvent, button));

        button.activate = Lang.bind(this, function() {
            this.menu.close();

            let screensaver_settings = new Gio.Settings({ schema_id: "org.cinnamon.desktop.screensaver" });
            let screensaver_dialog = Gio.file_new_for_path("/usr/bin/cinnamon-screensaver-command");
            if (screensaver_dialog.query_exists(null)) {
                if (screensaver_settings.get_boolean("ask-for-away-message")) {
                    Util.spawnCommandLine("cinnamon-screensaver-lock-dialog");
                }
                else {
                    Util.spawnCommandLine("cinnamon-screensaver-command --lock");
                }
            }
            else {
                this._screenSaverProxy.LockRemote("");
            }
        });

        this.favoritesBox.add(button.actor, { y_align: St.Align.END, y_fill: false });

        //Logout button
        button = new SystemButton(this, "system-log-out", launchers.length + 3,
                                      _("Logout"),
                                      _("Leave the session"));

        this._addEnterEvent(button, Lang.bind(this, this._favEnterEvent, button));
        button.actor.connect('leave-event', Lang.bind(this, this._favLeaveEvent, button));

        button.activate = Lang.bind(this, function() {
            this.menu.close();
            this._session.LogoutRemote(0);
        });

        this.favoritesBox.add(button.actor, { y_align: St.Align.END, y_fill: false }); */

        //Shutdown button

My compact menu lists only 15 apps, so there was no need for the All Applications category button. To remove it, type this in the Search > Find window: allAppsCategoryButton = new

Add /* and a space to the beginning of that line. Then go down 18 lines to this line:
this._categoryButtons.push(this._allAppsCategoryButton);

Add a space and then */ to the end of it. The edited section is shown below:

Code: Select all

/* this._allAppsCategoryButton = new CategoryButton(null);
        this._addEnterEvent(this._allAppsCategoryButton, Lang.bind(this, function() {
            if (!this.searchActive) {
                this._allAppsCategoryButton.isHovered = true;

                this._clearPrevCatSelection(this._allAppsCategoryButton.actor);
                this._allAppsCategoryButton.actor.style_class = "menu-category-button-selected";
                this._select_category(null);

                this.makeVectorBox(this._allAppsCategoryButton.actor);
            }
         }));
         this._allAppsCategoryButton.actor.connect('leave-event', Lang.bind(this, function () {
            this._previousSelectedActor = this._allAppsCategoryButton.actor;
            this._allAppsCategoryButton.isHovered = false;
         }));

         this.categoriesBox.add_actor(this._allAppsCategoryButton.actor);
         this._categoryButtons.push(this._allAppsCategoryButton); */

When the menu is now opened, all the apps listed in All Applications will still appear in the scrolling menu on the right, so it can be used if needed, but will disappear after another category is touched, and won't reappear until the menu is reopened.

To decrease the Favorites icon size, find these lines in the top section of the applets.js file, going down 27 lines from the top:
const MAX_FAV_ICON_SIZE = 32;
const CATEGORY_ICON_SIZE = 22;
const APPLICATION_ICON_SIZE = 22;


In the first line, change the default value of 32 to 27. You can decrease this number more but if the value is less than 25, then the three system icons will be changed to a very basic appearance, unless the icons are changed. The second line changes the Category icon size and the third line changes the Application icon size.

Then in the Search > Find window type: FavoritesButton.prototype
Go down to this line:
this.actor.style = "padding-top: "+(icon_size / 3)+"px;padding-bottom: "+(icon_size / 3)+"px;";

Change the number 3 to a 6 in both places to reduce the excessive vertical spacing in the Favorites box. Try 8 for even less space.

Then do a search for: SystemButton.prototype, which is 36 lines down. Find this line:
this.actor.style = "padding-top: "+(icon_size / 3)+"px;padding-bottom: "+(icon_size / 3)+"px;";

Change the number 3 to a 6 in both places. However, if you decide to remove the Lock Screen and Logout buttons like I did, then consider not changing the first number 3. This will leave a larger separation between the Shutdown icon and the Favorites App icons above it.

If you want to replace the default Shutdown icon to the one shown in my menu, then open the File Manager. If all the hidden folders and files are not displayed, then Click View > Show Hidden Files or Press Ctrl+H. Check for a folder named .icons (there is a dot before the name). If it doesn’t exist, then create it by right clicking in the empty space and selecting Create New Folder.

Then go to /usr/share/icons/Mint-Y/actions. Right click on the folder 96 and select Open as Root. Right click on the icon system-shutdown.png and select Copy. Click the home folder (not Home at the top) in the column on the left side. On the right side, click the folder with your user name and then the .icons folder. Paste the copied icon there. Right click on the icon and select Rename. The new name will be system-shutdown-2. This has to be done because the default Quit icon is named system-shutdown. On the left side, click File System and go back to /usr/share/cinnamon/applets/menu@cinnamon.org and open the applets.js file. In the Search > Find window, type:
//Shutdown button
In the line below this, change the name system-shutdown to system-shutdown-2

In Mint Cinnamon 17.x and previous versions, there was a round version of that icon but it’s no longer available. However, the square icon can be edited in Gimp to make it look round. Or you can download my round system-shutdown icon from imgur. I have also included a round Firefox icon and penguin icon. Here is the link: https://imgur.com/a/Gzgod

In Mint 18, most round icons have been removed, which doesn’t look quite right for some icons. The Firefox icon now shows a fox wrapped around a square globe.


Changing the Menu Category and Application Icons:

To change an Application icon in the menu, right click on the Menu button and select Configure. Click Menu > Open the menu editor.
An alternate quicker way to open the menu editor is to open the menu to Preferences > Cinnamon Menu Editor.

Right click on the app’s icon to be changed and select Properties. Click on the icon and then click the icons folder on the left side. Most of the icons used are in the Mint-X folder. Select the icon type, such as apps or categories, and then the icon size. Size 48 is fine or use 96 for more detail. You can also use a custom icon, which can easily be created by using my guide in the topic Mint 17 MATE Menu Editing, in the link below:
viewtopic.php?f=206&t=185952

Go down to the section Making Custom Icons in my first post.

Use the same instructions to change a Category icon in the menu to another existing icon in the Mint-X folder. However, using a custom icon, as I used in the Accessories and Administration categories, is more complicated.

EDITED: To use a custom icon for an existing or newly created menu category, first open the File Manager and check that Hidden Files are visible. Otherwise click View > Show Hidden Files, or press Ctrl+H. Add the icon to the /home/your-user-name/.icons folder. If it doesn't exist, then create it. Open the Menu Editor and right click on the category whose icon you want to change and select Properties. Click the icon, which brings up the Choose an icon window. Right click in the empty space and mark the checkbox next to Show Hidden Files. Click Home on the left side and then the .icons folder. Select the new icon. Open the menu and see if the new icon is visible. Usually it is not. To correct this, go to /home/your-user-name/.local/share/desktop-directories. Look for the file that has the info for the category you wish to change. Some file names will include the actual category name, such as cinnamon-graphics.directory for the the Graphics category. However, these categories will have different names:

Code: Select all

Accessories		      cinnamon-utility.directory
Administration		      cinnamon-settings-system.directory
Internet	              cinnamon-network.directory
Preferences		      cinnamon-settings.directory
Sound & Video	              cinnamon-audio-video.directory
When a new category is created, such as Favorites, it will not appear in the menu until one application is added to it and made visible, and the file name listed in desktop-directories will be similar to this:
alacarte-made-d5e8c300-35ea-11e8-be24-f46d04e8bb3c.directory

Open the file. The category name will be in the line Name=. Go to the bottom. The name of the icon should be listed after Icon=. Usually there is a misconfiguration by the desktop manager and the full path to the icon's location is listed after Icon=, such as Icon=/home/your-user-name/.icons/new-icon-name.png. This should be changed to Icon=new-icon-name, without the .png extension.

Previous instructions were to copy the custom icon to the /home/your-user-name/.icons folder and with root authority add it to the /usr/share/icons/Mint-X/categories/48 folder (or other numbered folder). Then open the Menu Editor to change the category icon and select the icon's location from /usr/share/icons/Mint-X/categories/48. This method also worked because when the icon is selected from this location in the Menu Editor, then the Icon= line is configured correctly. END OF EDITING:

To make the menu even more compact, the menu’s Favorites box width can be decreased. The configuration file of the Cinnamon theme that is being used will have to be edited. I used the default Linux Mint theme. Check in System Settings > Themes, next to Desktop, to see what theme is being used. Then open the File Manager and go to /usr/share/themes, right click on the theme being used and select Open as Root. Open the cinnamon folder. Right click on the cinnamon.css file and select Copy. Paste it into the empty space to make a backup. Open the file and in the Search > Find window type:
.menu-favorites-box

Lower the value in the line padding: 10px; to reduce the width of the Favorites box. I used 2px. You may want to Increase the value in the line border: 1px solid rgba(90,90,90,1); to make the sides of the Favorites box wider, so they are more visible. I used 3.

Code: Select all

 .menu-favorites-box { 
        margin: auto;
        padding: 10px;
        border: 1px solid rgba(90,90,90,1); 
        border-radius: 4px; 

I recommend copying each line that you plan to edit. Then pasting it to the right of the original line and adding /* to the beginning of the line and */ to the end, so it won’t be read, but you now have a backup of the original settings. For example, the line padding: 10px; is changed to this edited line, which has the new value:

Code: Select all

padding: 2px;		/* padding: 10px; */

Go down to .menu-favorites-button { and lower the values of these 4 lines, which are the 4 sides surrounding a Favorites icon. I used 2px:
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;


The spacing between the Favorites, Categories, and Applications columns can be reduced by going down to the section
.menu-categories-box {, and changing these lines:
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 10px;


Change padding-top to 0, padding-left to 20, and padding-right to 10.
Increasing padding-bottom will allow more apps to be displayed but can increase the height of the menu. This number should be increased as the number of categories decreases, so that the same number of apps are listed.

Then go down to the section .menu-applications-box { and change the value of these lines to 0px:
padding-top: 10px;
padding-right: 10px;


Don’t reduce the value for padding-left or the Favorites box will be moved to the left edge of the menu.

Then go down to the section .menu-application-button { and change the value of this line to 0
padding-top: 7px;

This will reduce the spacing between the apps to allow more to be displayed.

Then go down to the section .menu-application-button-selected { and change the value of this line to 0:
padding-top: 7px;

Here is one potential problem. As the number of categories displayed in the menu is reduced, there may also be a reduction in the number of apps displayed, as seen in the left menu in the picture below:

Cinnamon menu-3.png

To display more apps, the cinnamon.css file is edited. In the Search > Find window, type:
.menu-applications-box {, and change the value of this line:
padding-bottom: 10px;

I used the value of 80, which allowed 8 apps to be displayed, without increasing the height of the menu. As that value is increased, more apps will be displayed, but the height of the menu will also increase. The compact menu in the middle in the picture above is the one I’m currently using.

To display even more apps, the icon size for apps can be made smaller and/or reduce the spacing between apps even more by going to this section and reducing the value of the line padding-bottom: 7px;

Code: Select all

.menu-application-button {
    padding-top: 0px;
    padding-left: 7px;
    padding-right: 7px;
    padding-bottom: 7px;
    max-width: 10px;
}
Also, the line padding-bottom: 7px; should be changed in this section to the same value:

Code: Select all

.menu-category-button-selected {
    padding-top: 7px;
    padding-left: 7px;
    padding-right: 7px;
    padding-bottom: 7px;
The menu on the right in the picture above shows this, using the value padding-bottom: 3px;

The menu categories can also be moved closer together by going to the sections .menu-category-button { and
.menu-category-button-selected {. Then reduce the value in these lines. They should be the same for both sections:
padding-top: 7px;
padding-bottom: 7px;


In the menu on the right in the picture above, only the value in the line padding-top: 7px; was changed to 0.

To change the font size of only the menu, open the cinnamon.css file. In the Search → Find window type:
.menu {. You will see this section:

Code: Select all

.menu {
    /*border: 1px solid rgba(120, 120, 120, 1);*/
    border: 1px solid rgba(50, 50, 50, 1);
    border-radius: 4px;
    background-color: rgba(63, 63, 63, 0.95);
    color: #fff;
    font-size: 9.5pt;
    min-width: 100px;  
Change the value of the line font-size: 9.5pt.

Since I only have 16 apps in my menu, there is also no need for a Search window. To remove it, open the cinnamon.css file. In the Search → Find window type .menu-search-box. Change the value of this line to 0px:
padding-left: 30px;

In the next section below, under #menu-search-entry {, find these 5 lines and change the values to 0px. The first line has two numbers to change:

Code: Select all

    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid rgba(245,245,245,0.2);
    caret-size: 1px;
    width: 250px;
In the next section below, under #menu-search-entry:hover {, change the value of 1 to 0 in these two lines:
border: 1px solid rgb(150,150,150);
border: 1px solid rgba(120,120,120,1);


Under .menu-search-entry-icon {, change the value of this line to .1. Don’t use 0:
icon-size: 1em;


If future editing of the applets.js or cinnamon.css files is needed, then these commands used in the Terminal can also be used to open them:

Code: Select all

gksudo xed /usr/share/cinnamon/applets/menu@cinnamon.org/applet.js

gksudo xed /usr/share/themes/Linux\ Mint/cinnamon/cinnamon.css

Optional method: The theme being used in /usr/share/themes can be copied to /home/your-user-name/.themes and edited there. Then it can’t be changed from a system update. However, it will not be in effect for other users. Use this command:

Code: Select all

sudo cp -R /usr/share/themes/name-of-theme /home/your-user-name/.themes
However, there can’t be any spaces in a folder’s location path in that command, so for the theme Linux Mint, the command is:

Code: Select all

sudo cp -R /usr/share/themes/Linux\ Mint /home/rlm1/.themes
The backslash after the word Linux instructs that the space after it is ignored.

Then change the ownership of the folder Linux Mint and all it’s subfolders and files from root to yourself:

Code: Select all

sudo chown -R your-user-name /home/your-user-name/.themes/name-of-theme
For the Linux Mint theme, use this command:

Code: Select all

sudo chown -R your-user-name /home/your-user-name/.themes/Linux\ Mint
Now the cinnamon.css file can be opened without root authority. Be sure to make a copy of it before any editing.

Also optional, the /usr/share/cinnamon/applets/menu@cinnamon.org/applets.js file can be copied to
/home/your-user-name/.local/share/cinnamon/applets and edited there.

Code: Select all

sudo cp -R /usr/share/themes/Linux\ Mint /home/your-user-name/.local/share/cinnamon/applets

sudo chown -R your-user-name /home/your-user-name/.local/share/cinnamon/applets/Linux\ Mint

Mint 18.3 Cinnamon panel editing:

The default icons in the System Tray area are a dull gray color and very plain and flat looking, as seen on panel 1A in the picture below, except for the Parcellite clipboard manager icon, which was added after the initial Mint installation. The black X is the Force Quit applet:

Cinnamon 18.3 system tray.png

Here’s how to change them to more vibrant and colorful icons. For these examples, the Network Manager, Removable drives, Sound, and Notification applet icons will be changed. I may change others later. The default icons are located here:

For the Network Manager, the example will be for a wired connection only, not for wireless.

EDITED: Important note: there already is a black Network Manager icon on the panel, however, it’s applet still must be added to the panel by right clicking on the panel and selecting Add applets to the panel.
End of editing.

Two icons are used. This one is used when there is a connection:
/usr/share/icons/Mint-X/status/scalable/network-wired-symbolic.svg

This one is used when there is no connection:
/usr/share/icons/Mint-X/status/scalable/network-offline-symbolic.svg

The icon used for Removable drives is found here:
/usr/share/icons/gnome/scalable/devices/drive-harddisk-symbolic.svg

The icon used for Sound is found here:
/usr/share/icons/Mint-X/status/scalable/audio-volume-high-symbolic.svg

The icon used for muted Sound is found here:
/usr/share/icons/Mint-X/status/scalable/audio-volume-muted-symbolic.svg

There are actually 4 slightly different icons used for Sound, which represent muted, low, medium and high, depending on the sound volume, but they are very hard to distinguish with the default icons. I changed the icon for high volume, which is sound above 66%, and the icon when the sound is muted.
If the sound goes below this value, then the default icon will be used. This should not be a problem on a desktop PC because the volume can also be controlled with a knob on a speaker, but this method can’t be used for a laptop. To prevent this, the new Sound icon can be used for these other two icons:
/usr/share/icons/Mint-X/status/scalable/audio-volume-medium-symbolic.svg
/usr/share/icons/Mint-X/status/scalable/audio-volume-low-symbolic.svg

The icon used for the Notification applet is found here:
/usr/share/cinnamon/applets/notification@cinnamon.org/icons/ normal-notif-symbolic.svg

EDITED: The icon low-notif-symbolic.svg, for low notification priority, should also be changed. The same replacement icon for normal notification priority can be used.

All the icons are in the SVG graphics format (scalable vector graphics). So any replacement icons that are in the .png and .jpeg format must be changed to .svg. This is easy to do using the Inkscape vector graphics program. Use this command in the Terminal to install it: sudo apt install inkscape

Search for replacement icons in /usr/share/icons or use Google Images or search for network icons, speaker icons, usb icons and notification icons. After downloading the icons, they can be edited, if needed, using Gimp. They should be square. Then open them in Inkscape. Select File > Save As… and save the file as an Inkscape SVG file.

To change the default Sound icon, open the File Manager, right click on the Downloads folder and select Open as Root. Right click on the new Sound icon, which should have the .svg extension and select Copy. On the left side, click File System. On the right side, go to /usr/share/icons/Mint-X/status/scalable

Right click in an empty space and select Paste. Right click on the icon audio-volume-high-symbolic.svg and select Rename. Add three X’s to the name, so it will now be audio-volume-high-symbolicxxx.svg
Right click on the pasted new icon and select Rename, and name it audio-volume-high-symbolic.svg
Save the file. To see the new icon, restart Cinnamon. Repeat the process for the
audio-volume-muted-symbolic.svg icon and the others.

The new icons are shown on panel 1B. The Network Manager icon shows an X, which represents a disconnection. On panel 1C, the Network Manager shows there is a connection and the spacing between icons has also been increased a little. This is done by opening the cinnamon.css file. In the Search > Find window, type: .applet-box {

Change the value of 3 in these two lines to increase the spacing:
padding-left 3px;
padding-right 3px;


Panel 1C in the picture above has a value of 5. Panel 1D shows Sound is muted and there has been a Notification displayed.

You can download my custom icons from Imgur. However, that site won’t upload images in the .svg format, so you will need to convert the .png files to .svg using Inkscape, as previously discussed:
https://imgur.com/a/TuXxo

The date-time format on the Calendar applet has also been changed. I’m sure everyone knows whether the time is AM or PM. Right click on the applet and select Configure. Turn on the button next to Use a custom date format. In the window next to Date format, first copy the characters, in case any change needs to be reverted. Then change the characters to this: %l:%M

The spacing between the panel launcher icons on the left side of the panel can also be changed. In the cinnamon.css file, search for .panel-launcher {
Change the value in this line: spacing: 2px;

This can also be done by changing the value of these two lines in the section just below:
padding-left: 2px;
padding-right: 2px;



UPDATED 2-16-18:
I still wasn’t happy with my final panel height and system tray applet icon height. I wanted a lower panel but taller icons, that filled most of the panel height. As seen on panel 2A in the picture above, the icons only fill about 55% of the panel height. This result is from letting Cinnamon automatically scale the icons as the panel height increases. This was done by right clicking on the panel and selecting Panel settings. Then the buttons next to Use customized panel size and Allow Cinnamon to scale panel text and icons according to the panel height were turned on.
So I moved the panel height slider to the right further until the desirable applet icon height was displayed, as shown on panel 2B, but this panel was unacceptably high and the panel launcher icons on the left side of the panel were excessively large. However, they could be made smaller. You would need to go to /usr/share/cinnamon/applets/panel-launchers@cinnamon.org and open the applets.js file. Change the value of this line to 0.6 or less:
const ICON_HEIGHT_FACTOR = 0.7;

I moved the panel slider back and then went to /usr/share/cinnamon/applets/systray@cinnamon.org and opened the applets.js file. The value in this line was changed to 1.0: const ICON_SCALE_FACTOR = 0.8;

I was expecting the height of all the applet icons to increase, but only the Parcellite icon changed, as seen on panel 2C. After some more investigation and testing, I found a solution. I turned off the two options in Panel settings, so now the panel would be manually configured. I went to /usr/share/themes/Linux Mint/cinnamon and opened the cinnamon.js file for editing. In the Search > Find window, you must go to #panel {. These lines are below:

Code: Select all

color: #ffffff;
    font-size: 9pt;
    font-weight: normal;
    height: 27px;
    width: 32px;
I changed the value in the line height: 27px; to 29 because the default panel height is a little too low. Surprisingly, changing the value in the line font-size: 9pt; not only increased the font height but the applet icon height. I used a value of 14. This gave the desirable applet icon height and they now almost filled the entire panel height, as seen on panel 2D. However, the Parcellite icon did not change. I had to go back to the /user/share/cinnamon/applets/systray@cinnamon.org/applets.js file and change the value of this line, which is near the top, to 26: const DEFAULT_ICON_SIZE = 20;

I also had to make the panel launcher icons on the left side a little larger. I went to
/usr/share/cinnamon/applets/panel-launchers@cinnamon.org and opened the applets.js file. The value of this line, which is near the top, was changed to 24:
const DEFAULT_ICON_SIZE = 20;

The final result is seen on panel 2E. The fonts size now used for any words displayed on the panel is a little larger than I would like but It's a very minor annoyance.

With the use of larger widescreen monitors, it can be an inconvenience having to reach far to the right with the mouse every time to access the system tray icons. This situation can be improved by adding one or more Spacer applets to the right of the system tray. Then right click on the Spacer, select Configure and then move the Spacer slider to the right, as far as is needed to move the system tray towards a more desirable position to the left.

How to change the panel color:

Open the cinnamon.css file and Search for .panel {, to see to this section:

Code: Select all

#panel {
    color: #ffffff;
    font-size: 9pt;
    font-weight: normal;
    height: 27px;
    width: 32px;
Add this line at the bottom:
background-color: rgba(R, G, B, T);

Open GIMP. If the Toolbox is not showing, then click Tools > New Toolbox. Click the rectangle at the bottom for Foreground and background colors. On the color chart above, click on the desired color. It will be seen below next to the word Current:

On the right side, copy the numbers next to R, G, and B (red, green and blue). Substitute those numbers for the letters R, G, and B in the line added above. The T refers to the translucency, which ranges from 0.1 to 1.0, which is the most opaque.

Or you can get your color info from websites such as these:
https://htmlcolorcodes.com/color-picker/
https://www.rapidtables.com/web/color/RGB_Color.html

How to change the panel button color for an open window:

Open the cinnamon.css file and search for .window-list-box {, to see this section:

Code: Select all

.window-list-box {
    spacing: 3px;
    padding-top: 1px;
Add this line at the bottom, using the correct values: background-color: rgba(R, G, B, T);

How to change the panel button font color:

Go down to this line: .window-list-item-box {, to see this section:

Code: Select all

.window-list-item-box {
    color: rgba(255,255,255,1.0);
    background-gradient-direction: vertical;
    background-gradient-start: rgba(100,100,100,0.5);
    background-gradient-end: rgba(50,50,50,0.5);
    box-shadow: inset 0px 0px 0px 1px rgba(80,80,80,0.5);
    border-radius: 4px 4px 0px 0px;
    padding: 1px;
    padding-left: 5px;
    padding-right: 5px;
    transition-duration: 100;
Change the values in the first line.

How to change the font color of the panel Menu button and the date/time button:

Search for .applet-label {, to see this section:

Code: Select all

.applet-label {
    font-weight: bold;
    color: #ccc;
Add this line to the bottom, using the correct values: color: rgba(R, G, B, T);
This also affects the color of the number that appears next to the notification icon, when there is a notification.

How to change the font color for the opened Menu:

Search for .menu {, to fine this section:

Code: Select all

.menu {
    border: 1px solid rgba(50, 50, 50, 1);
    border-radius: 4px;
    background-color: rgba(63, 63, 63, 0.95);
    color: #fff;
    font-size: 9.5pt;
    min-width: 100px;
Add this line to the bottom, using the correct values: color: rgba(R, G, B, T);
For bold fonts, add this additional line: font-weight bold; . Other values are lighter and normal.

Here is an example of what a custom panel can look like, in this link at imgur. Click on the picture to enlarge. Look at the top panel: https://imgur.com/a/FhF7o

For the green panel color, these are the values: background-color: rgba(110, 215, 200, 1.0);
For the dark green panel button color, these are the values: background-color: rgba(75,130,120,1.0);
For the light green panel button fonts, these are the values: color: rgba(210,255,245,1.0);
For the light green fonts for the Menu button and date/time button, these are the values: color: rgba(210,255,245,1.0);
For the light green bold fonts in the Menu, these are the values: color: rgba(210,255,245,1.0);

You will notice there is an attractive color gradient effect, where the color gradually gets darker going from the top to the bottom. To get this result, go to the section .panel-bottom { to see these lines:

Code: Select all

.panel-bottom {
    background-gradient-direction: vertical;
    background-gradient-start: rgba(70,70,70,0.9);
    background-gradient-end: rgba(50,50,50,0.9);
    box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5); 
}
I used these values for lines 2 and 3:
background-gradient-start: rgba(50,95,85,1.0);
background-gradient-end: rgba(65,115,105,1.0);


The first line gives the panel background color and the second is a darker shade of that color.

If you want to see the solid color without the gradient effect, then add a /* to the beginning of the first line and */ to the end of the third line, so they will look like this:

Code: Select all

/* background-gradient-direction: vertical;
    background-gradient-start: rgba(70,70,70,0.9);
    background-gradient-end: rgba(50,50,50,0.9); */
    box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
The bottom panel in the picture in the link above shows the result.


UPDATE - Changing the Network Wireless icons:

The picture in this link shows the default Network Wireless icon on the left panel. The middle and right panels show two different styles of more colorful replacement icons: https://imgur.com/a/76Fin

These 6 icons are used to display the network wireless status and are found in /usr/share/icons/Mint-X/status/scalable:

network-wireless-acquiring-symbolic.svg
network-wireless-signal-excellent-symbolic.svg
network-wireless-signal-good-symbolic.svg
network-wireless-signal-ok-symbolic.svg
network-wireless-signal-weak-symbolic.svg
network-wireless-signal-none-symbolic.svg

The replacement icons can be downloaded from imgur using these two links:
https://imgur.com/a/NSXjF
https://imgur.com/a/b0eSu

However, that site won’t upload images in the .svg format, so you will need to convert the .png files to .svg using Inkscape, as previously discussed.

After downloading, extracting and renaming the icons, add them to the Pictures folder. Then right click on the Pictures folder and select Open as Root. Copy all 6 icons at the same time. Click File System on the left side and go to
/usr/share/icons/Mint-X/status/scalable. Right click on the 6 default icons, one at a time, and rename them by adding xxx to their names, such as network-wireless-acquiring-symbolicxxx.svg. Then Paste the 6 new icons and restart Cinnamon.

UPDATE:
This info allows you change the position where the Notifications message box appears. The default location is at the top right corner of the screen. I prefer the lower left corner. See the picture in this link: https://imgur.com/a/w6BG0

To make the change, open the cinnamon.css file. In the Search > Find window, type: notifications. Add the line margin-top: XXXpx; to this section, where XXX is the pixel value:

Code: Select all

#notification {
    font-size: 8.5pt;
    border-radius: 10px 10px 10px 10px;
    border: 2px solid rgba(214,214,214,0.5);
    background-gradient-direction: vertical;
    background-gradient-start: rgba(66,66,66,0.9);
    background-gradient-end: rgba(55,55,55,0.9);
    padding: 8px 8px 8px 8px;
    spacing-rows: 10px;
    spacing-columns: 10px;
    margin-from-right-edge-of-screen: 20px;
    width: 34em;
    color: white;
    opacity:255px;
    mouseover-opacity:96px;
}
I added it just below the line margin-from-right-edge-of-screen: 20px;
I restarted Cinnamon. My final settings are:

Code: Select all

margin-from-right-edge-of-screen: 870px;
margin-top: 740px;
Also, the Notifications box color is very similar to the default Cinnamon desktop background color, making it less visible, and the text is too small. This can be changed to a brighter color and larger text, which will get your attention faster and make it easier to read. The picture in this link is an example: https://imgur.com/a/7qWai

The same section above from the cinnamon.css file was edited.
The value in the line font-size: 8.5pt; was changed to 12pt.
These 3 lines give the background color, so they were disabled by adding a /* to the beginning of the first line and a */ to the end of the third line. They will then look like this:

Code: Select all

/* background-gradient-direction: vertical;
    background-gradient-start: rgba(66,66,66,0.9);
    background-gradient-end: rgba(55,55,55,0.9); */

This line was then added just below those lines to give the new color. It's a solid color, not a color gradient:
background-color: rgba(220,140,5,1.0);

This line was added to show a darker, thicker border: border: 6px solid rgba(90,60,1,1.0);

Then the line border: 2px solid rgba(214,214,214,0.5); is inactivated by changing it to this:
/* border: 2px solid rgba(214,214,214,0.5); */

The line color: white; was changed to color: black; for black text color.

Then go down to this section:

Code: Select all

#notification.multi-line-notification {
    padding-bottom: 8px;
    color: white;
}
Change the line color: white; to color: black; and add the line font-weight: bold; to give bold fonts. Finally, add the line border: 6px solid rgba(90,60,1,1.0); . So the section will look like this:

Code: Select all

#notification.multi-line-notification {
    padding-bottom: 8px;
    color: black;
    font-weight: bold;
   border: 6px solid rgba(90,60,1,1.0); 
}
For single line notifications, the notification box needs to be taller, so it's more visible. Increasing the font size helped a little but this can be increased further by increasing the padding at the top and bottom of the box. The line padding: 8px 8px 8px 8px; was changed to padding: 30px 8px 30px 8px;
The change can be seen in the picture in this link: https://imgur.com/a/fHKcq


How to change the desktop icon text color from white to black:

If you're using a light desktop background, then the white text used for desktop icons will be less visible, so a black text would be helpful. To do this, open the File Manager and be sure Hidden Files are visible. Then go to /home/your-user-name/.config/gtk-3.0. Right click in the empty space and select Create Document > Empty File. Name it gtk.css. Open the file and add these lines:

Code: Select all

.nemo-desktop.nemo-canvas-item {
color: #000000;
}
Logout and back in. Other color codes can be used.


Cinnamon menu extremely compacted:

Here is an even more compact menu, which has the Favorites box and Shutdown button removed and a new Favorites category added: https://imgur.com/a/DsxiJ0e

This is done by right clicking the menu button and selecting Configure > Menu. Click the button next to Show favorites and quit options, so it is turned OFF.

Some users may prefer to have text next to the icons in the Favorites app section, so a Favorites category was created with the Menu Editor. A tilde character was typed before the name, which moved the category to the bottom, since it is usually accessed the most. I used a custom icon with a custom name, so it did not appear in the menu at first. I went to the desktop-directories folder and found this file had been created: alacarte-made-d5e8c300-35ea-11e8-be24-f46d04e8bb3c.directory

Next to Icon= was listed the full path to the icon's location, so I had to change it to only the icon's name. Since the Shutdown button was removed, another had to be added. This can be done in two ways. The Shutdown applet can be added to the panel, which needs to be downloaded first, or a new Shutdown launcher can be created and added to the panel, which is what I did.

Here are the steps. Open the Menu Editor and select an unused category, such as System Tools. Click the New Item button. The hard part was getting the same Command that was used in the original Shutdown button, which is cinnamon-session-quit --power-off. Then right click on the new launcher in the menu and select Add to panel.

To add apps to the Favorites category, open the Menu Editor. Click on any app you want to add and click the Copy button. Then select the Favorites category and click the Paste button. One disadvantage is that the apps can't be rearranged in a preferred order, like the original Favorites box is able to do.

To add the border around the Categories and Applications boxes, add the line border: 1px solid rgba(90,90,90,1); to the .menu-categories-box { and .menu-applications-box { sections of the cinnamon.css file.


Additional menu tweaks:

The menu on the left in the picture in this link has a color gradient added to the Favorites box:
https://imgur.com/a/EeiNn

The default menu is supposed to have a vertical gradient but the gradient start and end colors are too similar to notice it. These are the settings in the lines from the cinnamon.css file that are needed to show the gradient above. The gradient has been changed to a horizontal one, with the color getting lighter going from the left margin to the right. Increasing the value of the padding line will make the box wider and the gradient more noticeable:

Code: Select all

.menu-favorites-box {
    margin: auto;                
    padding: 4px;           
    border: 3px solid rgba(90,90,90,1);
    border-radius: 4px;
    background-gradient-direction: horizontal;
    background-gradient-start: rgba(62,62,62,1);
    background-gradient-end: rgba(112,112,112,1);
} 
This color gradient can be added to the Categories box and Applications box, as seen in the menu on the right in the picture above, by adding these lines to the .menu-categories-box { and .menu-applications-box { sections:

Code: Select all

background-gradient-direction: horizontal;
background-gradient-start: rgba(62,62,62,1);
background-gradient-end: rgba(112,112,112,1);

FINAL MENU CHANGES:

Here is the menu I’m using now, as seen in this link: https://imgur.com/a/PCuVYu6

If you decide to use a very compact menu like I do, then you will have hidden some menu categories and many apps. These apps won’t show in the All Applications category either, in case you decided not to remove it. The disadvantage to using this menu is when needing to use an infrequently used app, such as Software Manager or Disks. This requires opening the Menu Editor, making an app visible, running the app and then making it not visible again. Another quicker method can be used which is to create a launcher that opens the /usr/share/applications folder when clicked. That folder lists all the installed apps on the system, which can be clicked on to open. See this link: https://imgur.com/a/QbBtdRQ

To do this, open the Menu Editor and create a new category, such as ALL APPS. Then create a new launcher in that category and for the Command use: nemo /usr/share/applications. I named it Show All Apps. Next to Comment, I typed Show all installed applications. To position the ALL APPS category at the top of the menu, add one space before the name. Otherwise, it will be listed after the Accessories category.

If you did not remove the default All Applications category, then add the new Show All Apps launcher to any other category that is visible.

Here are the other changes I made:

1. Increased the font size from 9.5 to 10. In the cinnamon.css file, search for .menu { and change the line font-size: 9.5pt;

2. Made the menu border visible. Under .menu { remove /* and */ from the line
/* border: 1px solid rgba(120, 120, 120, 1); */
Add /* to the beginning and */ to the end of line border: 1px solid rgba(50, 50, 50, 1);

3. Removed the menu transparency. Under .menu { change background-color: rgba(63, 63, 63, 0.95); to background-color: rgba(63, 63, 63, 1);

4. Made the menu corners more rounded. Search for .menu.bottom { and change this line:
border-radius: 4px 4px 0 0; to border-radius: 8px 8px 8px 8px;

5. Made the border around the Favorites box more visible (lighter) and thicker. Search for .menu-favorites-box { and change the line border: 1px solid rgba(90,90,90,1); to border: 2px solid rgba(120,120,120,1);

6. Moved the location for the pop-up text that shows the name and description of an app when hovering over it, from the bottom right side to the left, as seen in the picture above. Search for .menu-selected-app-box { and change the value in the line padding-right: 30px; to 0px and change the value in the line padding-left: 28px; to 50 or whatever value you desire.
Change text-align: right; to text-align: left;

7. Changed the menu categories so that they are all in the correct alphabetical order. I don’t know why the Mint developers continue to list the Administration and Preferences categories at the bottom. This change is more complicated. A new Administration2 and Preferences2 categories will need to be created. First use this command to make a backup of the cinnamon-applications.menu:

Code: Select all

sudo cp /etc/xdg/menus/cinnamon-applications.menu /etc/xdg/menus/cinnamon-applications.menu.old
To restore the original file, use this command:

Code: Select all

sudo cp /etc/xdg/menus/cinnamon-applications.menu.old /etc/xdg/menus/cinnamon-applications.menu
Then use this command to open the cinnamon-applications.menu for editing:

Code: Select all

gksudo xed /etc/xdg/menus/cinnamon-applications.menu
Add these sections at the bottom, just above the last line that says </Menu> <!-- End Applications -->

Code: Select all

<Menu>
    <Name>Administration2</Name>
    <Directory>cinnamon-settings-system2.directory</Directory>
    <Include>
         <Category>System</Category>
    </Include>
  </Menu>

<Menu>
    <Name>Preferences2</Name>
    <Directory>cinnamon-settings2.directory</Directory>
    <Include>
      <And>
        <Category>Settings</Category>
        <Not><Category>System</Category></Not>
      </And>
    </Include>
  </Menu>
Open the File Manager and go to /.local/share/desktop-directories and create a cinnamon-settings-system2.directory file and add these lines:

Code: Select all

[Desktop Entry]
Name=Administration
Icon=preferences-system
Type=Directory
Then create a cinnamon-settings2.directory file and add these lines:

Code: Select all

[Desktop Entry]
Name=Preferences
Icon=preferences-desktop
Type=Directory
The new categories will be listed in the menu with the same Administration and Preferences names as the original ones but will be listed above them.

Caution: You can then delete the bottom Administration and Preferences categories in the menu editor or leave them and make them not visible. If you delete them, then they can’t be restored, if you decide to reverse the changes.


My last post in this topic has info on Mint 18.3 Xfce Applications Menu Editing:

viewtopic.php?f=47&t=160784


Please do not add a new post to this topic. Since the topic is old, a forum moderator would then probably lock it. Then I would be unable to add any more updates. If you have a question, then contact me with a Private Message.
Last edited by roblm on Sat Jun 16, 2018 10:27 am, edited 71 times in total.

Chris_Z
Level 1
Level 1
Posts: 14
Joined: Sun Dec 16, 2012 4:18 pm
Location: Stockholm, Sweden

Re: Cinnamon app menu a mess.

Post by Chris_Z » Tue Mar 05, 2013 10:33 am

"Why are the apps in Administration duplicated in Preferences?"

It's a bug:

https://github.com/linuxmint/Cinnamon/issues/1217

Post Reply

Return to “Cinnamon”