UI redesign

[SeaDve]

First, thanks for this wonderful app, I have been using it in Fedora for almost a month now, very helpful. The only problem is that it seems not consistent with other GNOME apps.

I recreated this icon to match GNOME human interface guidelines. I also made a couple of mock-ups to make it more at home in GNOME (The SVG file is in the source code). If I have time soon, I'll create a pull request with the design changes.

Thanks! Would love to know your opinion.

[amikha1lov]

Thank you very much for your attention to the project and for your positive assessment. I really like your design, you did a great job. Thank you! I want to change the design in version 2.0. Unfortunately, for almost half a year I could not deal with the application due to a job change, but now I can devote time to it. First, I would like to solve the technical problems that have accumulated in the errors section, but then I will gladly change the design to your version.

If the opportunity presents itself, I will be very grateful to pr with the redesign.

Thanks again for a great job!

[amikha1lov]

just yesterday we tried to do something similar https://i.imgur.com/4KM1laV.png

[SeaDve]

Thanks for the feedback!

I also modified a bit of the mock-up to change the labels, and add the pause screen and ability to record from microphone (possibly new feature? Should I open an issue?).

just yesterday we tried to do something similar https://i.imgur.com/4KM1laV.png

BTW, I also check this, nice design! Is it already the actual app (coded) or still a mock-up?

[Latesil]

@SeaDve Thanks for great mock-up! it looks really nice. I have only 2 remarks:

1. In my opinion, long text needs much more space between title above it. For example letter "g" in "Recording" is too close to title below.
2. I understand that three dots in "Recording" label mean a continuing process, but for me it visually move entire title to the left but I suppose it needs to be in the center. Maybe we should try to remove that dots?

[SeaDve]

@SeaDve Thanks for great mock-up! it looks really nice. I have only 2 remarks:

Thanks <3

In my opinion, long text needs much more space between title above it. For example letter "g" in "Recording" is too close to title below.

Do you mean this?

If yes, I noticed it too. Actually, it was a lot closer on the first mock-up and I didn't realize it is still that close.

I understand that three dots in "Recording" label mean a continuing process, but for me it visually move entire title to the left but I suppose it needs to be in the center. Maybe we should try to remove that dots?

Had been discussing with myself about this, I think you're right. I'll also try to think of another way to show the continuing process (other than the big icon and the red button)

I will make new mock-ups about your remarks. I'll try to post them soon.

Thanks for the feedback!

Edit:

I'll also try to think of another way to show the continuing process (other than the big icon and the red button)

Nevermind, I think it's enough since we already have an indicator to show at the top bar in GNOME.

Edit 2:

or

[Latesil]

Nice, I think second option with "Recording" much better.

[SeaDve]

Nice, I think second option with "Recording" much better.

Okay, updated the first screenshot.

[liferooter]

Does menu button open preferences or menu popover? If it opens preferences, I think it's better to use corresponding icon for button. If it opens menu, which options are there in this menu?

[liferooter]

Don't you think it will be better to use symbolic icons for start/stop buttons instead of text? I think it will look better if both stop and pause buttons will be symbolic.

[SeaDve]

Does menu button open preferences or menu popover? If it opens preferences, I think it's better to use corresponding icon for button. If it opens menu, which options are there in this menu?

It opens the menu popover.

In the latest version, it is only 'about', but hopefully though in the future, we can move some of the options to preferences.

Don't you think it will be better to use symbolic icons for start/stop buttons instead of text? I think it will look better if both stop and pause buttons will be symbolic.

I'm also baffled about that. In the gnome screenshot tool, it is text, so to keep consistency I also use text. I think one of the advantage of using text is it makes the button bigger and more emphasized aside from the colors.

I'll make mockups tomorrow with symbolic symbols.

[amikha1lov]

Maybe, its worth deleting the label with a path to the file, because some people dont want to show their username

[amikha1lov]

i want to implement pause option, but I am not sure about it because I don't know if gstreamer is able to do it.

[SeaDve]

Maybe, its worth deleting the label with a path to the file, because some people dont want to show their username

Here, what do you think about it.

i want to implement pause option, but I am not sure about it because I don't know if gstreamer is able to do it.

I see, but I think it will be a good thing to implement in the future.

By the way, is it possible to build it using GNOME Builder? I tried to, but it's giving me this error.

WARNING: Could not detect glib version, assuming 2.54. You may get build errors if your glib is older.

../../../../../../../../../Projects/RecApp-master/src/meson.build:5:6: ERROR: Could not execute glib-compile-resources.

Does it mean that I need to update the glib package? Sorry if this might be a dumb question, I am still learning gtk.

[amikha1lov]

i was able to implement pause function literally 5 minutes ago in a test project

[SeaDve]

Nice! How do you test your commits? I am having trouble on building the package with my commits.

[SeaDve]

I also just made the mockups come to life, but this doesn't have any function yet since I wasn't able to build from the main branch.

I tried to keep it as consistent as the original screenshot app from GNOME.

[amikha1lov]

I also just made the mockups come to life, but this doesn't have any function yet since I wasn't able to build from the main branch.

I tried to keep it as consistent as the original screenshot app from GNOME.

everything works for me, even after git clone. how do you do it? write in steps

[SeaDve]

I skipped the git clone since I already have it in my home folder, then:

1. cd RecApp-master
2. git submodule update --init --recursive #This is where it doesn't work

Btw, what do you think of the design? It took me hours to change the color and the border-radius, lol. I'll send the source code?

[amikha1lov]

Excellent, thanks

[amikha1lov]

I skipped the git clone since I already have it in my home folder, then:

1. cd RecApp-master
2. git submodule update --init --recursive #This is where it doesn't work

Btw, what do you think of the design? It took me hours to change the color and the border-radius, lol. I'll send the source code?

I'll ask @tim77 about submodules and write you after that

[tim77]

I skipped the git clone since I already have it in my home folder, then:

git submodule update --init --recursive #This is where it doesn't work

@SeaDve i guess you downloaded ZIP with sources. If so then there is no submodules in project and that's why you can't clone submodules. You should clone all project via git exactly how this described here.

[SeaDve]

I skipped the git clone since I already have it in my home folder, then:

git submodule update --init --recursive #This is where it doesn't work

@SeaDve i guess you downloaded ZIP with sources. If so then there is no submodules in project and that's why you can't clone submodules. You should clone all project via git exactly how this described here.

Okay, thanks!

[SeaDve]

Added animation yay. I rewrote most of the code since I use Gtk.Stack instead of relying on set_visible property.

https://user-images.githubusercontent.com/64297935/105700392-c48db180-5f43-11eb-9a25-326a2e0dbe54.mp4

[amikha1lov]

Added animation yay. I rewrote most of the code since I use Gtk.Stack instead of relying on set_visible property.

Screencast.from.01-25-2021.07.24.28.PM.mp4

it`s magnificently. Can i see source code ? I rewrote rec.py completely yesterday, now i use GstElementFactory for create pipeline.This allowed to implement pause option.

[SeaDve]

https://github.com/SeaDve/footage-design (I haven't comitted on the master yet, I'll move the code to the main branch after fixing the bugs)

Here, I still have to clean the code (replace the toggle button with radio button, since toggle button is pretty buggy). Add the preferences.ui for preferences/settings and fix the css to support white theme.

[SeaDve]

Preferences button is now working

[SeaDve]

Transitioned AboutDialog to use .ui file

[SeaDve]

I'll make a new pull request to keep it clean. I guess it's ready, only a few bugs left.

[amikha1lov]

@SeaDve I am migrating the code from the master branch to the dev branch, so it is better to direct pr there

[SeaDve]

@SeaDve I am migrating the code from the master branch to the dev branch, so it is better to direct pr there

Is there any different changes from the master? I already try to rename the elements to match the codebase.

[amikha1lov]

Is there any different changes from the master? I already try to rename the elements to match the codebase.

I didn't any changes in widgets name

[SeaDve]

I build it and didn't give me errors, but it seems like it is not building from the local repo? Instead, it builds with the old files? These are steps of what I did.

(I'm already on folder RecApp) git submodule update --init --recursive mkdir -p $HOME/Projects/flatpak/repo flatpak-builder --repo=$HOME/Projects/flatpak/repo --force-clean --ccache build-dir com.github.amikha1lov.RecApp.yaml flatpak remote-add --no-gpg-verify local-repo $HOME/Projects/flatpak/repo flatpak install com.github.amikha1lov.RecApp

In the meantime, ill update the footage-design repository every time I make changes.

[amikha1lov]

flatpak install com.github.amikha1lov.RecApp

did you use flatpak update com.github.amikha1lov.RecApp command? do you build through the terminal or Gnome Builder ?

[SeaDve]

No, I didn't use flatpak update. Yes, I use builder's terminal.

On Thu, Jan 28, 2021, 02:45 Alexey Mikhailov notifications@github.com wrote:

flatpak install com.github.amikha1lov.RecApp

did you use flatpak update com.github.amikha1lov.RecApp command? do you build through the terminal or Gnome Builder ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/amikha1lov/RecApp/pull/63#issuecomment-768493598, or unsubscribe https://github.com/notifications/unsubscribe-auth/APKRXTY5O76KEB72YNOU6HLS4BNNTANCNFSM4WFZMONQ .

[amikha1lov]

@SeaDve did it helped you? (flatpak update com.github.amikha1lov.RecApp)

[SeaDve]

Oh sorry, I'm pretty busy with school works today. I'll try tomorrow.

On Thu, Jan 28, 2021, 21:26 Alexey Mikhailov notifications@github.com wrote:

@SeaDve https://github.com/SeaDve did it helped you? (flatpak update com.github.amikha1lov.RecApp)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/amikha1lov/RecApp/pull/63#issuecomment-769050932, or unsubscribe https://github.com/notifications/unsubscribe-auth/APKRXT5X6VDHFMF2KGVSGATS4FQXTANCNFSM4WFZMONQ .

[SeaDve]

@SeaDve did it helped you? (flatpak update com.github.amikha1lov.RecApp)

It works, but it is still not working good, I still have to rename and use in the .UI file. Might take me a while. Although I have rewritten the preferences window to integrate to the main window to make it easier to migrate.

Here is what It looks like.

https://user-images.githubusercontent.com/64297935/106341574-b55a8b00-62d8-11eb-9904-99f9075d7efa.mp4

[SeaDve]

Don't you think it will be better to use symbolic icons for start/stop buttons instead of text? I think it will look better if both stop and pause buttons will be symbolic.

I'll consider this in the future.