search

xy2z / dopenote

đź“ť Self-hosted modern webapp for notes - Free and open source - (WORK IN PROGRESS)
https://dopenote.gitbook.io/docs/
GNU General Public License v3.0
24 stars 9 forks source link

Temp. Interface #11

Open calvinmorett opened 5 years ago

calvinmorett commented 5 years ago

Would this be a direction you would want to go for the interface? Was thinking the action buttons can be moved away from the note section and keep the 'action' items to the side bar.

https://codepen.io/CalvinMorett/pen/qgKqWz https://gist.github.com/calvinmorett/98b2cc4f9dc6f97ee823247e7b6b40b8

xy2z commented 5 years ago

Overall I really like it. It's calm with good contrast and colors, and looks good with action buttons in the sidebar.

Some minor things:

  1. Menu links should be <a> tags instead of <button> so it can be right clicked and opened in new window, etc. (not the action buttons)

  2. I'm not a fan of the blinking circle on the active note. I don't think it's needed and feel like it's saving or loading when it's blinking, it's a bit distracting for me.

  3. The hovering fade on note links should be instant (:hover) and not faded (keyframes), it just makes the app feel faster imo. Looks good on the action buttons though.

  4. I'd prefer not to use !important unless it's really neccessary.

I'm not sure about the logo animation - but just keep it for now and I'll test if it's too big a distraction when writing.

calvinmorett commented 5 years ago

Appreciate the direction, I'll make sure to reiterate what you're saying to make sure I'm going in the right direction and we can keep building it closer towards your vision. I'll address issues and if this isn't the best place to discuss possible design decisions then we can move this off of here.

  1. This initial design was not directly a copy of what you have in terms of structure, I was just trying to layout some things in terms of styles, default, active and starred links for notes. With that said and with this initial design path you are free to switch up at anytime, moving forward I'll try to build directly into the structure so it's less confusing. Knowing you want them opening in a new window is great input and makes me consider ways to visually communicate that to your users, perhaps we can figure that out.

  2. Okay animations removed, I can see how they can be distracting.

  3. Okay more direct feedback on hovers, it was a little jarring so I made it less of a transition. This should make it feel faster.

  4. Yes, bad form. Sort of point 1, just the initial design without structure. Removed.

New Revisions

xy2z commented 5 years ago

Personally I actually prefered the v.01 and v.04 revision :) I think v.02 and v.03 links have way too much height but I appreciate the effort! But I have actually decided to start implementing notebooks, and like the way Notejoy and Evernote has done it with the notebooks on the left, then the notes, and then the editor.

I think I want it to look something similiar, at least for the default theme. Altough the note content should not be displayed, only the note title (like now). The plan is to implement more themes in the future.

I'm currently working on this and almost finished - maybe you could give a shoot at that when it's done?

I'm not sure where to put the rename/delete actions for the notebooks - maybe it will just be when right clicked.

And about the actions there have to be space for more buttons to come in the future for something like "Share note", "Duplicate" etc. That will only come much later, but still the layout should prepare for it so maybe we shouldn't have the note actions in the sidebar. This could also be on right click, but if you have any ideas for note actions like Star and Delete let me know.

calvinmorett commented 5 years ago

@xy2z Excellent plan, let me know if this correct. I'll try to combine the best elements of v.01 and v.04, for a default theme then after you're done we can figure out more themes.

Todo: [ ] Review what Evernote + Notejoy do and try to implement some of their interface ideas

Needs:

@xy2z Consideration:

Some quick notes after reviewing the two sites.

Evernote

Notejoy

Take aways

My thoughts and questions

I think it would be best to focus on the users experience for the most used device that you yourself were planning to this for, I feel this is important because then we can really refine that device state and it will be a sort of nexus for all other parts of the layout. What device might you want to focus on initially? Desktop, mobile, tablet?

You should also consider what separates the value of DN to something quick that a user might already use, such as the simplicity of Notepad, Word, or Apple iPhone default Notes. I can open those up, already installed write something and save it to a folder, why do I need to use this? Can I import my desktop notes without a bunch of copying and pasting? What value would this be providing over something else they might already be using for quick notes?

Granted these might be overarching and too broad of questions, but maybe it should be a least a part of the train of thought to make something that considers a lot of view points while trying to avoid creating pain points as working through the initial stages of fleshing out the functionality and layout. I think my focus will be to try and make the interface as easy as possible to dive right into and start writing, while maybe providing something that is familiar, but better than the other tools they've used in the past.

New Revisions

calvinmorett commented 5 years ago

I think responsive design is a part of this so possibly the issues can be merged.

What do you think of a bar that is able to be arranged from the top, left, bottom and right sides of the screen. With the note being, of course, the main feature. Being able to adjust the sidebars position based on personal preference seems like it could improve the UX and be an interesting feature.

Also, I think styling the sidebar off of another familiar element in Notepad would be something interesting for the top and bottom smaller, action bars. I think focusing on making it as easy as possible to understand, taking notes should be a breeze. Also organization should be just as easy.

xy2z commented 5 years ago

What do you think of a bar that is able to be arranged from the top, left, bottom and right sides of the screen.

If you mean the sidebar, then absolutely yes. I think customizing is very important; color-scheme, layout, font, font size and more.

Also, I think styling the sidebar off of another familiar element in Notepad would be something interesting for the top and bottom smaller, action bars.

Sorry I'm not sure what you mean. Do you mean the sidebar should be around the Notepad with a top-bar and bottom-bar with same background color as the sidebar?

I think focusing on making it as easy as possible to understand, taking notes should be a breeze. Also organization should be just as easy.

Yes! It should be very easy to start and intuitive for new users. That's why I'm looking alot what others are doing. This will always an ongoing task, I don't think we will get it perfect from the first go. Listening to user feedback is also important (maybe there should a feedback option/link in the first releases)

calvinmorett commented 5 years ago

Okay let’s put it into a better format so we can stay organized and measure the progress. I should’ve maybe made this from the start, because I’m sure we could discuss all day about the what ifs. Let’s get something concrete outlined as a bare minimum for a first release.

On Thu, Feb 28, 2019 at 10:38 AM xy2z notifications@github.com wrote:

What do you think of a bar that is able to be arranged from the top, left, bottom and right sides of the screen.

If you mean the sidebar, then absolutely yes. I think customizing is very important; color-scheme, layout, font, font size and more.

Also, I think styling the sidebar off of another familiar element in Notepad would be something interesting for the top and bottom smaller, action bars.

Sorry I'm not sure what you mean. Do you mean the sidebar should be around the Notepad with a top-bar and bottom-bar with same background color as the sidebar?

I think focusing on making it as easy as possible to understand, taking notes should be a breeze. Also organization should be just as easy. Yes! It should be very easy to start and intuitive for new users. That's why I'm looking alot what others are doing. This will always an ongoing task, I don't think we will get it perfect from the first go. Listening to user feedback is also important (maybe there should a feedback option/link in the first releases)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/xy2z/dopenote/issues/11#issuecomment-468319297, or mute the thread https://github.com/notifications/unsubscribe-auth/ALHXBRIrbBZjNROIY9sYc9Z4o-XC_Ka2ks5vR_fugaJpZM4a4bJg .

xy2z commented 5 years ago

Agreed By theming I'm thinking color-scheme, and not layout changes. I think that's too big for the first release. So it's purely CSS color changes - that would be cool to have in the first release. When you say dark theme do you mean dark notepad theme? This would require the rich-text editor we're using (right now it's tinymce) has support of dark theme.

Also i think action buttons are necessary because users can't right click on mobile/tablet. So these action buttons are needed for first release

Notebook actions

Note actions

And for the trash view there should be a Restore button for each note, but that's part of #21

calvinmorett commented 5 years ago

I’m in the same page for theming, no pun intended. No drastic big changes, just preference, ornamental. Was thinking css variables, embedded no extra, besides maybe some JavaScript.

Adding these, will refactor list later this weekend.

On Thu, Feb 28, 2019 at 1:46 PM xy2z notifications@github.com wrote:

Agreed By theming I'm thinking color-scheme, and not layout changes. I think that's too big for the first release. So it's purely CSS color changes - that would be cool to have in the first release. When you say dark theme do you mean dark notepad theme? This would require the rich-text editor we're using (right now it's tinymce) has support of dark theme.

Also i think action buttons are necessary because users can't right click on mobile/tablet. So these action buttons are needed for first release

Notebook actions

  • New notebook
  • Rename notebook
  • Order notebook (or move up/move down in menu order)
  • Delete notebook

Note actions

  • New note
  • Star (toggle)
  • Delete note

And for the trash view there should be a Restore button for each note, but that's part of #21 https://github.com/xy2z/dopenote/issues/21

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/xy2z/dopenote/issues/11#issuecomment-468389765, or mute the thread https://github.com/notifications/unsubscribe-auth/ALHXBQr6Snscoe9WpMQF7_GDV1_GXSnEks5vSCQGgaJpZM4a4bJg .

calvinmorett commented 5 years ago

Any possibility to assign classes to a lot of things in the interface to make it easier to customize and theme?

xy2z commented 5 years ago

Can you give some examples where there's missing classes?

calvinmorett commented 5 years ago

Yeah just off the top of my head because I can't remember what I was trying to style and was unable to, but, the sidebar, the main section, both inputs separately; title and body text, any icons/buttons. I can give you a better list sometime this week or later.

xy2z commented 5 years ago

You can see the whole app html here: https://github.com/xy2z/dopenote/blob/master/resources/views/app.blade.php

If classes is missing please make a list here or a PR :)

calvinmorett commented 5 years ago

Would like to address this again, and say that I think there should be classes for Starred Notes, and Trashed Notes so in the future you can style these easier in case you wanted to say add a tooltip or icons. Related, will there be a trash in the future for notebooks too?

Also, I was thinking instead of Starred it could be Pin instead.

https://fontawesome.com/icons/thumbtack It's an icon that I think would make more sense, but what do you think?

I will make a pr soon for the css updates I've made, but if you have stylish you can see them now, by adding these class edits.

`body { margin: 0; font-family: sans-serif; font-size: 15px; } nav { position: sticky; top: 0; flex-shrink: 0; width: 210px; background: #333; padding-top: 0; color: #eee; } nav button.action { background: #535353; border: 0; border-radius: 0; font-weight: 500; padding: 2em; display: block; margin: 0; width: 100%; font-size: 11px; color: #e3e3e3; cursor: pointer; transition: background .17s ease; } nav .logo-wrapper { display: block; margin-bottom: 0; text-align: center; } nav .logo-wrapper .logo { font-size: 2em; position: absolute; bottom: 0; left: 10px; } nav button.action:hover { background: #5e5e5e; } / end nav + notebook button /

/ start starred + trash links / / nav .nav-notebooks a:nth-of-type(1):before{ content:''; width:6px; height:6px; background:#0aea4c; border-radius:100%; display:inline-block; padding:0; margin:0 10px 3px; } nav .nav-notebooks a:nth-child(2):before{ content:''; width:6px; height:6px; background:#c10808; border-radius:100%; display:inline-block; padding:0; margin:0 10px 3px; }/ / start note list edits / .notes-list { position: sticky; top: 0; flex-shrink: 0; width: 300px; background: #f5f5f5; padding-top: 0; } .notes-list button.action { background: #e0e1df; border: 0; border-radius: 0; font-weight: 500; padding: 2em; display: block; margin: 0; width: 100%; font-size: 11px; color: #6f6f6f; cursor: pointer; transition: background .12s ease; } .notes-list button.action:hover { background: #e7e8e7; }

.notes-list a { display: block; padding: 2em; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #e3e3e3; border-bottom: 1px solid #e5e6e5; letter-spacing: -.01rem; transition:background .076s ease,color .4s ease; color: #999; font-size: 0.9em; } .notes-list a.active { background: #e6e6e6; color: inherit; font-weight: 600; letter-spacing: -.01rem; } .notes-list a.starred { border-left:0; box-shadow: inset 5px 0 0 #00ff04; }

/ / / change star to thumbtack for pin note /

/ empty note list message font size + spacing / .notes-list .empty-note-list { text-align: center; color: #999; padding: 2.5em; font-size: 1.5em; }`

https://i.imgur.com/YdedLiW.png

xy2z commented 5 years ago

Would like to address this again, and say that I think there should be classes for Starred Notes, and Trashed Notes so in the future you can style these easier in case you wanted to say add a tooltip or icons.

The starred notes does get the starred class, in the sidebar Trashed notes does not, but it can be done :)

Related, will there be a trash in the future for notebooks too?

I'm not sure but don't think so. Right now when you delete a notebook, all notes inside will be moved to trash. But this can of course always be changed later.. I just think it will be more confusing to have a trash for notes and a trash for notebooks... What do you think?

Also, I was thinking instead of Starred it could be Pin instead.

I personally don't agree, but this could be customized later so the user can select what they want to call it in the "user settings" if it's a problem for some. Google Drive, Dropbox, Paper, etc. all uses "Star" so I think that's what people are used to.

As far as the design changes from the image you posted, can you type exactly what you changed so I can comment on it all? Here's my thoughts so far

Buttons: I think the buttons should look more like buttons, maybe add a "plus" icon in front of the text would help?

Logo: We can put it in the bottom, but that would maybe require we had a scrollbar for the notebooks, so it will always be visible if the user has alot of notebooks, or no? I think it should be center aligned though?

Green: The green color for starred notes instead of orange. I picked orange so it matches the logo color. But this should be a user setting / theme setting so we can have alot of different (customizable) themes. For the default theme I would stay with orange since it has better contrast with the lightgrey background and matches logo and star icon color. But this will def. be a theme setting. I just don't want to focus too much on themes right now, first priority is to get a good functioning note editor, and the it can be "pimped" later :smile:

Btw good work :+1:

calvinmorett commented 5 years ago

Yes, a lot of my changes are subjective and not really a big deal in terms of usability.

Would it be simpler if I created new issues for individual elements instead of the overall interface? For example, Nav Design, Editor Design, Icon Design?

xy2z commented 5 years ago

Yes đź‘Ť

xy2z commented 4 years ago

Removing this from version 1 milestone - hopefully we'll get it done in the near future