Icon Overhaul

[DaanSelen]

Is your feature request related to a problem? Please describe. The thing I don't like about meshcentral at the moment is it's old-looking UI, which would be an improvement if modernized.

Describe the solution you'd like A clean new UI, for easy navigation and modern looking, ( in my opinion the current UI looks like Windows 7 era).

Describe alternatives you've considered I have tried tehse examples, and I am particularly fond of the GitHub repo made by ijustw0rkhere. https://github.com/ijustw0rkhere/mesh-materialui and https://cheesefather.com/wp-content/uploads/2023/03/Untitled-3.jpg

Additional context No additional context

[si458]

All that repo is, is a style sheet, which u can apply yourself ontop of your existing meshcentral install

I can't fully remember how it's done/works, but I'll look into it for you!

[DaanSelen]

Thank you for your response, I have created a fork from the ijustw0rkhere repository to create a custom stylesheet. So if you have specific changes you can contact me.

It would help if there were guidelines for changing it.

[HeyVern]

I was also able to accomplish alot with modifying files and using the override file feature. I hesitate to suggest a major overhaul to the existing interface as there is SO MUCH FUNCTIONALITY hidden in the existing one. I have grown quite fond of it after doing some deep dives. A new interface would mean that level of functionality would have to be ported over and likely cause an inevitable loss of functionality in the beginning.

If I would suggest anything is maybe we would put together a styled Icon replacement pack.

[DaanSelen]

An icon replacement pack of maybe some color changes might go a long long way.

[tomsik-radek]

I agree, newer icon pack (not from Windows 7 or Vista) would make MC feel much fresher.

[DaanSelen]

I agree, newer icon pack (not from Windows 7 or Vista) would make MC feel much fresher.

I agree that it would be nice to move beyond Windows 7 looks, I would like to maybe suggest a font change.

[HeyVern]

Is this a step in the right direction?

[tomsik-radek]

Is this a step in the right direction?

I personally like this. It has very much Windows 11 aesthetic (including front facing icons) without being fully Windows icons.

[tomsik-radek]

Also, not sure if I should make a separate ticket, but some docs for the meshcentral-web folder would be nice (or maybe I'm blind). I can only find the video on it, but no text documentation. Is it even possible to have different style sheets per Meshcentral domain?

[DaanSelen]

Is this a step in the right direction?

I love the initiative, and it's a very big improvement on the current icons. Could you message me the icon pack, if you'd like me to fork and stage the change, to test with it.

[DaanSelen]

I'm sorry for referencing my own personal repo. But I like the look of this with it's icons. However I do not have the knowledge to see where the icons are stored, I do not see any apparent .png files.

[tomsik-radek]

I'm sorry for referencing my own personal repo. But I like the look of this with it's icons. However I do not have the knowledge to see where the icons are stored, I do not see any apparent .png files.

Honestly, no. Material Design icons don't really fit this, unless you redid the entire CSS to be like Android. I think going Windows 11 style is the way to go

[DaanSelen]

I'm sorry for referencing my own personal repo. But I like the look of this with it's icons. However I do not have the knowledge to see where the icons are stored, I do not see any apparent .png files.

Honestly, no. Material Design icons don't really fit this, unless you redid the entire CSS to be like Android. I think going Windows 11 style is the way to go

Fair enough, I am also for @HeyVern design if that fits better.

[rodrigolzd]

I think it would be far more useful to have the ability to upload and set custom icons for each device group.

In my case I have over 80 device groups, and honestly Looking at all the same icon is hard sometimes.

[si458]

just started to look at this, started to write something so if you have images inside the data folder, use them to replace icons, then realised this already exists! HOW TO - https://cheesefather.com/2023/02/add-custom-icons-to-meshcentral/ create a folder called meshcentral-web next to meshcentral-data then inside it create public then inside it create images then inside images just put all your images, and it will use them instead on server start up!

yes it doesnt change the colour of the web ui, but at least its a start by allowing change of the icons! you can literally replace ANY image inside meshcentral/public/images/

[si458]

you can also do the customise per domain!!! but its not documented! i will add all i found to the docs!!! you create a folder called meshcentral-web-DOMAINHERE instead of meshcentral-web

[tomsik-radek]

you can also do the customise per domain!!! but its not documented! i will add all i found to the docs!!! you create a folder called meshcentral-web-DOMAINHERE instead of meshcentral-data

I think you meant meshcentral-web, not meshcentral-data. It makes sense, "" domain gets meshcentral-web, "supplier" domain gets meshcentral-web-supplier folder

This is what I was wondering about, no mention of that in here https://www.youtube.com/watch?v=UOIjWnsxsN8

Thanks!

[si458]

@tomsik-radek u r correct, corrected mistake

[DaanSelen]

In general, I would like to see if there is an audience for modernizing the current standard icons, for a more current-date looking UI.

[silversword411]

Definitely modernizing the theme and improving the look is always appreciated :)

[DaanSelen]

Does anyone have a png pack or should I look for one? I did like the previously mentioned logos.

[HeyVern]

meshcentral icons.zip

Something to get you started. Hope this helps.

[cfoellmann]

you can also do the customise per domain!!! but its not documented! i will add all i found to the docs!!! you create a folder called meshcentral-web-DOMAINHERE instead of meshcentral-web

@si458 I have tried this. I am running the docker image and it does not seem to work. I am no javascript dev but I had a look at the codebase and found https://github.com/Ylianst/MeshCentral/blob/e9c28d03b518feba553dd703d236b6e0145ac428/meshcentral.js#L1348 Possible that this does not work in the folder structure of the docker image? node_modules has this path in the container /opt/meshcentral/meshcentral/node_modules. Might be a minor fix.

[si458]

@cfoellmann ah you are using docker! yes every time you restart the docker container/recreate it, the chances are the folder might be deleted! you need to create volume and attach it to /opt/meshcentral/meshcentral-web and /opt/meshcentral/meshcentral-web-DOMAIN to survive the restarts/reboots

example config.json for multiple domains/hosts the volumes would be meshcentral-web, meshcentral-web-domain1 meshcentral-web-domain2

{
  "$schema": "https://raw.githubusercontent.com/Ylianst/MeshCentral/master/meshcentral-config-schema.json",
  "__comment1__": "This is a simple configuration file, all values and sections that start with underscore (_) are ignored. Edit a section and remove the _ in front of the name. Refer to the user's guide for details.",
  "__comment2__": "See node_modules/meshcentral/sample-config-advanced.json for a more advanced example.",
  "settings": {
    "cert": "myserver.mydomain.com",
    "_WANonly": true,
    "_LANonly": true,
    "_sessionKey": "MyReallySecretPassword1",
    "_port": 443,
    "_aliasPort": 443,
    "_redirPort": 80,
    "_redirAliasPort": 80
  },
  "domains": {
    "": {
      "_title": "MyServer",
      "_title2": "Servername",
      "_minify": true,
      "_newAccounts": true,
      "_userNameIsEmail": true
    },
    "domain1": {
      "_title": "MyServer",
      "_title2": "Servername",
      "_minify": true,
      "_newAccounts": true,
      "_userNameIsEmail": true
    },
    "domain2": {
      "dns": "domain2.mydomain.com",
      "_title": "MyServer",
      "_title2": "Servername",
      "_minify": true,
      "_newAccounts": true,
      "_userNameIsEmail": true
    }
  },
  "_letsencrypt": {
    "__comment__": "Requires NodeJS 8.x or better, Go to https://letsdebug.net/ first before trying Let's Encrypt.",
    "email": "[email protected]",
    "names": "myserver.mydomain.com",
    "skipChallengeVerification": true,
    "production": false
  }
}

[cfoellmann]

@si458 thanks for replying. Sorry that I have not written up what I have done to test/fix this.

Yes, in docker the folder structure within the container is reset on a container deployment. I have mapped both folders you suggest (and I already knew should be used) to the host file system:

services:
  meshcentral:
          volumes:
      # config.json and other important files live here. A must for data persistence
      - /var/lib/docker/compose/meshcentral/data:/opt/meshcentral/meshcentral-data
      # where file uploads for users live
      - /var/lib/docker/compose/meshcentral/user_files:/opt/meshcentral/meshcentral-files
      # location for the meshcentral-backups - this should be mounted to an external storage
      - /var/lib/docker/shares/docker_backup/meshcentral:/opt/meshcentral/meshcentral-backups
      # Template: RMM
      - /var/lib/docker/compose/meshcentral/web:/opt/meshcentral/meshcentral-web
      # Template: csystems
      - /var/lib/docker/compose/meshcentral/web-csystems:/opt/meshcentral/meshcentral-web-csystems

My testfiles are these:

Working:

• web/public/favicon.ico is applied to both domains
• all other files are not used by either domain

In the handlebars files I have just added a text to the footer (after the variable from config.json) to see if the template is used.

[si458]

@cfoellmann hmmm weird? Will take another look when I get into the office as it works here fine? But I was only replacing any images in the images folder and not the views folder!?

[cfoellmann]

@si458 should I keep posting stuff here? Or create a new issue?

I keep testing:

• views are just not working (is this even in the code? would be great to further customize meshcentral)
• /opt/meshcentral/meshcentral-web/public/images gets applied to ALL domains

[si458]

No here fine, will have a look as soon as I can

[cfoellmann]

another check: (run in the second domain - makes no difference i thing):

> showpaths
Parent:     /opt/meshcentral/meshcentral
Data:       /opt/meshcentral/meshcentral-data
Files:      /opt/meshcentral/meshcentral-files
Backup:     /opt/meshcentral/meshcentral-backups
Record:     /opt/meshcentral/meshcentral-recordings
WebPublic:  /opt/meshcentral/meshcentral/public
WebViews:   /opt/meshcentral/meshcentral/views
XWebPublic: /opt/meshcentral/meshcentral-web/views
XWebViews:  /opt/meshcentral/meshcentral-web/public

[si458]

code is defo in there, so not sure why its not working? what does your config.json look like? (hide secret info)

// Check if there is a web views path and/or web public path for this domain
if ((__dirname.endsWith('/node_modules/meshcentral')) || (__dirname.endsWith('\\node_modules\\meshcentral')) || (__dirname.endsWith('/node_modules/meshcentral/')) || (__dirname.endsWith('\\node_modules\\meshcentral\\'))) {
    if ((obj.config.domains[i].webviewspath == null) && (obj.fs.existsSync(obj.path.join(__dirname, '../../meshcentral-web-' + i + '/views')))) { obj.config.domains[i].webviewspath = obj.path.join(__dirname, '../../meshcentral-web-' + i + '/views'); }
    if ((obj.config.domains[i].webpublicpath == null) && (obj.fs.existsSync(obj.path.join(__dirname, '../../meshcentral-web-' + i + '/public')))) { obj.config.domains[i].webpublicpath = obj.path.join(__dirname, '../../meshcentral-web-' + i + '/public'); }
    if ((obj.config.domains[i].webemailspath == null) && (obj.fs.existsSync(obj.path.join(__dirname, '../../meshcentral-web-' + i + '/emails')))) { obj.config.domains[i].webemailspath = obj.path.join(__dirname, '../../meshcentral-web-' + i + '/emails'); }
} else {
    if ((obj.config.domains[i].webviewspath == null) && (obj.fs.existsSync(obj.path.join(__dirname, '../meshcentral-web-' + i + '/views')))) { obj.config.domains[i].webviewspath = obj.path.join(__dirname, '../meshcentral-web-' + i + '/views'); }
    if ((obj.config.domains[i].webpublicpath == null) && (obj.fs.existsSync(obj.path.join(__dirname, '../meshcentral-web-' + i + '/public')))) { obj.config.domains[i].webpublicpath = obj.path.join(__dirname, '../meshcentral-web-' + i + '/public'); }
    if ((obj.config.domains[i].webemailspath == null) && (obj.fs.existsSync(obj.path.join(__dirname, '../meshcentral-web-' + i + '/emails')))) { obj.config.domains[i].webemailspath = obj.path.join(__dirname, '../meshcentral-web-' + i + '/emails'); }
}