search

cozy / notes

Note manager
https://demo.cozycloud.cc/#apps/notes
Other
22 stars 17 forks source link

First steps toward a responsively designed client #42

Closed audreytoskin closed 9 years ago

audreytoskin commented 10 years ago

Since these are mostly changes to design, I decided to take some screenshots...

Wide view

note list sample notes, scrolled up sample notes, scrolled down

Medium view

note list sample notes, scrolled up sample notes, scrolled down

Small view

note list sample notes, scrolled up sample notes, scrolled down

The client still doesn't look great at very small sizes, but I talk about that in commit #47e7397. I tried to be very clear about my reasoning in the commits, so read those for more details.

I hope you like what I've done so far. Let me know if I messed up and edited the wrong files, or something needs to change.

frankrousseau commented 10 years ago

Thank you @Terrycloth for this big PR! I will review it soon.

I think Cozy Notes require a lot more work to be fully responsive. Specially the left part. A quick and dirty fix could be to do the same a in Cozy Todos and add nav button that hides and show the menu on click. What do you think about it?

audreytoskin commented 10 years ago

Click to hide / show the nav bar sounds good to me too.

audreytoskin commented 10 years ago

It's been about a week now. Is there anything I can do to help move this pull request along?

frankrousseau commented 10 years ago

Sorry for the delay. I tried your change, the work on the text is interesting. I like the fact that fonts get bigger and that it doesn't fill the whole screen. But it's very opinionated, so I have to speak about it with the whole team. Aside of that, I noticed a problem, with the file attachment area. With your change, its position is really messy. Could you do something about it?

audreytoskin commented 10 years ago

Hah, "opinionated" is probably right. I could take another look at the file attachment area. I have more edits planned anyway, but I wanted to discuss those, after this pull request is settled.

I already know the file attachment area is not perfect yet, but could you tell me specifically what you think the problem is? Do you just not like its positioning relative to other elements in the page? Or is there a problem when there are several files attached? I'll admit I hadn't tested that.

frankrousseau commented 10 years ago

Ok here is a screenshot.

note_screenshot_bug_attachment_display

audreytoskin commented 10 years ago

add nav button that hides and show the menu on click.

Hah, I just realized a couple days ago that there already is a button to hide the list of note pages, in that thing strip on the left side of the screen, between the notes list and the current note editor. It's a little hard to poke this narrow little strip on mobile devices, though...

Ok here is a screenshot.

Weird. What are the steps you take to duplicate this bug? When it happens, does the file list continue to hover over the scrollbar, or does it only last for a short time? I can't duplicate this bug for more than a split second -- it usually corrects itself as I'm scrolling the window, so I'm having a hard time using my browser dev tools to figure out what's going on there.

...Instead, I'm having an issue where the file list appears too far to the left when testing the client on narrower view ports. When I first load or refresh the page, it appears fine. cozy notes app - file list - first load - caption

When I scroll down it's still okay. cozy notes app - file list - scroll down - caption

But when I scroll back up, the file list is too far to the left. cozy notes app - file list - scroll up - caption

This bug happens pretty consistently. Apparently an inline style, set using the style attribute on div#note-file-list is the cause. At smaller window sizes, the div's style attribute sets the left style to a negative number. I can start looking around the client code to see what's causing this, but I'm still new to JavaScript and haven't had much time to look at CoffeeScript yet. So you might catch the bug faster than me, if you get a chance to look.

frankrousseau commented 10 years ago

I think we should change the style of that widget and make it simpler to position. Would you be interested in finding it a new face ? I think it involves little programming, it's more about CSS.

audreytoskin commented 10 years ago

make it simpler to position

I agree. But the file list widget doesn't respond to CSS from the Stylus files because inline style attributes have greater "specificity" and so override any stylesheets. We would need to change the code generating the page HTML, removing the part setting the style attribute on div#note-file-list.

Would you be interested in finding it a new face ?

You mean a font face? The file list widget currenlty uses Signika, just like everything in Cozy Notes. I personally think it would better to also make the file list's text color match the rest of the text, or at least make it closer to the text color of the rest of the Cozy Notes.

But if you want to change the font for the notes editor, the file list widget, or both, Source Sans Pro is one of my favorite sans-serif fonts.

frankrousseau commented 10 years ago

I agree. But the file list widget doesn't respond to CSS from the Stylus files because inline style I attributes have greater "specificity" and so override any stylesheets

Ok. I think we should make things more based on CSS. I mean not tweaked by JS.

You mean a font face?

Sorry for my bad english. I meant "Would you be interested in changing the widget look'n'feel (still not sure that it is the right word)?"

But if you want to change the font for the notes editor, the file list widget, or both, Source Sans Pro > is one of my favorite sans-serif fonts.

Thank you for the pointer. We would like to change the Cozy Fonts because of their bad way to deal with bold and italic. I will share that one with the team.

audreytoskin commented 10 years ago

I meant Would you be interested in changing the widget look'n'feel?

Oh, I understand. Calling it the "face" could also work, but since we're talking about the particulars of design, I wasn't sure if you meant the more specific word "typeface" or something like that. Heh, your English is just fine; my French would be terrible.

I'm certainly interested in helping out some more, and I can definitely take care of changes to the CSS. I just wanted to point out that some things -- such as the positioning of the file attachment widget -- can't be fixed with CSS until after the JS gets fixed.

Since the things we've been talking about will require fixes to code which I have not edited in this pull request, can we either accept or close the pull request? I think it might be okay if the Master branch isn't perfect yet, because normally stable releases get pushed to separate branches, right?

frankrousseau commented 10 years ago

The master is the stable version. We apply continuous deployment principles, so we dont make real versioning. If you dont mind I prefer to keep the PR open. The goal is to merge it with the master branch. So let's make it perfect!

About the widget, we should change the positioning, it's too hard to maintain the way it is currently Making it full CSS is the right way to go.

About the font face you, we can try the one you propose, the team like it.

frankrousseau commented 10 years ago

@Terrycloth How are you. Did you find time to work on this PR?

audreytoskin commented 10 years ago

Sorry, I haven't forgotten about this, nor given up. I've been learning CoffeeScript by doing some basic scripting with Eco in a DocPad site I'm building. I am still more confident in HTML/CSS and design than I am with programming. I still have plenty to learn.

I might just be starting to understand enough to try to figure out a solution... but you could probably figure this out faster than I could.

frankrousseau commented 10 years ago

Ok, no problem. We are not focusing our work on the note application actually. So you have plenty of time to learn technologies. I will notify you when we'll work on it again.

audreytoskin commented 10 years ago

Sorry I've been so slow about this. Today is the first time I've been able to really sit down and look over the Cozy Notes code and try to figure out how it works. Now I'm having a problem starting the application again. It's been a while since I worked on this, so I'm having trouble figuring out what's wrong.

I started CouchDB. sudo systemctl start couchdb

That starts okay.

I updated and then started the Cozy Data System. cd cozy-data-system git pull origin master coffee server.coffee

This seems to go okay.

Then in another terminal, I go to Cozy Notes. I don't think there have been changes upstream since I began my pull request, so I just try to start it.

cd cozy-notes coffee server.coffee

But I get this error:

connect.multipart() will be removed in connect 3.0 visit https://github.com/senchalabs/connect/wiki/Connect-3.0 for alternatives connect.limit() will be removed in connect 3.0 connect.multipart() will be removed in connect 3.0 visit https://github.com/senchalabs/connect/wiki/Connect-3.0 for alternatives connect.limit() will be removed in connect 3.0 [2014-11-22 17:08:14:443] info - americano | add plugin: americano-cozy [2014-11-22 17:08:14:452] info - americano-cozy | task - all request creation... [2014-11-22 17:08:14:485] error - americano-cozy | failed Error: Parsing error : Unexpected token C, body= Cannot PUT /request/task/all/ [2014-11-22 17:08:14:486] error - americano-cozy | A request creation failed, abandon. [Error: Parsing error : Unexpected token C, body= Cannot PUT /request/task/all/] [2014-11-22 17:08:14:487] error - americano | americano-cozy failed to load. [Error: Parsing error : Unexpected token C, body= Cannot PUT /request/task/all/] [2014-11-22 17:08:14:501] info - americano | Routes loaded. [2014-11-22 17:08:14:505] info - americano | Configuration for development loaded. [2014-11-22 17:08:14:505] info - americano | Notes server is listening on port 9201... info - socket.io started Failled to patch notes Error: Parsing error : Unexpected token C, body= Cannot POST /request/note/all/ at parseBody (/PATH/TO/cozy-notes/node_modules/americano-cozy/node_modules/jugglingdb-cozy-adapter/node_modules/request-json/main.js:19:19) at Request._callback (/PATH/TO/cozy-notes/node_modules/americano-cozy/node_modules/jugglingdb-cozy-adapter/node_modules/request-json/main.js:81:18) at Request.self.callback (/PATH/TO/cozy-notes/node_modules/americano-cozy/node_modules/jugglingdb-cozy-adapter/node_modules/request-json/node_modules/request/index.js:148:22) at Request.emit (events.js:98:17) at Request. (/PATH/TO/cozy-notes/node_modules/americano-cozy/node_modules/jugglingdb-cozy-adapter/node_modules/request-json/node_modules/request/index.js:876:14) at Request.emit (events.js:117:20) at IncomingMessage. (/PATH/TO/cozy-notes/node_modules/americano-cozy/node_modules/jugglingdb-cozy-adapter/node_modules/request-json/node_modules/request/index.js:827:12) at IncomingMessage.emit (events.js:117:20) at _stream_readable.js:943:16 at process._tickCallback (node.js:419:13)

frankrousseau commented 10 years ago

What happens when you do?

curl http://localhost:9121
audreytoskin commented 10 years ago

curl http://localhost:9121

curl: (7) Failed connect to localhost:9121; Connection refused

frankrousseau commented 10 years ago

Sorry I gave you a wrong url. Could you try:

 curl http://localhost:9101
audreytoskin commented 10 years ago

Cannot GET /

frankrousseau commented 10 years ago

I looks like your data system is broken.

Could you update it and retry?

cd cozy-data-system
git pull origin master
npm start
audreytoskin commented 10 years ago

cozy-data-system is already up-to-date.

frankrousseau commented 10 years ago

Ok but what is the output of the npm start command?

audreytoskin commented 10 years ago

Hm, I get this output when running npm start for cozy-data-system:

> cozy-data-system@1.0.21 start /PATH/TO/cozy-data-system > node build/server.js

connect.multipart() will be removed in connect 3.0 visit https://github.com/senchalabs/connect/wiki/Connect-3.0 for alternatives connect.limit() will be removed in connect 3.0 connect.multipart() will be removed in connect 3.0 visit https://github.com/senchalabs/connect/wiki/Connect-3.0 for alternatives connect.limit() will be removed in connect 3.0 { [Error: Cannot find module 'multiparty'] code: 'MODULE_NOT_FOUND' } [2014-11-23 13:40:01:251] warn - americano | Route configuration file is missing, make sure routes.(coffee|js) is located at the root of the controlllers folder. [2014-11-23 13:40:01:252] warn - americano | No routes loaded [2014-11-23 13:40:01:252] info - americano | Routes loaded. [2014-11-23 13:40:01:256] info - americano | Configuration for development loaded. [2014-11-23 13:40:01:256] info - americano | data-system server is listening on port 9101... [2014-11-23 13:40:01:294] info - helper/db_feed | Pub server started [2014-11-23 13:40:01:319] info - lib/db | Database cozy on localhost:5984 found.

frankrousseau commented 10 years ago

I can't explain what is happening. Which version of Node.js are you running?

frankrousseau commented 10 years ago

Aaaa ok run

npm install

A dependency is missing that's why your data system can't run properly.

audreytoskin commented 10 years ago

Ah! Okay, yes, that seems to fix it. I mean, aside from SELinux policies being a giant pain in the ass.

I think now I can begin to begin.

audreytoskin commented 10 years ago

I think I've figured out how to make sure #note-file-list is positioned only via CSS and not hard-coded style attributes. If I'm doing this, right, it was a lot simpler than I thought it would be...

Working with the Stylus/CSS would also be a lot easier if we didn't change the position for #note-file-list when you scroll down, though. What do you think of this?

cozy-notes-2014-11-23

cozy-notes-2014-11-23--scroll-down

Otherwise, moving it to the right edge of the "page" will require like a dozen media queries that readjust the position at different display sizes. I was trying to do that at first, but the stylesheet gets pretty cluttered.

frankrousseau commented 10 years ago

Great!

audreytoskin commented 10 years ago

We'd talked about adding the Source Sans Pro font to this project, so that's the last thing I'm doing before updating this pull request. But I'm having a hard time figuring out how to link the font files in the stylesheet. There's like a dozen different Stylus and CSS files, and I'm not sure which to use as the starting point for a relative path to the font assets, and I don't think an absolute path for the app is working either...

The font files are stored in cozy-notes/client/app/assets/fonts/source-sans-pro-webfontkit/

Shouldn't an absolute path be something like this? /client/app/assets/fonts/source-sans-pro-webfontkit/<font-file-name>

audreytoskin commented 10 years ago

Ah, never mind, I see. Apparently pages are served from cozy-notes/client/public, so an absolute path to the generated font assets would start with /fonts/.

audreytoskin commented 10 years ago

...Anyway, I think it's ready for you to take another look, if that wasn't clear.

frankrousseau commented 10 years ago

O ok. I'll give another try as soon as I can. Currently I'm focused on the email client release.

frankrousseau commented 9 years ago

Great work @Terrycloth, I really like your modification. I will share what you did with the whole team and then provide you with feedback.

frankrousseau commented 9 years ago

Thank you again!

Benibur commented 9 years ago

yes, great contribution, with such improvements Cozy will be terrific !

Benjamin ANDRE

2014-12-11 13:43 GMT+01:00 Frank Rousseau notifications@github.com:

Thank you again!

— Reply to this email directly or view it on GitHub https://github.com/cozy/notes/pull/42#issuecomment-66613782.

audreytoskin commented 9 years ago

Whew, it's done! I'm glad that it's going well so far.

I have some more code edits planned, but I'd like to discuss some of them before I start the work. Should I file GitHub Issues for these? What would you prefer?

frankrousseau commented 9 years ago

Yes, it's better if you open an issue first.