Icon Overhaul #5496

DaanSelen · 2023-11-02T08:24:29Z

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 · 2023-11-02T10:23:57Z

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 · 2023-11-02T12:25:51Z

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 · 2023-11-02T20:54:06Z

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 · 2023-11-03T07:43:24Z

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

tomsik-radek · 2023-11-03T11:50:45Z

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

DaanSelen · 2023-11-03T14:04:10Z

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 · 2023-11-03T14:28:33Z

Is this a step in the right direction?

tomsik-radek · 2023-11-03T14:31:25Z

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 · 2023-11-03T14:32:29Z

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 · 2023-11-03T19:48:53Z

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 · 2023-11-03T19:53:00Z

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 · 2023-11-03T20:28:58Z

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 · 2023-11-03T20:31:28Z

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 · 2023-11-07T11:02:46Z

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 · 2023-11-08T13:57:45Z

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 · 2023-11-08T14:07:20Z

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 · 2023-11-08T14:30:51Z

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 · 2023-11-08T14:36:45Z

@tomsik-radek u r correct, corrected mistake

DaanSelen · 2023-11-08T14:39:10Z

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 · 2023-11-08T16:22:21Z

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

DaanSelen · 2023-11-15T11:24:34Z

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

HeyVern · 2023-11-15T15:16:46Z

meshcentral icons.zip

Something to get you started. Hope this helps.

cfoellmann · 2024-03-07T16:13:08Z

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

MeshCentral/meshcentral.js

Line 1348 in e9c28d0

    
           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'); }

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 · 2024-03-07T16:54:07Z

@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": "myemail@mydomain.com",
    "names": "myserver.mydomain.com",
    "skipChallengeVerification": true,
    "production": false
  }
}

cfoellmann · 2024-03-08T07:36:47Z

@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 · 2024-03-08T08:12:35Z

@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!?

DaanSelen · 2024-05-01T14:34:55Z

Weirdly enough adding the meshcentral-web component to the root no longer works...

cfoellmann · 2024-05-01T14:41:18Z

are there ways to use additional files or is the a feature request?

Assets for the UI are under

https://github.com/Ylianst/MeshCentral/tree/master/public/images

What's wrong with adding to there?

We run the docker version.
I am using the "overwrite" option with web/public and web-domain/public which does not catch additional files.

But your reply gives me the idea to just map an external folder under public/images/additionals/

Should work!?

cfoellmann · 2024-05-01T14:42:18Z

Weirdly enough adding the meshcentral-web component to the root no longer works...

I can just say that in the docker version it still works. Might be the 1.1.22 that has a problem there.

si458 · 2024-05-01T16:23:21Z

Weirdly enough adding the meshcentral-web component to the root no longer works...

That's weird @DaanSelen ? Can u share ur whole folder structure?
As it should work no problems?

DaanSelen · 2024-05-01T17:18:05Z

Hi Si456,

https://github.com/DaanSelen/meshcentral-material

This is what I use. With the install step-by-step in the .md. Is there something wrong when copying it in the meshcentral root. If the issue is not apparent I will give more details tomorrow.

si458 · 2024-05-01T17:21:45Z

So do u have /opt/meshcentral/meshcentral-web/ ?
And inside it is public/views?

DaanSelen · 2024-06-17T14:33:46Z

Is there any update or appetite to change up the UI?

marclaporte · 2024-06-17T22:06:25Z

Is there any update or appetite to change up the UI?

Appetite: yes

I propose we have an online meeting with active community members.

We have an unofficial chatroom here: https://t.me/meshcentral Can you join us to discuss?

cfoellmann · 2024-06-18T06:21:43Z

we did some changes to our UI. We use the Microsoft Fluent UI (Styling and Icons)

As you can see it is customized for our branding and only in a pilot program so the styling has some issues until we find a good css styler that can give it the last polish

DaanSelen · 2024-06-18T06:36:48Z

we did some changes to our UI. We use the Microsoft Fluent UI (Styling and Icons)

As you can see it is customized for our branding and only in a pilot program so the styling has some issues until we find a good css styler that can give it the last polish

Do you publish the code to this UI?

fyppes · 2024-06-18T09:52:43Z

we did some changes to our UI. We use the Microsoft Fluent UI (Styling and Icons)

As you can see it is customized for our branding and only in a pilot program so the styling has some issues until we find a good css styler that can give it the last polish

That looks very nice.

marclaporte · 2024-06-18T11:36:56Z

ability to upload and set custom icons for each device group

Makes sense. Please spin off to a distinct task.

marclaporte · 2024-06-18T11:40:33Z

I am fine with having various themes. And the current icon set can even become a theme for those who want to maintain the current look. But by default, a fresh install of MeshCentral should have a modern icon set. The examples provided above are very good.

cfoellmann · 2024-06-18T11:43:53Z

it is very hard to keep a theme up to date and there is no easy way to meshcentral.
if all styles were moved to a css stylesheet it could be exchanged easily and as we all know nearly anything is possible with css

si458 · 2024-06-18T11:52:27Z

@cfoellmann the styling css is already in meshcentral/public/styles/style.css
all you have to do is use the meshcentral-web and meshcentral-web-domain to override this
so meshcentral-web/public/styles/style.css

but i do understand the is abit of styling that happens inside the javascript code!
for example to ask user to display a notification on a device - function deviceToastFunction()

x += '<textarea id=d2notifyMsg style=background-color:#fcf3cf;width:100%;height:140px;resize:none;overflow-y:scroll;box-sizing:border-box;margin-bottom:4px></textarea>';

this is oversally not ideal and the style value should be placed in the css file and assigned to textarea#d2notifyMsg

if you wanted to have a crack at moving some of the style values in the javascript into css go for it!
any PRs are welcome! ❤️

cfoellmann · 2024-06-18T12:04:22Z

I am a little overwhelmed with work but I will try to get a colleague of mine to have a crack at it.

My "Theme" is very quick and dirty to get away from the win7 styling for a pilot with customers.
The most pain in the a** is to keep up with changes upstream that you have to integrate into the copy of your *.handlebars

Is there a way to split these handlebars and include partials? Then you only need to modify partials

marclaporte · 2024-06-18T12:09:19Z

If we wanted to move to Bootstrap, my team could help a lot, as we have participated in migrating 4 apps to Bootstrap (Tiki Wiki CMS Groupware, Cypht webmail, Converse.js and the Openfire admin panel) as part of https://wikisuite.org/Bootstrap

Please see

Then, we have easy access to themes such as https://github.com/thomaspark/bootswatch

cfoellmann · 2024-06-18T12:15:25Z

If the underlying structure were bootstrap it would be very easy for me to put the Fluent UI theme for bootstrap over it ;-)

Overall it would make it very flexible

DaanSelen · 2024-06-18T12:22:27Z

My "Theme" is very quick and dirty to get away from the win7 styling for a pilot with customers.

This is my issue as well, the current look is very Windows 7 esque.

marclaporte · 2024-06-24T13:33:41Z

We will add a switcher: #6202 (please add your ideas)

marclaporte · 2024-08-19T15:09:07Z

@DaanSelen @cfoellmann @silversword411 @HeyVern
Here is the plan to move to Bootstrap: #6333

GlitchedCod · 2024-09-20T07:06:07Z

Hi, I've seen that I'm not the only one to feel that the UI is a bit off nowadays.
I've started editing the public/image folder with Windows 11 icons (already done the most common items and all the WebP) but sadly since these have copyrights I might do like ijustw0rkhere and create my own public repo for people who want to try it out.
Thanks for the hard work !

si458 · 2024-09-20T08:58:37Z

@GlitchedCod that's perfectly acceptable!
You can even create a meshcentral-web folder and put the public/images in there then everything meshcentral is updated the images persist!
Check the docs it has the customise features listed :)

DaanSelen · 2024-09-20T09:29:41Z

Hi, I've seen that I'm not the only one to feel that the UI is a bit off nowadays. I've started editing the public/image folder with Windows 11 icons (already done the most common items and all the WebP) but sadly since these have copyrights I might do like ijustw0rkhere and create my own public repo for people who want to try it out. Thanks for the hard work !

I already have a fork of this on my account, if you are willing you can help me collaborate, I already fixed some minor issues in the original. If so, contact me!

GlitchedCod · 2024-09-21T15:55:59Z

Hi, I've seen that I'm not the only one to feel that the UI is a bit off nowadays. I've started editing the public/image folder with Windows 11 icons (already done the most common items and all the WebP) but sadly since these have copyrights I might do like ijustw0rkhere and create my own public repo for people who want to try it out. Thanks for the hard work !

I already have a fork of this on my account, if you are willing you can help me collaborate, I already fixed some minor issues in the original. If so, contact me!

Mine is more like "Fluent design" made by Microsoft and not really Material so Idk if it would fit with your theme but if you're ok with it I can push stuff to your repo. I don't really understand the woff2 fonts instead of images and WebP so I would need a little brief on this. I've pushed this onto my GitHub and it "should" (not tested) looks like this : https://github.com/GlitchedCod/meshcentral-fluent/tree/main#image-showcase-warning-not-contractual-

The Windows 11 Fluent laptop icon I've made (there is none in W11), really really not perfect 🫠

DaanSelen · 2024-09-21T18:57:41Z

Looks good @GlitchedCod

marclaporte · 2024-10-20T21:54:54Z

@DaanSelen @cfoellmann @silversword411 @HeyVern @GlitchedCod

Please say hello to Bootstrap 5!
#6450

We will discuss on October 31st 2024:
https://www.reddit.com/r/MeshCentral/comments/1g7xmkh/first_meshcentral_monthly_meeting_coming_this/

I hope you can all make it!

si458 · 2024-10-20T22:05:13Z

I'm in the process of fixing quite a few bugs/styling issues i have spotted that need sorting urgently

I'm also trying to decide if we should switch all the icons we can, with ones from fontawesome, a few are already replaced in the bootstrap version and looks amazing!

DaanSelen added the enhancement label Nov 2, 2023

DaanSelen changed the title ~~GUI Overhaul~~ Icon Overhaul Nov 3, 2023

si458 mentioned this issue Nov 4, 2023

use newer images and icons #5507

Closed

si458 mentioned this issue Jan 15, 2024

Icons on device details page part-covered by left-hand toolbar #4862

Closed

DaanSelen mentioned this issue Jun 17, 2024

customized handlebars files can not be translated #6022

Closed

marclaporte mentioned this issue Jun 24, 2024

Add a theme switcher (CSS) and perhaps an icon switcher? #6202

Open

Icon Overhaul #5496

Icon Overhaul #5496

Comments

DaanSelen commented Nov 2, 2023

si458 commented Nov 2, 2023

DaanSelen commented Nov 2, 2023 • edited Loading

HeyVern commented Nov 2, 2023 • edited Loading

DaanSelen commented Nov 3, 2023

tomsik-radek commented Nov 3, 2023

DaanSelen commented Nov 3, 2023

HeyVern commented Nov 3, 2023

tomsik-radek commented Nov 3, 2023 • edited Loading

tomsik-radek commented Nov 3, 2023

DaanSelen commented Nov 3, 2023 • edited Loading

DaanSelen commented Nov 3, 2023

tomsik-radek commented Nov 3, 2023

DaanSelen commented Nov 3, 2023

rodrigolzd commented Nov 7, 2023

si458 commented Nov 8, 2023

si458 commented Nov 8, 2023 • edited Loading

tomsik-radek commented Nov 8, 2023

si458 commented Nov 8, 2023

DaanSelen commented Nov 8, 2023

silversword411 commented Nov 8, 2023

DaanSelen commented Nov 15, 2023

HeyVern commented Nov 15, 2023

cfoellmann commented Mar 7, 2024

si458 commented Mar 7, 2024

cfoellmann commented Mar 8, 2024

si458 commented Mar 8, 2024

DaanSelen commented May 1, 2024

cfoellmann commented May 1, 2024

cfoellmann commented May 1, 2024

si458 commented May 1, 2024

DaanSelen commented May 1, 2024

si458 commented May 1, 2024 • edited Loading

DaanSelen commented Jun 17, 2024

marclaporte commented Jun 17, 2024

cfoellmann commented Jun 18, 2024

DaanSelen commented Jun 18, 2024

fyppes commented Jun 18, 2024

marclaporte commented Jun 18, 2024

marclaporte commented Jun 18, 2024

cfoellmann commented Jun 18, 2024

si458 commented Jun 18, 2024

cfoellmann commented Jun 18, 2024

marclaporte commented Jun 18, 2024

cfoellmann commented Jun 18, 2024

DaanSelen commented Jun 18, 2024

marclaporte commented Jun 24, 2024

marclaporte commented Aug 19, 2024

GlitchedCod commented Sep 20, 2024

si458 commented Sep 20, 2024

DaanSelen commented Sep 20, 2024 • edited Loading

GlitchedCod commented Sep 21, 2024

DaanSelen commented Sep 21, 2024

marclaporte commented Oct 20, 2024

si458 commented Oct 20, 2024

DaanSelen commented Nov 2, 2023 •

edited

Loading

HeyVern commented Nov 2, 2023 •

edited

Loading

tomsik-radek commented Nov 3, 2023 •

edited

Loading

DaanSelen commented Nov 3, 2023 •

edited

Loading

si458 commented Nov 8, 2023 •

edited

Loading

si458 commented May 1, 2024 •

edited

Loading

DaanSelen commented Sep 20, 2024 •

edited

Loading