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

Improvements for the UI #143

Closed
jsimplicio opened this Issue Jan 20, 2016 · 51 comments

Comments

Projects
None yet
5 participants
@jsimplicio

jsimplicio commented Jan 20, 2016

Hey everyone, I found this project under Open Source Design (http://opensourcedesign.net/jobs/) and really want to collaborate and help make the UI look better, and overall UX. I want to start playing with the app so I can start figuring out the weak points in the UI and start sketching. However I am not sure how to run the app. I installed QT and am not sure if that's all that I need to run but when I try to run the command for OS X with qmake it tells me that it cannot find the command qmake. Perhaps is a $PATH issue?

Thanks for your help!

@annejan

This comment has been minimized.

Member

annejan commented Jan 20, 2016

First of all thank you for your interest in helping us out making QtPass more awesome.
Currently we are in a redesign step, so it might be smart to have a look at the current changes in #124

On OSX it's easiest to install QtCreator http://www.qt.io/ide/ which I'm guessing you did?

Then open the qtpass.pro file, this should open the IDE which will ask you some questions about what kinds of builds you want to make, the defaults should suffice.

The IDE has a [Run] button for running QtPass and quickly viewing changes you make in the Forms and Code.

Running qmake from command-line indeed needs a path change, in my .bash_profile on OSX I have export PATH="$HOME/Qt/5.5/clang_64/bin:$PATH"

Please let me know if this is helpful..

Also, for just running QtPass there are builds under https://github.com/IJHack/qtpass/releases

@jsimplicio

This comment has been minimized.

jsimplicio commented Jan 20, 2016

Hey there @annejan and thanks for the quick and helpful reply. I followed your instructions which made complete sense and got everything working! I will catch up to speed on that thread!

Cheers

@jsimplicio

This comment has been minimized.

jsimplicio commented Jan 20, 2016

Hey @annejan I took a stab based on what was already done in that PR. I decided that we have so few icons that I made them myself, why not! So we have a common style going. I noticed in some of your screenshots that the icons were inside of a box with a border. Is it possible to let them stand out by themselves as a button and to remove that outline?

Let me know what you think!

*missing the key icon currently so ignore that.

qtpass

@annejan

This comment has been minimized.

Member

annejan commented Jan 21, 2016

From @termitoz moved from #124
New looks:

qtpass keygen

qtpass keygen progress

@jsimplicio

This comment has been minimized.

jsimplicio commented Jan 21, 2016

Here are the button icons in svg and previews in jpeg:

adddeleteeditmove downmove upsettingsusers

qtpass-icons.zip

@jsimplicio

This comment has been minimized.

jsimplicio commented Jan 21, 2016

@annejan Btw if you want the icons outside of the circular buttons too let me know!

@annejan

This comment has been minimized.

Member

annejan commented Jan 21, 2016

Awesome, thank you @jsimplicio !

Yes please, just the icons would be awesome for #124
Also if possible I'd love for a <X] style (clear search for mainwindow and users) button and a Copy (password) button 🙇

Trying the round buttons as fallback (on OSX) now . . looks like this . .
screen shot 2016-01-22 at 16 18 26

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 1, 2016

Hey @annejan I'm noticing the config screen is gonna end up looking different soon. Under profiles? I see the mentioning of templates also. What are some things missing from config that we should include in a redesign?

@annejan

This comment has been minimized.

Member

annejan commented Feb 1, 2016

More settings that are per-profile (not just the password-store folder) #112
Most importantly the git settings.

Templates must be that .. Templates not just a template ;-) #155

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 1, 2016

Right now there's a template tab in the config. How's that different?

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 1, 2016

Also where would the git settings be now? The current ones aren't enough?

@annejan

This comment has been minimized.

Member

annejan commented Feb 1, 2016

We want the ability to have multiple templates, with names.

For example: server, website, product
And all of them have different fields, server would have IP and product might have serialnumber for example.

The git settings are enough, but should be changeable per-profile.
So that will need a big reshuffle from the general page to a per-profile page (if that makes any sense).

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 1, 2016

Like this for the git?

qtpass 1

@annejan

This comment has been minimized.

Member

annejan commented Feb 1, 2016

Yah that looks very do-able 👍

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 1, 2016

Cool, I'm not too much of a coder but I can keep giving you these templates for you to refer off of?

For the templates, the types of options under each template would be something you'd have to think about right? Can you name some templates for example

@annejan

This comment has been minimized.

Member

annejan commented Feb 1, 2016

From #155

Secure Notes
Credit Card Info
Logins
Identities
Bank Accounts
Database Logins
Email Accounts
Memberships
Servers (ssh)
Software Licenses

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 2, 2016

Under templates in config, should I still keep the "use template" and "show all fields templated" ?

And should you be able to switch between templates and fill out their fields?

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 3, 2016

Also instead of saying "Use TrayIcon" under system in settings, is there a better way to say it that'd be clearer for more users that don't understand what TrayIcon is?

@annejan

This comment has been minimized.

Member

annejan commented Feb 4, 2016

I think you should be able to switch which template you want to edit.

TrayIcon is probably not that good a name indeed, I'm not that well known with the popular naming of widgets on desktop systems.

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 4, 2016

What is a TrayIcon exactly? What does it mean to use it. So the icon shows up somewhere?

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 4, 2016

Also I had time to clean up the icons, I ran these thru svgo already as well
qtpass-icons.zip

@annejan

This comment has been minimized.

Member

annejan commented Feb 4, 2016

Thanks for the icons, will put them in when I can.

The tray or system-tray is where some applications can have a quickly accessible icon to use. This is available on most systems. The most striking example most people are familiar with is the volume controls, the speaker icon that pops up a volume slider.
On Windows and KDE the tray is most commonly found at the bottom-right. On Mac OSX and Gnome it's common at the top-right of the screen.

QtPass has the possibility of having a trayicon to hide and show the application. When using the trayicon you also gain the option to "hide" there instead of closing the app when you press the [X] close button.

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 4, 2016

I think for macs it's referred as the menu bar? I'm not sure what it is called on Windows since I'm not a user of it.

@annejan

This comment has been minimized.

Member

annejan commented Feb 4, 2016

Seems that indeed the Mac name is menu bar

https://support.picturelife.com/hc/en-us/articles/201440709-What-is-the-system-tray-or-menu-bar-

I'll make an automagic platform switch for the terminology :-) and call it "menu bar" on OSX

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 4, 2016

A user should be able to edit the fields in a template when they're adding a new entry? How does the template settings change under config if at all?

@annejan

This comment has been minimized.

Member

annejan commented Feb 4, 2016

The templates are used when creating a new password entry.
Also when editing an entry they are shown.

If you chose the "show all fields templated" option, every line in the password file that has a : in it as a separator is shown as a "field" with a "value" except for URLs.

Currently you can only add fields via config or while entering or editing a password by entering it as a line field:value in the comment section of the pasword file when using the "show all fields templated" feature.

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 4, 2016

Any reason why there is this big text area under login and url?
screen shot 2016-02-04 at 4 28 34 pm

I'm thinking of adding a select drop down list where you switch templates and every time you switch instead of saying 'login' and 'url' it says whatever the fields that template holds. Does that make sense?

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 4, 2016

Also can you only generate a password, you can't enter your own?

@annejan

This comment has been minimized.

Member

annejan commented Feb 4, 2016

The big field is for comments or other information like notes, hints, links or software licenses.
The login and url come from the Template settings in Configuration, there can already be others.

You can just enter a password in the field, generation is completely optional.

Dropdown would be the way to go as @jounathaen noted in #155
something like this perhaps just a bit more elegant.

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 4, 2016

Understand. I was getting a little confused by the UI because it suggests you should generate a password instead of perhaps entering your own. Instead of using the fields under templates in config, wouldn't these fields change depending on the template?

@annejan

This comment has been minimized.

Member

annejan commented Feb 4, 2016

Yes, they change depending on the template you chose.

The current situation you can only have one template and optionally choose to have automagic fields added.

When we add multiple templates and for example you have an "email" field set with "a@b.c" in template A and switch to template B which doesn't have "email" them in the comment section would appear a line with email:a@b.c
When you chose the config setting for "show all fields templated" the "email" field will stay, because it is in the password file, even though it's not in the chosen template.

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 4, 2016

why should you keep the field from template A in template's B comments when you switch?

@annejan

This comment has been minimized.

Member

annejan commented Feb 5, 2016

Normally you don't and they don't show as fields, only in the comment section.
screen shot 2016-02-05 at 01 18 12
But when a user checks the "show all fields templated" checkbox, they do.
Since that feature shows all lines that have a : and are not urls as a "field" with it's value.
screen shot 2016-02-05 at 01 18 27

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 5, 2016

Since there are a lot of fields to be filled and all that, instead of the password adding part being a pop up screen when you're adding a password, wouldn't it be better to automatically open that screen from the screenshot you've sent above?

I tried mocking up a pop up like it happens now but not much can fit in it. I feel like if it automatically opened in the screen above where you fill out stuff it makes more sense?

Here's how crowded a pop up would get:

add password

@annejan

This comment has been minimized.

Member

annejan commented Feb 5, 2016

The screenshot above is just that, a (modal) popup, that what it looks like on a KDE/plasma desktop.

And it's even missing the comment/notes field ;)
But the "popup" can be resized . . it doesn't have to be tiny . .

@keitalbame

This comment has been minimized.

keitalbame commented Feb 5, 2016

Is there any drawback to have next to the generate password button, a way to change the number of characters? Its not necessary for this to change the default value. Just on that operation.

In my case, I always use 100 characters as default but sometimes, websites don't like this. Some even don't explicit the max allowed and so a trial and error is needed.

I know that this probably is not a feature that is going to be used alot but it would be a nice to have, IMO.

@annejan

This comment has been minimized.

Member

annejan commented Feb 5, 2016

I can't think of any drawbacks except for UI clutter.

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 5, 2016

I know the screenshot is a modal pop up but when you add a new password the options to add open up on a new pop up. I on as wondering if immediately adding it to the actual qtpass modal and letting you edit there is better than editing on another smaller modal that has popped up when you clicked "add"

@jsimplicio jsimplicio closed this Feb 5, 2016

@jsimplicio jsimplicio reopened this Feb 5, 2016

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 5, 2016

Sorry closed it on accident.

@annejan

This comment has been minimized.

Member

annejan commented Feb 7, 2016

Ah, yeah, in-place adding/editing was something I tried when we just started with QtPass.
We found it to be a bit confusing at the time, but it is worth a try.

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 8, 2016

I believe if you perhaps have the pop up first where you enter the name like it happens now and then it auto adds to the list of passwords and the information pertaining to that one opens up on the side of the password list with edit mode on? The person wouldn't be able to leave that screen without saving the info or canceling out I suppose. I can try mocking some stuff up and we could try testing it out if it's too confusing

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 8, 2016

@keitalbame This could be a good feature to offer so the password generator is a little customizable. Not sure how cluttered it'd make the interface but I can try to mock it up as well. And we'll see.

@jsimplicio

This comment has been minimized.

jsimplicio commented Feb 9, 2016

Here's how things could look when you click on a password file:

qtpass

And then you can click edit to make any changes. This screen could also be the screen that shows up after you add a new password file but then with blank everything for you to fill out.

qtpass-edit

@jounathaen

This comment has been minimized.

Member

jounathaen commented Nov 5, 2016

At the moment, I'm workin on some UI upgrades, which will maybe fix #127
But I cannot say, when I'll have the time to finish it...

@jounathaen

This comment has been minimized.

Member

jounathaen commented Nov 16, 2016

qtpass
I did some Changes, not finished yet.
Includes:

  • Second Collumn is grey (not interactable, so why white)
  • Filename is shown above entry
  • Small Qtpass Icon in the corner
  • Deselect item by clicking on whitespace in Treeview (would solve #127)

(still working on last point)

Tell me if you like it!

@tezeb

This comment has been minimized.

Contributor

tezeb commented Jan 9, 2017

@jounathaen is it already merged?(some of the items listed seems to be included in master?)

Anyway, I have an idea how to implement templates to make it easier to modify it(or them?) and to make look and feel of QtPass more consistent(ie. right now even with templates disabled, Add/Edit window shows login/url fields).
Even in the simplest scenario(current) there are effectively two templates(one from configuration and the empty one). Additionally right now each time file is displayed the fields are created/destroyed, which is a bit wastefull. I think that we can create common interface (ie. fileTemplate), which will be used for creating widget given file contents. This widget will be displayed inside gridLayout in MainWindow and inside Add/Edit window and whenever displaying/editing password is needed. Of course different widget will be created depending on desired action(show/edit).

class fileTemplate {
protected:
QWidget* getPasswordLine(bool edit = false);
QWidget* getPlainTextEdit(bool edit = false);
QWidget* getEditLine(bool edit = false);
public:
QWidget* getWidget(QString &fileContent, bool edit = false);
void clear();
};

It will come handy if we're going to implement #155.

@annejan

This comment has been minimized.

Member

annejan commented Jan 9, 2017

Correct, @tezeb, the stuff proposed by @jounathaen has been merged (and improved upon too) . .

Your idea seems nice, but did you take into account the "treat all colon separated fields (except urls) as template fields" scenario?

@tezeb

This comment has been minimized.

Contributor

tezeb commented Jan 9, 2017

Not really. Wasn't aware of it. Is it described somewhere?
It shouldn't be difficult to extend though(after all each template has access to whole content and can split it arbitrarily).

@tezeb

This comment has been minimized.

Contributor

tezeb commented Jan 9, 2017

Additionally widget can have signals which will be proxied through fileTemplate to MainWindow so that fileTemplate can has final say on the format of data stored inside a file.

@tezeb

This comment has been minimized.

Contributor

tezeb commented Jan 9, 2017

I've just noticed in the passworddialog.cpp what you probably have meant. I do intend to keep the format of stored files exactly the same as they are now(ie. templated lines of form "name: value").

@annejan annejan closed this Jun 12, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment