changing the UI icons

[darren134]

Hi, what do you think about changing the UI icons to fit the more modern design?

[niksedk]

You can make a folder called Icons in the SE data folder and put in png files with these names:

         New.png
         Open.png
         Save.png
         SaveAs.png
         Find.png
         Replace.png
         FixCommonErrors.png
         RemoveTextForHi.png
         VisualSync.png
         BurnIn.png
         SpellCheck.png
         Netflix.png
         AssaStyle.png
         AssaProperties.png
         AssaAttachments.png
         AssaDraw.png
         Settings.png
         Help.png
         WaveformToggle.png
         VideoToggle.png

A few screenshots of what you can do would be nice? :)

[jmaraujouy]

Hi, Nikolaj!

And what should be the filename for the "</>" icon? (see attachment)

Thanks, and have a nice day! ;)

[niksedk]

Hi, Nikolaj!

And what should be the filename for the "</>" icon? (see attachment)

Thanks, and have a nice day! ;)

Thx for the info... that one was missing... "SourceView.png"... from next version,

[LeonCheung]

Actually I really like the new style. They are really nice. I was about to make the proposal for redesigning icons in similar sytle like that. My only concern is that not sure if it fits the default theme though. Anyway, nice work @jmaraujouy! Are you a designer or? And do you think if it is possible to make icons for every function and shortcut assuming there could be a small customized side toolbar like the one in Photoshop or something?
@niksedk Do you think it is a good idea? I mean, we already have too many shortcuts and functions. It's really hard to assign every single one with a unique shortcut and remember them... In many cases, a single click can be much more preferable.

[jmaraujouy]

@LeonCheung Hi, Leon. Although I'm not a graphic designer, I like to experiment with things like UI customization. This icon set is based on Microsoft Fluent UI interface icons.

I'm actually working on a full Fluent UI icon set for Notepad++, with icons for every function and shortcut. But I don't think it is achievable with SE (yet! 😉)

If you want a copy of my Subtitle Edit Fluent UI set, you can grab the .zip and extract them to the "Icons" folder (C:\Users\{USERNAME}\AppData\Roaming\Subtitle Edit\Icons). Here it is:

https://www.mediafire.com/file/ah84khsm5z8ycgm/icons.zip/file

PS: I couldn't attach the file, so I had to upload it to Mediafire.

[LeonCheung]

@jmaraujouy Thanks man, as long as we don't have to struggle with any copyright issues. It's really nice style to try. However, I don't think both the default theme and dark theme could share the same icon set. It's really hard to match the two contrasting themes. I've tried some mid-color, but seems not very ideal:

So maybe a better solution could be having individual sub-folders for each theme, like ..\icons\default, and ..\icons\dark_theme. For others like filetype icons, they can still in the ..\icons folder.

[niksedk]

Latest beta now supports "Icons\DarkTheme" and "Icons\DefaultTheme" (or should it be "GrayTheme" ?)
Also, new icons supported: IttProperties.png WebVttProperties.png EbuProperties.png

Latest beta: https://github.com/SubtitleEdit/subtitleedit/releases/download/3.6.13/SubtitleEditBeta.zip

The installer could have a settings for new "modern/simple" icons.

[jmaraujouy]

I think 'Light Theme' sounds better than 'Gray Theme'. Although, 'Default Theme' sounds fine too.

[niksedk]

OK, "DefaultTheme" it is.

If you could create the last three icons, I can try to make an installer with this - is that okay?
And a blue (?) for the default theme?

Oh, and the 3 icons (file type properties):

[jmaraujouy]

@niksedk Hi, Nikolaj. No problem. Two questions:

Should I use Windows 11 default shade of blue (#0078d7)?

Can I make those new icons in the "Fluent UI" style, or must I keep the design and color?

[jmaraujouy]

I'm uploading three versions: DefaultTheme (blue), DarkTheme, and DefaultTheme alternate (dark gray).

https://www.mediafire.com/file/3i1eewiriv7n8o4/icons.zip/file

Here's the DefaultTheme (blue) with the new icons. Maybe the EBU icon can be improved a little...

PS: Sorry for the Mediafire link. I could not attach a file. Maybe it's a browser (Firefox) problem.

[LeonCheung]

@niksedk That's really nice, which means we could possibly customize many kinds of button styles, not just three. Wow. XD

@jmaraujouy For the blue tune, IMHO, Navy Blue rgb (0,90,177) could be slightly better and calmer:

---

BTW, I can see that color for DefaultTheme appears to be something like RGB (27,27,27), IMHO it's still a bit dark, I think we could make it a bit lighter, which could be more soft and comfortable, like (50,50,50):

---

Another thing is that we have to align with the new design language if we decide to adapt it in the future. My understanding is that we don't have to follow the old icon style or shape. Actually, we can make some of them rather simple and identical, such as the three format icons (see the figure above, btw Noto Sans (bold) is the font I used here). And the SourceView icon too. In my opinion, for the new design language, we add the circle ONLY WHEN it's really needed, say, assuming they are too simple themselves, such as FixCommonError or Help, in order to have them more balanced. Just my two cents. (For ASSA icons, a bit of fine-tuning work could be needed soon).

NavyBlueTheme.zip

One more thing, is it really safe to use them without any copyright issues? Just want to make sure of that.

[jmaraujouy]

@jmaraujouy For the blue tune, IMHO, Navy Blue rgb (0,90,177) could be slightly better and calmer:

It's not my place to decide, but I still think it's best to use the Windows default accent color. Either way, I'm fine with whatever is decided.

BTW, I can see that color for DefaultTheme appears to be something like RGB (27,27,27), IMHO it's still a bit dark, I think we could make it a bit lighter, which could be more soft and comfortable, like (50,50,50):

Yes, it can be done. 😁 If I remember correctly, I just chose the same palette that Notepad++ used for their Fluent UI icon set. I changed them to (50,50,50) now.

In my opinion, for the new design language, we add the circle ONLY WHEN it's really needed, say, assuming they are too simple themselves, such as FixCommonError or Help, in order to have them more balanced. Just my two cents. (For ASSA icons, a bit of fine-tuning work could be needed soon).

Yes! It was my first choice, but then I started to doubt, and ended choosing the circled version. 😂

One more thing, is it really safe to use them without any copyright issues? Just want to make sure of that.

I think so, yes. Here's a link to the license: https://github.com/microsoft/fluentui-system-icons/blob/main/LICENSE

Related to this subject, I modified the HI icon, since the one I previously used was not part of the Fluent UI set, and was downloaded from www.icons8.com. Now the new version is designed from scratch. I also improved the Spell Check icon a little bit.

Here's a sample of the new icon:

icons (updated).zip

[LeonCheung]

@jmaraujouy Nice update for the HI icon. I just added more ASSA icons in case needed someday.
DefaultTheme - DarkGray.zip

@niksedk BTW, not sure if it's possible to call/reference icons from a single file. something like this:

Inspired by Blender 2.7 UI icon solution.

It's very convenient to make global changes to all icons in image editors, and maybe it's also good for the performance? Imagine we need more icons for more operations/shortcuts in the future. Just brainstorming here. :)

[niksedk]

Updated latest beta to better support this: https://github.com/SubtitleEdit/subtitleedit/releases/download/3.6.13/SubtitleEditBeta.zip

Theme switches automatic between "DarkTheme" and "DefaultTheme" - and can be manually chosen too:

[niksedk]

@jmaraujouy: Could you add the AssaDraw.png icon for DefaultTheme (blue), DarkTheme (white) and Black?

[jmaraujouy]

Sure, @niksedk.

Here it is: AssaDraw Icons.zip

[LeonCheung]

@jmaraujouy For the attachment icon, maybe we could match the similar style with other ASSA icons :)

BTW, it seems the little A could be shrunk a bit for the Draw icon compared to others.

[jmaraujouy]

@jmaraujouy For the attachment icon, maybe we could match the similar style with other ASSA icons :)

@LeonCheung Sure, it looks really nice.

BTW, it seems the little A could be shrunk a bit for the Draw icon compared to others.

Yes, I agree. I didn't notice that before... I look into it.

I'm posting the updated icons in a few minutes.

[jmaraujouy]

Here are the updated icons: updated_icons (2023-06-02).zip

• New AssaAttachments.png as sugested by @LeonCheung
• Fixed AssaDraw.png (in the same style of other ASSA icons), suggested by Leon
• New VideoToggle.png, as previous version was downloaded from icons8.com and could have copyright issues. This one is from the FluentUI set.
• New WaveFormToggle.png, as previous version was downloaded from icons8.com and could have copyright issues. This one was created from scratch.
• Improved EbuProperties.png icon
• Updated SourceView.png, SpellCheck.png & RemoveTextForHi.png for the "Black" set (the Beta version still had the old icons)

Also, the "Black" set is not the same shade of gray we did before. So I just had to use a darker color to match the tone used in the beta version (https://github.com/SubtitleEdit/subtitleedit/releases/download/3.6.13/SubtitleEditBeta.zip)

[niksedk]

Great :)

Include in latest beta: https://github.com/SubtitleEdit/subtitleedit/releases/download/3.6.13/SubtitleEditBeta.zip

[niksedk]

@jmaraujouy: Could you add yet another icon?
WebVttStyle.png icon for DefaultTheme (blue), DarkTheme (white) and Black?

Should be a bit like the WebVttProperties.png icon.

It's somewhat related to the ASSA Style/properties:

[jmaraujouy]

What do you have in mind? Could it be something like this?

webvtt-style.zip

PS: Don't forget to rename the files. I was too lazy to create individual folders for the zip file. 😂

[jmaraujouy]

What do you have in mind? Could it be something like this?

Oh, I think the clipboard was used for the ASSA 'properties' and not the ASSA 'style' icon...

So, probably, the new WebVttStyle icon should be a merge between these two icons: +

[niksedk]

Yes, would be great for the WebVttPropertiers :)
Well, the old "WebVttProperties is actually good for the WebVttStyle :)

[niksedk]

And... if you have time, I guess these do not look great in dark mode:

I think the image size is something like 22x22...

[jmaraujouy]

No problem, Nik.

Are you sure they are not 16x16? I made them with 22x22, just in case. But we can made them 16x16 if needed.

I made two versions for the playback speed icon; choose the one you like the best.

icons.zip

[jmaraujouy]

⚠️ New set, with 16x16 resolution:

icons-16x16.zip

[niksedk]

Thx - Amazing work :)

Beta updated: https://github.com/SubtitleEdit/subtitleedit/releases/download/3.6.13/SubtitleEditBeta.zip

About the playback-speed icon... SE has a "selected" version of the image too, when the speed is not default. Could you make such an icon too?

[jmaraujouy]

(Message edited)

I just tried the latest beta, and the icons definitely have a 16x16px resolution.

☝🏻 This is a screenshot using the 16x16 set I posted earlier.
(With 22x22 they get resized, which makes them look blurry)

Beta updated: https://github.com/SubtitleEdit/subtitleedit/releases/download/3.6.13/SubtitleEditBeta.zip

[niksedk]

OK, I've turned off scaling now, just to be sure: https://github.com/SubtitleEdit/subtitleedit/releases/download/3.6.13/SubtitleEditBeta.zip

[jmaraujouy]

Excellent, @niksedk ! The icons are looking sharp. 👍🏻👍🏻

Here's the playback speed icon for when there is a different speed rate selected. And a new version of the previous WaveformPlaybackSpeed.png, because I made some small modifications to the previous icon.

playback-speed_selected_and_unselected.zip (22x22px)

Also, there seems to be a small glitch when hovering over the last icon (playback speed):

[niksedk]

Beta updated: https://github.com/SubtitleEdit/subtitleedit/releases/download/3.6.13/SubtitleEditBeta.zip

Should look something like this now:

Really a lot better than:

[niksedk]

Would allowing customizing the video player gfx make sense?

This beta include gfx for the video player for each theme: https://github.com/SubtitleEdit/subtitleedit/releases/download/3.6.13/SubtitleEditBeta.zip

[niksedk]

Yes :)

[niksedk]

Also, the background is an image.
(hm, might have been inspired somewhat from Window Media Player from Windows-something-old...)

[jmaraujouy]

Ok. Let me take a look...

The main icon is 29x29px (play/pause button); the others are 19x19px and 20x20px, right?
They also change state when clicked/hovered over. 🤔 But the position also changes.

play-button.mp4

PS: Do you have something in mind for the background? A solid color, a gradient, a texture?

[jmaraujouy]

I noticed there is no sample image for the ProgressBar background. Also, the volume percentage have a permanent background.

Here's a little video:

botones.mp4

EDIT: @niksedk I need a little help here. Are the icons cached? I saved some of them while SE was still open adn the files were in use by SE, and now the modded icons are not loading. 🤦🏻

[niksedk]

Ah thx, seems the "ProgressBarBackground" images was in gif format... should have been png.
Beta updated: https://github.com/SubtitleEdit/subtitleedit/releases/download/3.6.13/SubtitleEditBeta.zip

[abc16361]

Just a reminder.
When use Legacy theme for Toolbar, the icons on the waveform are the new default blue design instead of the old legacy icons.

[jmaraujouy]

Just a reminder. When use Legacy theme for Toolbar, the icons on the waveform are the new default blue design instead of the old legacy icons.

I don't have the original icons, but I made a small set you can extract and move to you Legacy folder. At least it will fit better with the Legacy theme. These are icons from iconarchive.com; credit goes to them.

legacy-icons.zip

[niksedk]

Beta updated to work with (new) legacy icons :)
https://github.com/SubtitleEdit/subtitleedit/releases/download/3.6.13/SubtitleEditBeta.zip

[abc16361]

Thank you very much!
They fit well.

[jmaraujouy]

Ok, @niksedk. I think it's done. But I cannot confirm it, because some icons are not being replaced with the modded icons.

• Reverse and Forward are not loading when hovered and clicked. (The filenames were wrong: i.e. ReverseMouseOver instead of ReverseOver)
• FullScreenDown is not loading when clicked.
• NoFullScreen* is not loaded. (In any of the 3 states)
• After returning from full screen, it doesn't revert to initial icon (a different icon is shown).

If you don't like the orange accent color (DefaultTheme) I can change it to a darker shade of blue (or any other color).

💾 icons_video_player.zip
(I'm also including modified VolumeBarBackground & ProgressBarBackground files for Legacy Theme)

⚠️ Also, @niksedk can you fix the position of both play & pause button?

(When hovered, it moves 1px to the right; when clicked, it moves 1px down)

[niksedk]

Just amazing :)

Beta updated: https://github.com/SubtitleEdit/subtitleedit/releases/download/3.6.13/SubtitleEditBeta.zip
Almost done I think...

[jmaraujouy]

In the Black and DefaultTheme themes, there is some text that shows in white, over the light background:

It doesn't happen with the DarkTheme theme:

[niksedk]

Thx :)
Beta updated: https://github.com/SubtitleEdit/subtitleedit/releases/download/3.6.13/SubtitleEditBeta.zip

[jmaraujouy]

I think it's perfect.

If you want, you can move up the volume percentage, as it sits on top of the volume bar. But it's barely noticeable.

[OmrSi]

@niksedk As I've mentioned, I think the controls area in the Dark Theme look a bit plain, like just a couple of buttons put next to each other without a defining background.
Does this look better to you? OmrSi@c64fb31

[OmrSi]

Also, Legacy theme for video player doesn't seem to be working properly.

[jmaraujouy]

Also, Legacy theme for video player doesn't seem to be working properly.

It's working fine on my end:

But it seems the latest beta doesn't include all of the icons inside the "Legacy/VideoPlayer" folder. Here's a copy:

missing-icons.zip

@niksedk As I've mentioned, I think the controls area in the Dark Theme look a bit plain, like just a couple of buttons put next to each other without a defining background. Does this look better to you?

Can you share a screenshot of the changes?

[OmrSi]

Hey @jmaraujouy

But it seems the latest beta doesn't include all of the icons inside the "Legacy/VideoPlayer" folder.

Yes, they are not in the beta folder.

Can you share a screenshot of the changes?

[OmrSi]

@jmaraujouy Here: SubtitleEditBeta.zip
You can try the icons without the code changes, I just thought the controls looked a bit cramped.

[jmaraujouy]

Nice job, @OmrSi

But if you are worried about the controls looking a bit cramped, I think they look even more crampled now. They seem, I don't know, constrained, maybe.

Maybe if you change the height from the background area; also adding more distance between the buttons and the progress bar. Just an idea.

@niksedk I see you uploaded the missing icons. Just one more fix: Can you rename this files?

ReverseMouseDown.png => ReverseDown.png
ReverseMouseOver.png => ReverseOver.png
FastForwardMouseDown.png => FastForwardDown.png
FastForwardMouseOver.png => FastForwardOver.png

[OmrSi]

@jmaraujouy Yes, I meant the icons after the edit seem a bit cramped, so I edited the code to give them more space...

My issue with the original icons is that the area doesn't look distinct enough from the rest of the UI, they just look thrown in there. Try the beta I uploaded.

[OmrSi]

Maybe if you change the height from the background area; also adding more distance between the buttons and the progress bar. Just an idea.

That would be ideal, but the issue it that would disturb the legacy theme...

[jmaraujouy]

My issue with the original icons is that the area doesn't look distinct enough from the rest of the UI, they just look thrown in there. Try the beta I uploaded.

Oh, my bad. I thought I was opening the file you uploaded. 😯 Let me check again.

While we are at it, do you know if there is any reason why transparent PNGs do not work? (They show a black background) I have the original files, with transparent background, in case needed.

[OmrSi]

@jmaraujouy That's what I was trying to figure out as well, it would be so much easier with transparent PNGs.
Maybe @niksedk can shed a light on that.

[jmaraujouy]

Yeah, I see it now.

Now, the only thing left is to fix the buttons background, so they match the main background. (Or we can hope there's a fix for the buttons transparency)

Here's an example of what I mean (brightness exagerated for the effect to be more noticeable):

What do you think about removing the lighter border around the main background gradient? 🤔

Also, the volume percentage need to be moved 1px up, as it covers the border of the volume bar.
It is not a big deal, and is barely noticeable in the dark theme; but I see now that is more noticeable with the default and black themes.

[OmrSi]

Yes, I tried to match it as much as possible, I thought they matched but that brightness makes it clearer.
Just a gradient for the background should be enough in my opinion, and if transparent PNGs can be used, it would make everything work well.

[OmrSi]

@jmaraujouy Could you post the transparent PNGs?

[jmaraujouy]

@OmrSi I have the transparent PNGs for the Default theme only? I didn't make a set for the other themes. Do you still want them?

[niksedk]

IMO the flat background is nice, but I guess it's a matter of personal preference.

Transparent PNGs are not supported ATM, but it probably could be done (by first copying a part from the background image matching the current PNG position and size, and then blend the current transparent PNG on top)

[jmaraujouy]

Yes, I like the flat version too. It looks cleaner.

But just in case you decide to go with the gradient one, I think is better to remove the lighter border around the main background.

PS: Thanks for renaming the Legacy png files. 👍🏻

[jmaraujouy]

Hey, @niksedk. Here's a little update to the latest icon (BeautifyTimeCodes):

Before:

After:

It's just a small change to better fit with the previous icons.

BeautifyTimeCodes-icons.zip

[Flitskikker]

@jmaraujouy
Thank you for beautifying the Beautify time codes icon. 😊

By the way, did something change with the player icons with the classic theme?
The different states of the play icon are not aligned anymore:

[jmaraujouy]

@Flitskikker

Yeah, that is kind of my fault. I asked Nik to fix the icons position, so it's a collateral effect.

The old icons, while changing state (inactive, active, hover), they also changed their position. In the new UI icons the effect of changing state is achieved in the icon image itself. No change of positioning is needed. This broke the button alignment in the Legacy theme.

But it's an easy fix and I'll upload the fixed legacy icons at the bottom of this message.

Still, there is one change left. Play and Pause are not using the same coordinates, so there is a small jump to the side. Here's what I mean:

Correct me if I'm wrong (forgive me, I'm not a coder 😉), but I think the problem (that causes the jump when changing from play to pause, and vice versa) is that the horizontal coordinate of the Play button is set to 22, while the Pause button coordinate is set to 23.

Anyway, here are the fixed buttons. This will fix the aligning problem.
buttons.zip

[Flitskikker]

@jmaraujouy
Thank you for your work!

Could you check the latest beta? For some reason, the legacy buttons are still jumping around. Or maybe the corrected buttons have not been included yet?

[jmaraujouy]

Hey, @Flitskikker !

It seems to be working fine on my end. Here's a little video:

Can you check if you still have the old files at this folder?
C:\Users\{username}\AppData\Roaming\Subtitle Edit\Icons\Legacy\VideoPlayer

It's the only thing I can think of. 🤔

[Flitskikker]

@jmaraujouy Ahh, the files are external. I was only updating the .exe. Thank you!

[jmaraujouy]

@niksedk After updating 4.03 to 4.04, I'm getting the layout icon reverted to the legacy theme, instead of the current one.

Can you take a look at it?

[niksedk]

@niksedk After updating 4.03 to 4.04, I'm getting the layout icon reverted to the legacy theme, instead of the current one.

Can you take a look at it?

Sure... it's working here with a clean installation of installer version. Portable version is also working for me...

[jmaraujouy]

Thanks for checking it, @niksedk . It's something on my PC, then. The weird thing is it happened right after the upgrade.

I was checking the folders, and it seems the Layout.png file got deleted from my profile folder during the upgrade...

C:\Users\{username}\AppData\Roaming\Subtitle Edit\Icons\DarkTheme

I pasted the original Layout.png file into that folder (and also in DefaultTheme and Black theme folders), and now the icon is restored back to the proper version.

[niksedk]

@jmaraujouy: A few users have requested an "Open video" icon. I guess many people use "Audio to text" via Whisper now, so it's getting more common opening the video file first.
Do you have time to create this icon?

[jmaraujouy]

Sure, Nikolaj. I'll get to work on it.

[jmaraujouy]

@niksedk Here they are...

icons.zip