Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI redesign #63

Closed
wants to merge 4 commits into from
Closed

UI redesign #63

wants to merge 4 commits into from

Conversation

SeaDve
Copy link
Contributor

@SeaDve SeaDve commented Jan 17, 2021

1

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.

mockup

Thanks! Would love to know your opinion.

@SeaDve SeaDve changed the title Entire app redesign UI redesign Jan 17, 2021
@amikha1lov
Copy link
Owner

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
Copy link
Owner

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

@SeaDve
Copy link
Contributor Author

SeaDve commented Jan 18, 2021

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
Copy link
Collaborator

Latesil commented Jan 18, 2021

@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
Copy link
Contributor Author

SeaDve commented Jan 18, 2021

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

image

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:

image
or
image

@Latesil
Copy link
Collaborator

Latesil commented Jan 18, 2021

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

@SeaDve
Copy link
Contributor Author

SeaDve commented Jan 18, 2021

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

Okay, updated the first screenshot.

@liferooter
Copy link

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
Copy link

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
Copy link
Contributor Author

SeaDve commented Jan 19, 2021

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
Copy link
Owner

amikha1lov commented Jan 20, 2021

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

@amikha1lov
Copy link
Owner

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
Copy link
Contributor Author

SeaDve commented Jan 23, 2021

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.

image

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
Copy link
Owner

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

@SeaDve
Copy link
Contributor Author

SeaDve commented Jan 24, 2021 via email

@SeaDve
Copy link
Contributor Author

SeaDve commented Jan 24, 2021

image

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
Copy link
Owner

image

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
Copy link
Contributor Author

SeaDve commented Jan 24, 2021

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
Copy link
Owner

Excellent, thanks

@amikha1lov
Copy link
Owner

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
Copy link
Collaborator

tim77 commented Jan 24, 2021

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
Copy link
Contributor Author

SeaDve commented Jan 24, 2021

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
Copy link
Contributor Author

SeaDve commented Jan 25, 2021

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

@amikha1lov
Copy link
Owner

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
Copy link
Contributor Author

SeaDve commented Jan 25, 2021

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
Copy link
Contributor Author

SeaDve commented Jan 25, 2021

image
Preferences button is now working

@SeaDve
Copy link
Contributor Author

SeaDve commented Jan 26, 2021

image
image

Transitioned AboutDialog to use .ui file

@SeaDve
Copy link
Contributor Author

SeaDve commented Jan 27, 2021

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

@SeaDve SeaDve closed this Jan 27, 2021
@amikha1lov
Copy link
Owner

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

@SeaDve
Copy link
Contributor Author

SeaDve commented Jan 27, 2021

@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
Copy link
Owner

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
Copy link
Contributor Author

SeaDve commented Jan 27, 2021

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
Copy link
Owner

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
Copy link
Contributor Author

SeaDve commented Jan 27, 2021 via email

@amikha1lov
Copy link
Owner

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

@SeaDve
Copy link
Contributor Author

SeaDve commented Jan 28, 2021 via email

@SeaDve
Copy link
Contributor Author

SeaDve commented Jan 30, 2021

@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.

Screencast.from.01-30-2021.08.52.46.AM.mp4

@SeaDve
Copy link
Contributor Author

SeaDve commented Feb 6, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants