Bug #26796

New skinning of sys_notes

Added by Georg Ringer about 2 years ago. Updated 10 months ago.

Status:Under Review Start date:2011-05-13
Priority:Should have Due date:
Assignee:Georg Ringer % Done:

40%

Category:Design
Target version:TYPO3 6.0
Tags:
Votes: 0

Description

it would be very nice to have a design suggestion for the notes which would be used more often if they would look better ...

how to reproduce:
1) install sysext:sysnote
2) create a new record note
3) reload page/list module

thanks

sys_note-page.gif - page module (58.8 kB) Georg Ringer, 2011-05-13 07:32

sys_note-list.gif - list module (52.8 kB) Georg Ringer, 2011-05-13 07:32

notes2.gif (54.6 kB) Georg Ringer, 2011-07-07 11:09

SYS_NOTE.jpg (188.3 kB) Felix Kopp, 2012-03-15 00:28

SYS_NOTE.jpg (188.3 kB) Felix Kopp, 2012-03-15 00:29

20120415_typo3_notes_v1.png (362.9 kB) Martin Engel, 2012-04-16 19:40

20120421_typo3_notes_v3.png (394.4 kB) Martin Engel, 2012-04-22 22:27

20120421_typo3_notes_v3.jpg (90.7 kB) Felix Kopp, 2012-05-08 14:50

20120515_typo3_notes_v4.png (412.9 kB) Martin Engel, 2012-05-18 10:30

24042012_typo3_notes_v2.psd (8.6 MB) Martin Engel, 2012-05-30 19:25

sys_notes_implementation.png (112.5 kB) Helmut Hummel, 2012-07-06 17:23

20120515_typo3_notes_state.png (191.2 kB) Martin Engel, 2012-07-07 21:04


Related issues

related to Core - Bug #18810: Internal notes are rendered different Needs Feedback 2008-05-19
related to Usability Team - Suggestion #33408: Positioning of sys_notes configurable Accepted 2012-01-24
related to Core - Bug #23721: Cleanup of sysext sys_note New 2010-10-13

History

Updated by Fabien Udriot about 2 years ago

Hi Georg,

There would be two aspects in the question I can see:

- better usability for notes taking within a page. Currently it is a bit tedious to set down a note... I agree. it should be something more straight forward with a better visibility whenever a note is present

- better design (look & feel)

Do you have already some ideas to share here? Maybe even a proposition we could discuss ;)

Updated by Georg Ringer about 2 years ago

sry no ideas currently as I am really not the designer. i can implement the changes;)

Updated by Fabien Udriot about 2 years ago

page module
list module

Updated by Kay Strobach almost 2 years ago

what about adding a bbar which show an icon for notes and pops up if the user clicks on the icon.

Pop upcan be either:

  1. Quicktip
  2. Advanced Quicktip with formating ;)
  3. ExtJS PopUP

This way the notes can be displayed, even if the module doesn't support notes.

This is possible because the backend is than able to display the UI for every module based on path (UID) and module.

There should be 3 types of notes:

  1. private
  2. public - writeable by all editors
  3. admin note - readable by all - writeable by admins

Regards
Kay

Updated by Georg Ringer almost 2 years ago

i am against a bar and popups. i would like to have it as now, just nice. maybe if there are more records on same page with accordion effect?

Updated by Fabien Udriot almost 2 years ago

Maybe not a dedicated bar for notes only but something with a better visibility would be welcomed whenever there would be a note attached on the page. The spot where notes are currently shown at the very bottom is inefficient, I think. It should be somehow more highlighted.

I would see small "note" icons within the lower docheader bar displayed in a raw for each note. When an icon is clicked, a kind of post-it would open up on the top of the page. A note (or post-it widget) could have a status "always" displayed to make sure the other editor would see it.

Probably a screenshot could enlighten the whole thing.

This way the notes can be displayed, even if the module doesn't support notes.

+ 1 for having a cross module system.

There should be 3 types of notes:

  1. private
  2. public - writeable by all editors
  3. admin note - readable by all - writeable by admins

+1 for the idea, although it requires more work...

Furthermore, I am imagining different colors for the different notes category:

- instruction
- notes
- todo
- template (shall we really keep this one?)

Well... I understand all these ideas require more work that originally thought...

Updated by Georg Ringer almost 2 years ago

Updated by Felix Kopp about 1 year ago

Concept

Hover on Author name will underline: name is Link to set email address

Updated by Felix Kopp about 1 year ago

Updated by Felix Kopp about 1 year ago

Note: code-wise there is some work to do. The sys_note rendering is currently hard-coded in EXT:cms /db_list although sql/tca+ is stored in EXT:sys_note. Could be improved very much, thinking about Hook to push notes from sys_notes to cms (page/list/...).

Notes could also be rendered in the Frontend!

Updated by Jens Hoffmann about 1 year ago

  • Status changed from New to Needs Feedback
  • Assignee set to Martin Engel

Hi Martin,

can you create a layout for this.
It should fit the rest of the backend.
Ask me via Skype for details.

Should be in harmony with the MSG: #3609

Greez Jens

Updated by Martin Engel about 1 year ago

Hey Jens!

Here is a first darft: What do you think abut it?!

Greetz Martin

Updated by Georg Ringer about 1 year ago

looks cool!

shouldn't those boxes maybe appear at top? if at bottom below or before the search? how would it look/positioned in list view?

Updated by Fabien Udriot about 1 year ago

  • Target version changed from TYPO3 4.6 to TYPO3 6.0

shouldn't those boxes maybe appear at top?

Indeed, that would make sense considering long content will push down the "notes" to a position to be hardly seen. That would give:

<... Notes .....>
<... Content ...>
<... Search ....> (BTW, just wondering if a search feature make sense to have it at this position in the UI)

Updated by Jens Hoffmann about 1 year ago

THX Martin, good work!

This are notes, not alerts! It speaks clearly for the bottom and not the top.
We could add a nice visual indicator at the top and an anchor at the bottom,
if you fear that those notes get overseen.

I miss some "meta" info's in the current layout.
@Martin: Where could those infos be placed?
Maybe just at the bottom with a (bit darker) background?

  • Type: instructions, Notes, Todos -- (Done via Icon)
  • Access: Private (only Author), Public (Every editor), Admins only
  • Author: Name
  • Date: Of creation

Greez Jens

Updated by Jens Hoffmann about 1 year ago

  • Assignee changed from Jens Hoffmann to Martin Engel

Updated by Jens Hoffmann about 1 year ago

@Fabien: A Search? Why? The local one?
I'm happy to have that damn thing moved to the top right. :)

Updated by Georg Ringer about 1 year ago

there is still a search in page module / list module and it still got features which are not in the topright search like searching only on this page or levels inside

Updated by Fabien Udriot about 1 year ago

At the moment, I don't think the "Internal Note" feature is widely used mainly because of lack of visibility in the UI. I still consider that if we want the feature to be successful, we need to increase its visibility. These internals notes are something towards the editors that should attract their attention at the first glance. This is the main Use Case, I see. Keep also in mind the different category of notes we have:

  • Instruction
  • Notes
  • To-do
  • Template

Task: to add on the Wireframes a way to edit the note in the Page module. Currently it is only possible to edit a note in the List module if I am not mistaken. This should be extended, IMO.

@Fabien: A Search? Why? The local one?

-> I am opening a new issue #36231 to avoid off-topic discussion.

Updated by Martin Engel about 1 year ago

  • File 20120419_typo3_notes_v2.png added
  • Assignee changed from Martin Engel to Jens Hoffmann

Enclosed the new Screen.
Greez Martin

Updated by Martin Engel about 1 year ago

  • File deleted (20120419_typo3_notes_v2.png)

Updated by Martin Engel about 1 year ago

Hi Jens/ guys

Enclosed the final version of the Internal notes.

Please note:
Edit and Delete Buttons are visible on hover.

What do you think about the Icon at the top?
Is it showy enough?!

Greez Martin

Updated by Ben van 't Ende about 1 year ago

You should have these same notes in fileadmin or rather FAL as well. Wouldn't that be great if you could add instructions to the use of a folder? Maybe the FAL team can say something about that?

Updated by Georg Ringer about 1 year ago

ben: can we please make one thing after another? 1st make FAL stable with the features we really need, 2nd make sys_notes nice and afterwards think where we can use the sys_notes + a proper API for those? please open a new issue for that once the first 2 are done, thx

Updated by Felix Kopp about 1 year ago

Looks good but I still would like to raise my concern.
The order of the icons should be toggled: First edit then delete.
Also the icons should be at the top.

I personally don't think that the date adds to the functionality but rather distracts from the note.

The same goes for the "Access" information. Displaying the access state makes only sense for the admin hence he/she is able to change the state of visibility for the note.

Could you do me a favor and try if the colored badget also take effect if the form is not triangular but square?
There is not a single tringle in the whole backend yet so a block with color-code might be better?

Updated by Georg Ringer about 1 year ago

can we have a decission that? otherwise I would like to finish that? there is then still time enough making things a bit different.

can someone also give me those corners as png/gif?

Updated by Jens Hoffmann about 1 year ago

Go for the solution Martin suggested .. in the first run.

Feedback to the comments:
  • FAL is irrelevant for now.
  • Switch the two Icons as suggested.
  • Leave the icons at the bottom, please.
  • We could try a different thing than the triangular,
    but I think this is the best solution. For now, it's fine.

Greez WrYBiT

Updated by Georg Ringer about 1 year ago

great, thx for your feedback.

what I need: the icons for those categories:
  • instructions
  • notes
  • todos
  • template
  • and a default icon for no category selected

i can also go for a 1st try with 1 icon (default) and we will add the others after that.

thx a lot

Updated by Felix Kopp about 1 year ago

Could we please once again discuss the icons / triangle vs. square?
Added adaption containing square icons.

Updated by Felix Kopp about 1 year ago

Updated by Georg Ringer about 1 year ago

fine with me too ;)

just again: we need those icons for
instructions
notes
todos
template
and a default icon for no category selected

Updated by Martin Engel about 1 year ago

Hey Guys/ Hey Jens

enclosed you find a version with all modified tasks.
I also add a backgroundcolor to the notes, that makes it more like a sticky note.

Please give me feedback. if youll thinks its ok - ill add the psd.

Greetz Martin

Updated by Georg Ringer about 1 year ago

ok from me

Updated by Georg Ringer 12 months ago

hey guys! can we make that happen or not? I am just a developer not a designer ...

wanna make the next version a bit nicer for more than just developers, please help a bit, otherwise it just stays ugly

Updated by Jens Hoffmann 12 months ago

To me this is Final.

What do you need to start?

Greez Jens

Updated by Georg Ringer 12 months ago

a psd or even better just the icons

Updated by Martin Engel 12 months ago

Hey Georg,

enclosed the psd file. Hope its ok?!
Please pick colours from the layers and fontsizes.

thxs a lot - greez Martin

Updated by Gerrit Code Review 12 months ago

Patch set 1 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/11789

Updated by Gerrit Code Review 12 months ago

Patch set 2 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/11789

Updated by Gerrit Code Review 12 months ago

Patch set 3 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/11789

Updated by Ingo Renner 11 months ago

I like Martin's v3 best :)

Updated by Gerrit Code Review 11 months ago

Patch set 4 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/11789

Updated by Gerrit Code Review 11 months ago

Patch set 5 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/11789

Updated by Gerrit Code Review 11 months ago

Patch set 6 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/11789

Updated by Gerrit Code Review 11 months ago

Patch set 7 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/11789

Updated by Gerrit Code Review 11 months ago

Patch set 8 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/11789

Updated by Gerrit Code Review 11 months ago

Patch set 9 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/11789

Updated by Gerrit Code Review 11 months ago

Patch set 10 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/11789

Updated by Jens Hoffmann 11 months ago

  • Status changed from Needs Feedback to Under Review

Could you provide a Screenshot of the final result in live?

Updated by Helmut Hummel 11 months ago

Attached a screenshot of the current state:

Updated by Jens Hoffmann 11 months ago

  • Assignee changed from Georg Ringer to Martin Engel

Could you please comment on this.

Updated by Martin Engel 11 months ago

enclosed comments to the current state.
Please fix this - Thank you. :-)

Updated by Jens Hoffmann 10 months ago

Georg can you fix this?

Also available in: Atom PDF