[WIP] redesign calendar app

[jbtbnl]

Work in progress on introducing a sidebar in the calendar app to provide simpler navigation through the users calendars. Also the datepicker has been restyled to improve accessibility and clean up the UI.

Refer to owncloud/calendar#269 for earlier discussion about the new design. Let's continue here to iron out the details.

Reference screenshot:

Checklist:

• Calendars from other Users with read only permission are shared as writable via caldav owncloud/calendar#332 Fixes CSS to support SnapJS from core. owncloud/calendar#77 the calendar color should be in the calendar list on the left. Ideally just make it be the background of the checkbox (see Google Calendar, where the color box is the checkbox)
• the calendar grid doesn’t seem to extend all the way to the bottom? There’s like 10–15 pixels whitespace left to the bottom of the screenshot
• remove unused api endpoint owncloud/calendar#274 speed up settings menu
• The settings area should not use tables (Exported calendar filename has no file extension owncloud/calendar#359 (comment) Exported calendar filename has no file extension owncloud/calendar#359 (comment))
• Settings content should not exceed settings menu (Exported calendar filename has no file extension owncloud/calendar#359 (comment))
• Rename a "hidden" calendar shows the calendar appointments after saving it (Exported calendar filename has no file extension owncloud/calendar#359 (comment))
• Fix Firefox/Linux rendering (Exported calendar filename has no file extension owncloud/calendar#359 (comment) Exported calendar filename has no file extension owncloud/calendar#359 (comment))
• Fix transparent checkbox color for some calendars (Exported calendar filename has no file extension owncloud/calendar#359 (comment))
• Fix share icon for shared calendars (Exported calendar filename has no file extension owncloud/calendar#359 (comment))

[jbtbnl]

CC @owncloud/designers

[jancborchardt]

@jbtbnl dude, you are awesome! :) I have yet to try it out. But already some remarks (partly from #269):

• Calendars from other Users with read only permission are shared as writable via caldav owncloud/calendar#332 Fixes CSS to support SnapJS from core. owncloud/calendar#77 the calendar color should be in the calendar list on the left. Ideally just make it be the background of the checkbox (see Google Calendar, where the color box is the checkbox)
• the calendar grid doesn’t seem to extend all the way to the bottom? There’s like 10–15 pixels whitespace left to the bottom of the screenshot

[georgehrke]

Wow, that looks fantastic! =D Thanks @jbtbnl !
Could you maybe take a look at the resize issue. The calendar and the left sidebar don't resize when resizing the browser window.

[jbtbnl]

@jancborchardt thanks, it must be in the name ;)

the calendar grid doesn’t seem to extend all the way to the bottom? There’s like 10–15 pixels whitespace left to the bottom of the screenshot

This occurs also in calendar/master, I tried to fix it but it seems that a lot of heights and widths are calculated by JavaScript and I've found no good entry point to start fixing it. (also @georgehrke)

[wtayyeb]

Great, I have test it, but if there is a button to hide/show the sidebar it will be great.
It is owncloud design bug also. the owncloud not properly shown on smartphones.

its look like there is a bug there in the design
Firefox 27.0.1, Windows 7

[jbtbnl]

@wtayyeb thanks for reporting, I will take a look at it. Hiding the sidebar is something that should be implemented in core, since it is a design element that is common to a lot of apps. Would you like to check if such an issue already exists in core? Look for mobile theme related issues.

[wtayyeb]

there is an app named MobileCompTheme which just use css @media.

[jancborchardt]

Yes, the mobile stuff should be separately done in core. We’ll probably work on that for ownCloud 7.

[jbtbnl]

@jancborchardt this branch is currently at the point where we should decide on how to clean up the bunch of action icons at the right of each calendar name. In owncloud/calendar#269 we talked about expanding a calendar entry downwards.

If we would like to implement this it would be best to implement this as a general design element in core. Do you agree? I do not yet have a good idea in mind on how such thing should be designed. Shall I create an issue in core or design so that we can discuss this with @owncloud/designers?

[jbtbnl]

@wtayyeb the issues you experienced earlier should be fixed by owncloud/calendar@29d796f. Can you confirm this? Thanks!

[jancborchardt]

@jbtbnl I would say we should do that in a separate discussion / pull request, otherwise this one grows too large. Is that ok? And yeah, I would also say it should be a general design element in core – great point! :)

[jbtbnl]

@jancborchardt @georgehrke @raghunayyar please review this pull request, I feel like it's ready to merge this into master.

[jbtbnl]

There's still the - very minor - issue I mentioned earlier: If you click the share icon and - if you haven't noticed the input has focus - clicks in the input, the dialog slides up again

@tanghus it's a minor issue that in my opinion is not worth fixing right now because it will become obsolete anyway when owncloud/core#7563 is implemented

The "checkboxes" looks awesome, although maybe not very standard UI element? I can disable my own calendars, but not the shared one. Is that intended, or is it not in the scope of this PR?

There is an issue for that: owncloud/calendar#21

[tanghus]

👍 👯 🌴 🍸

[MorrisJobke]

I like it! 👍 from me, but I think I didn't test every possible case. But maybe we try to get this in and refine it where this is needed. For example the slightly greyed out calendar actions. @tanghus You're the master of this repo.

@jbtbnl You have done great work!

[MorrisJobke]

Sorry. Just mixed up @georgehrke with @tanghus ... @georgehrke should have a look at this.

[georgehrke]

I'll give it a final review tomorrow

[raghunayyar]

This looks awesome to me as well. Great job once again. :)

[tanghus]

I'll give it a final review tomorrow

@georgehrke ^

I'm afraid there will be conflicts with #308 though, so you have to decide which goes first.

[libasys]

some questions: i have made some fixes and updated the redesign tree to fullcalendar 1.6.4 js. how can i update/merge this now to [wip] redesign calender?
This is the repo: https://github.com/libasys/redesigncal602, only the changed files uploaded

[jbtbnl]

@libasys it seems that you created a new repository, with only the files that have been changed in it. This will not merge upstream because they are detached from each other.

What you could do is the following:

• clone the calendar/redesign branch
• include your changes
• commit your changes
• push to a new private repository
• create a pull request for calendar/redesign

Then GitHub will come up with a nice comparison view showing what lines have been changed and this will enable the developers around here to verify it and merge it into calendar/redesign and later on calendar/master.

[libasys]

Have the link to contacts/redesign branch? why contacts/redesign, this is calendar!

[jbtbnl]

@libasys ehm, calendar/redesign offcourse, my bad 😄

Just clone https://github.com/owncloud/calendar.git and then switch to redesign branch.

[libasys]

somebody works with aptana studio and team git, to help me?

[jbtbnl]

@georgehrke I'd like to merge this before it becomes outdated please :)

[georgehrke]

My last examination for this semester is tomorrow. I'll review tomorrow afternoon.

[jbtbnl]

@georgehrke OK great, I'm sorry for bothering you then!

[georgehrke]

👍👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍

Sooo awesome!! thanks a lot :D

[georgehrke]

one little thing: automatic resizing of calendar doesn't work on y-axis

[libasys]

@georgehrke No Prob! a big thanks back to the dev ;)

[jbtbnl]

@georgehrke I'll create a separate issue for the vertical resizing because it's not a regression and not really related to the redesign.

[jancborchardt]

WOW! This is finally in! So great, thank you @jbtbnl

[jbtbnl]

@jancborchardt thanks, it took three months to get this in... worth the effort though :)