Modern Themes #704

onesounds · 2021-09-27T11:18:30Z

Add Highlight Styling
Add modern themes and adjust classic themes
Changing Result item and hotkey layout
Change Context Menu label "Settings" to language string
Use right/left arrow keys to navigate to context menu and back
Add option to turn Glyph icons on query results on/off
Fixed custom font setting not available when shadow effects enabled

Also closes #661

- Add Hightlight Styling - Add New Themes and adjust classic themes

taooceros · 2021-09-27T13:59:44Z

Wow, that's a huge change😲
Will take a look on it tonight.

taooceros

I haven't tried the new change yet, but just leave some code review (will do it later).

By the way, would you check some format change in the pull request?

taooceros · 2021-09-27T15:28:06Z

Flow.Launcher.Core/Resource/Theme.cs

            effectSetter.Property = Border.EffectProperty;
            effectSetter.Value = new DropShadowEffect
            {
-                Opacity = 0.9,


Could you provide a screenshot for people to check the effect of this change?

It turned into a softer shadow. I tried to give it a feeling that is commonly used in modern Windows.

taooceros · 2021-09-27T15:28:30Z

Flow.Launcher/Converters/HighlightTextConverter.cs

@@ -1,11 +1,12 @@
-using System;
+using System.Windows;using System;


Add a new line here

taooceros · 2021-09-27T15:28:53Z

Flow.Launcher/Converters/HighlightTextConverter.cs

+                    //textBlock.Inlines.Add(new Bold(new Run(currentCharacter)));
+                    //textBlock.Inlines.Add(new Run(currentCharacter) { Foreground = Brushes.RoyalBlue });


remove these lines

taooceros · 2021-09-27T15:29:39Z

Flow.Launcher/Flow.Launcher.csproj

+    <Page Remove="Themes\League.Designer.xaml" />
+    <Page Remove="Themes\League.xaml" />
    <Page Remove="Themes\ThemeBuilder\Template.xaml" />
+    <Page Remove="Themes\Win11Dark.Designer.xaml" />
+    <Page Remove="Themes\Win11Dark.xaml" />


Will it be considered as page? Why previous theme don't need to be remove here?

I didn't know there was something like this. I'm going to erase it.

taooceros · 2021-09-27T15:32:03Z

Flow.Launcher/MainWindow.xaml

        <KeyBinding Key="D9" Modifiers="{Binding OpenResultCommandModifiers}" Command="{Binding OpenResultCommand}" CommandParameter="8"></KeyBinding>
    </Window.InputBindings>
    <Grid>
-        <Border Style="{DynamicResource WindowBorderStyle}" MouseDown="OnMouseDown" CornerRadius="5" >


Same. Probably a screenshot for this change may be better. (probably visual studio has xaml hot reload so this can be done easily).

Radius could not be changed in the theme because that code first. The setting was removed to allow the theme to be managed. Depending on the theme xaml., it will be round or square.

taooceros · 2021-09-27T15:33:06Z

Flow.Launcher/MainWindow.xaml

                    </TextBox>
-                    <svgc:SvgControl Source="{Binding Image}" HorizontalAlignment="Right" Width="42" Height="42"
-                                     Background="Transparent"/>
+                    <svgc:SvgControl Source="{Binding Image}" HorizontalAlignment="Right" Width="25" Height="25" Margin="0,2,18,0" Opacity="0.2" Background="Transparent" Style="{DynamicResource SearchIconStyle}"/>


same screenshot

It may not be seen well in some Themes, but it has been the same before. In the future, I will try to make it visible according to the theme.

Probably make this editable and edit it in theme file instead of the MainWindow.xaml

taooceros · 2021-09-27T15:37:03Z

Flow.Launcher/ViewModel/ResultViewModel.cs


        public Visibility ShowOpenResultHotkey =>
-            Settings.ShowOpenResultHotkey ? Visibility.Visible : Visibility.Hidden;
+            Settings.ShowOpenResultHotkey ? Visibility.Visible : Visibility.Collapsed;


What's the different between these two?

I increased the area of the hot key.

I tested the 'Do not display hotkey' option, but the hotkey area is reserved. ('Hidden' Property makes it like this.) In this case, the title area does not fit the width of the window. (it make a gap on the right side.)

the code make responsive width the title area and remove gap.

Collapsed: Do not display the element, and do not reserve space for it in layout.
Hidden: Do not display the element, but reserve space for the element in layout.

onesounds · 2021-09-27T16:25:33Z

I haven't tried the new change yet, but just leave some code review (will do it later).

By the way, would you check some format change in the pull request?
Sorry, I don't know what you mean, What should I change?

taooceros · 2021-09-27T17:05:55Z

I haven't tried the new change yet, but just leave some code review (will do it later).
By the way, would you check some format change in the pull request?
Sorry, I don't know what you mean, What should I change?

No not a big deal. Just remove some empty line will be fine. I will take a look on the effect tonight 😃

jjw24 · 2021-09-27T22:25:05Z

@onesounds this look is really good, very nice! thank you.

@taooceros @onesounds would it be possible to make this change backwards compatible with the current themes?

Also there is a request to make the magnifying glass swappable with another image via the xaml file, if not hard let's add to this change?

- change the code for compatible classic themes (You can use it without modifying the classic theme.) - add default window radius(5) for classic themes - add default hotkey color - but still default - New themes are used in a way that redefines the base code by changing and including it. - The basic height and each item spacing had to be changed. This part should also be changed to a theme.

…so I choosed and applied right color for classic themes.- Rollback Classic Skins - change the code for compatible classic themes (You can use it without modifying the classic theme.) - add default window radius(5) for classic themes - add default hotkey color - but still default hotkey color not same subtitle color in classic themes, (because base xaml can't read theme xaml) so I choosed right color for classic themes and applied it. I think it's not bad. - New themes are used in a way that redefines the base code by changing and including it. - The basic height and each item spacing had to be changed. This part should also be changed to a theme.

into ModernTheme

…margin, size, color, option, etc). - If you want to erase it, adjust the opacity. - Geometry type data (svg to xaml) was inserted into base.xaml. - If there is no data, use the one in the base. - The top margin of the list box was adjusted under the theme.n to changable b

onesounds · 2021-09-28T07:39:03Z

Flow.Launcher/ViewModel/ResultsViewModel.cs

            switch (Visbility)
            {
                case Visibility.Collapsed when Results.Count > 0:
-                    Margin = new Thickness { Top = 8 };


This part gives the margin of the list list and query box. In the absence of a seperator (classic themes), vertical centering seems to be out of place, so it was removed. It can be added as the Margin of the theme's basis separator attribute, and in recent themes, it is displayed with the separator.

onesounds · 2021-09-28T07:40:50Z

Flow.Launcher/Themes/Win10Light.xaml

+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="HorizontalAlignment" Value="Right" />
+    </Style>
+    <Geometry x:Key="SearchIconImg">F1 M12000,12000z M0,0z M10354,10962C10326,10951 10279,10927 10249,10907 10216,10886 9476,10153 8370,9046 7366,8042 6541,7220 6536,7220 6532,7220 6498,7242 6461,7268 6213,7447 5883,7619 5592,7721 5194,7860 4802,7919 4360,7906 3612,7886 2953,7647 2340,7174 2131,7013 1832,6699 1664,6465 1394,6088 1188,5618 1097,5170 1044,4909 1030,4764 1030,4470 1030,4130 1056,3914 1135,3609 1263,3110 1511,2633 1850,2235 1936,2134 2162,1911 2260,1829 2781,1395 3422,1120 4090,1045 4271,1025 4667,1025 4848,1045 5505,1120 6100,1368 6630,1789 6774,1903 7081,2215 7186,2355 7362,2588 7467,2759 7579,2990 7802,3455 7911,3937 7911,4460 7911,4854 7861,5165 7737,5542 7684,5702 7675,5724 7602,5885 7517,6071 7390,6292 7270,6460 7242,6499 7220,6533 7220,6538 7220,6542 8046,7371 9055,8380 10441,9766 10898,10229 10924,10274 10945,10308 10966,10364 10976,10408 10990,10472 10991,10493 10980,10554 10952,10717 10840,10865 10690,10937 10621,10971 10607,10974 10510,10977 10425,10980 10395,10977 10354,10962z M4685,7050C5214,7001 5694,6809 6100,6484 6209,6396 6396,6209 6484,6100 7151,5267 7246,4110 6721,3190 6369,2571 5798,2137 5100,1956 4706,1855 4222,1855 3830,1957 3448,2056 3140,2210 2838,2453 2337,2855 2010,3427 1908,4080 1877,4274 1877,4656 1908,4850 1948,5105 2028,5370 2133,5590 2459,6272 3077,6782 3810,6973 3967,7014 4085,7034 4290,7053 4371,7061 4583,7059 4685,7050z</Geometry>


This is the data that changed svg to xaml. If there is no such part, use the base.xaml.

onesounds · 2021-09-28T07:43:52Z

Flow.Launcher/Themes/Metro Server.xaml

-		<Setter Property="Foreground" Value="#000000" />
-	</Style>
+    </ResourceDictionary.MergedDictionaries>
+    <Style x:Key="QueryBoxStyle" BasedOn="{StaticResource BaseQueryBoxStyle}" TargetType="{x:Type TextBox}">


this theme(non edited), it works but have design problem. (inputbox full height)

Flow.Launcher/Themes/Pink.xaml

onesounds · 2021-09-28T07:56:44Z

Flow.Launcher/MainWindow.xaml

+
+
+                <Grid>
+                    <Rectangle Width="Auto" HorizontalAlignment="Stretch" Style="{DynamicResource SeparatorStyle}" />


Since the height cannot be given, a rectangle was used instead of a separator.

onesounds · 2021-09-28T07:59:34Z

Flow.Launcher/MainWindow.xaml

                  Style="{DynamicResource PendingLineStyle}" Visibility="{Binding ProgressBarVisibility, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
-                  Y1="0" Y2="0" X2="100" Height="2" Width="752" StrokeThickness="1">
-                </Line>
+                  Y1="0" Y2="0" X2="100" Height="2" Width="Auto" StrokeThickness="1">


I haven't tested it, but progressbar will come out nicely as it is placed on the separator. you guys talking about using spinner, I think this is better.

I tried to get the progress bar shown but either dont have too many files or the progress bar is not showing up, could both of you test when you get a chance please @taooceros

onesounds · 2021-09-28T08:02:29Z

Flow.Launcher/ResultListBox.xaml

-                            <ColumnDefinition />
-                            <ColumnDefinition Width="0" />
+                            <ColumnDefinition Width="54" />
+                            <ColumnDefinition Width="*"/>


I changed list item layout. It looks good and solves the problem that the Title area invades the hot key area.

onesounds · 2021-09-28T08:11:01Z

@onesounds this look is really good, very nice! thank you.

@taooceros @onesounds would it be possible to make this change backwards compatible with the current themes?

Also there is a request to make the magnifying glass swappable with another image via the xaml file, if not hard let's add to this change?

now non edited classic theme works. I need a test.
SVG was converted into xaml and inserted into the theme. It can be changing and styling. and it is inserted into base.xaml too. it works as a default.

jjw24 · 2021-09-28T09:49:19Z

@onesounds just took it for a spin, love it. I see you added a couple more themes, looking good. Where you been all this time lol

onesounds · 2021-09-28T10:19:23Z

this is my first pull request. I'm not a programmer. I installed a visual studio 4 days ago to fix this design. When I went to the discord to make some design suggestion, @taooceros suggest me to make a pull request so I tried. (I always wondered why the open source software was so ugly, now that I look at it, I think it's just that there's no designer.) I'm happy you like it. anyway I have more Idea for design, I'll open discussion soon.

This reverts commit c74a2db.

jjw24 · 2021-10-06T19:39:36Z

Plugins/Flow.Launcher.Plugin.Program/Programs/Win32.cs

-                SubTitle = LnkResolvedPath ?? FullPath,
+                //SubTitle = LnkResolvedPath ?? FullPath,
+                SubTitle = "",


i am reverting this, we can do the subtitle changes in a seperate pr.

jjw24

@taooceros @onesounds we need implement support for users who dont have the glyph icons installed on their system. I will revert the glyph addition in this pr and we can add it in when implemented.

taooceros · 2021-10-06T21:44:23Z

The glyph font is already added to resources, so just change the path will make it usable for everyone.

jjw24 · 2021-10-06T21:47:42Z

i tried it (with absolute path) but didnt work, do i just point it directly at the file?

taooceros · 2021-10-06T22:10:53Z

i tried it (with absolute path) but didnt work, do i just point it directly at the file?

We can I guess. Though I think if added to resources we can access that with relative path to the resources.

jjw24 · 2021-10-07T11:15:54Z

@onesounds @taooceros I added the Glyph icons back and fixed the path, just needed to also add # to the Glyph string in the results.

I also added option to switch Glyph icons on/off for results.

@taooceros did you want to take another look or happy for me to merge this in?

onesounds · 2021-10-07T12:47:37Z

Flow.Launcher/MainWindow.xaml.cs

        private void InitProgressbarAnimation()
        {
-            var da = new DoubleAnimation(ProgressBar.X2, ActualWidth + 100,
+            var da = new DoubleAnimation(ProgressBar.X2, ActualWidth + 150,


Finally Progress bar fixed. I think it's my last push in this branch. I'll do something other branch.

The fixed Width size was the problem. I mistook activewidth for window size.
So I changed let Progressbar bring the width of parent grid.

Adjust
To prevent the progress bar from appearing suddenly, I changed the start and end position to more than window size. In this case, it goes out of the screen, so clip bound was applied to parent grid. (Clip bound sadly only works in like this case. If this worked for selected item, I wouldn't have to suffer.)

Flow.Launcher.Core/Resource/Theme.cs

taooceros · 2021-10-07T14:54:13Z

@taooceros did you want to take another look or happy for me to merge this in?

I will be busy for two days because of the exams. So I can take a look on the pull request at friday or weekend, or if you think it ok, just merge it🧐.

taooceros · 2021-10-08T02:23:34Z

I am free now. Anything left?

jjw24 · 2021-10-08T03:03:38Z

I am free now. Anything left?

Yeah I'm very happy with this change, maybe have a quick look if I missed anything and take it for a spin to ensure nothing has regressed.

taooceros · 2021-10-08T03:22:51Z

I am free now. Anything left?

Yeah I'm very happy with this change, maybe have a quick look if I missed anything and take it for a spin to ensure nothing has regressed.

Sure, I will finish that by tomorrow

onesounds added 7 commits September 27, 2021 20:00

- Changing Result item and hotkey layout

3a0594f

- Add Hightlight Styling - Add New Themes and adjust classic themes

Add Modern Theme

0c47557

delete margin

b07a437

adjust padding

7789c1c

adjust

c6f1a00

Fix Separator

53c04fd

- Add Textbox Caret Color

f07a009

taooceros reviewed Sep 27, 2021

View reviewed changes

- Delete Comment

4ced995

onesounds added 2 commits September 28, 2021 01:26

remove itemgroup in csproj.

f83212a

- fix for build (recovery some item group)

c227ba3

onesounds added 4 commits September 28, 2021 12:04

Merge branch 'ModernTheme' of https://github.com/onesounds/Flow.Launcher

3e25030

into ModernTheme

onesounds commented Sep 28, 2021

View reviewed changes

Flow.Launcher/Themes/Pink.xaml Show resolved Hide resolved

fix win11light theme seperator margin

505b4cb

onesounds commented Sep 28, 2021

View reviewed changes

onesounds and others added 4 commits October 7, 2021 00:20

- Add clock in query bar (sublime theme only)

c74a2db

Revert "- Add clock in query bar (sublime theme only)"

763cab8

This reverts commit c74a2db.

revert subtitle change

54145d7

adjust Program plugin width

5f0df98

jjw24 reviewed Oct 6, 2021

View reviewed changes

jjw24 force-pushed the ModernTheme branch from b7d0285 to 5f0df98 Compare October 7, 2021 07:54

jjw24 added 2 commits October 7, 2021 21:58

add glyph option to settings

04a10ed

update wording

4f19355

jjw24 previously approved these changes Oct 7, 2021

View reviewed changes

- Fix ProgressBar (Finally!)

1d746c2

onesounds dismissed jjw24’s stale review via 1d746c2 October 7, 2021 12:34

onesounds commented Oct 7, 2021

View reviewed changes

Flow.Launcher.Core/Resource/Theme.cs Outdated Show resolved Hide resolved

This was referenced Oct 7, 2021

Fonts Size & Search Bar Size #400

Closed

interface sizes #624

Closed

add ItemHotkeyStyle key into dictionary

42dda34

jjw24 approved these changes Oct 8, 2021

View reviewed changes

taooceros approved these changes Oct 9, 2021

View reviewed changes

taooceros merged commit 3baaa2d into Flow-Launcher:dev Oct 9, 2021

jjw24 mentioned this pull request Oct 13, 2021

Dev branch: fix issue with converters casting to null values #754

Merged

jjw24 mentioned this pull request Dec 5, 2021

Release 1.9.0 | Plugin 2.1.0 #697

Merged

		@@ -1,11 +1,12 @@
		using System;
		using System.Windows;using System;

		//textBlock.Inlines.Add(new Bold(new Run(currentCharacter)));
		//textBlock.Inlines.Add(new Run(currentCharacter) { Foreground = Brushes.RoyalBlue });



		<Grid>
		<Rectangle Width="Auto" HorizontalAlignment="Stretch" Style="{DynamicResource SeparatorStyle}" />

Uh oh!

Modern Themes #704

Modern Themes #704

Uh oh!

Conversation

onesounds commented Sep 27, 2021 • edited by jjw24 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

taooceros commented Sep 27, 2021

Uh oh!

taooceros left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

onesounds Sep 27, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

onesounds commented Sep 27, 2021

Uh oh!

taooceros commented Sep 27, 2021

Uh oh!

jjw24 commented Sep 27, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

onesounds commented Sep 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jjw24 commented Sep 28, 2021

Uh oh!

onesounds commented Sep 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jjw24 left a comment

Choose a reason for hiding this comment

Uh oh!

onesounds commented Sep 27, 2021 •

edited by jjw24

Loading

taooceros left a comment •

edited

Loading

onesounds Sep 27, 2021 •

edited

Loading

onesounds commented Sep 28, 2021 •

edited

Loading

onesounds commented Sep 28, 2021 •

edited

Loading