Flash Bar in Admin

[noobpythoncoder]

Hi Massimo and group,

I'm wondering if you would agree to giving the flash bar its own
'home' in the page, so it doesn't slide the page down after a save,
but loads over/into a part of the page reserved for it instead - or
even better is permanently displayed - and just changes its message
(with a fancy fade in/out 'flash' effect in between if you like) based
on user actions eg clicking [save].

I know the flash bar can be dissolved by clicking it, but I (and team
mates) are finding our focus on editing code is lost after the page is
slid down. Web2py has convinced us editing in a web page is the new
way - and this little tweak would help complete our transition! I
could just move the flash bar in layout.html in applications/admin/
views, but we'll lose this change after updating web2py.

The flash bar is a very cool feature, perhaps ahead of its time (it
beat stackoverflow=), and has won our hearts to have a permanent user
message space in our 1st web2py web app being launched soon.

To have a reserved space for the flash bar in web2py admin without
taking up more screen space, we could use it to display other screen
text information. For example, when editing a file, use the flash bar
to show the file name too.

Example:

Design for app
------------------

Views
-------
1. View.html [edit] - Coder clicks 'edit';

In File
-------
2. Flash: 'Editing file app/views/view.html'
3. [save] - Coder clicks 'save';
4. Flash: 'Saved file app/views/view.html on date ...'

The only problem I can see would be when a noob loses the nice
slidedown in effect when extending layout.html in their app, but a
fade in/out effect could happen on user actions, and any developer -
noob or guru - is likely to move/tweak the flash anyways.

A minor change like this wouldn't break backwards compatibility, as
it's up to the developer how they present the flash.

What does everyone think?

thanks,

noobpythoncoder

PS Adding an [edit] link to the Peeking page would be another quick
and very useful fix.

PPS If you can add these features, perhaps my team will code a Find
and Replace search plugin for Admin? Damn we miss this feature in web
editing! :D

[mdipierro]

To make sure I understand. You are suggesting replacing the slide down
of flash with a fadein in admin?

[noobpythoncoder]

Close -

the effect (slide down or fade in) isn't the problem.

The problem is: when the flash bar is rendered - it displaces the
content (eg editor) below downwards - whether the flash bar slides
down or the effect is a fade in.

A solution would be to have the flash bar rendered from the moment the
page is loaded, eg with message 'Editing file (filename)'... or
'Peeking at file (filename)'...

This gives the flash bar a permanent place - rendering - on the page,
rather than flashing in (by slide down or fade in) when a later action
is taken. This would prevent the page from sliding down.

Then the flash bar becomes are permanent message bar in the page -
displaying all actions eg 'Editing file (filename)', 'Saving file
(filename, date)', 'Peeking at file(filename)... etc.

It's prevents focus being lost on content below the flash bar after an
action is performed (eg 'Saving file(filename)') and it saves
duplication - all actions are noted in the flash bar (eg 'Editing
file(filename)').

To keep the 'flash' in the flash bar, a fade in effect could be used
when a new action is performed - but the difference with now is - the
bar will always be there - only fade in/out (to a different colour
based on actions eg editing - red, saving - green?) when an action is
performed and then return to its normal colour.

This way, there is no change in size of the bar and the content, eg
editor, below doesn't get slid down - but an action message is still
displayed in the flash bar.

I hope that clarifies. I know such a request may seem trivial - but it
would help my team (and hopefully others) who are trying to migrate
fully to development via the web interface. (And keep them off my back
- this is the only thing that annoys them everyday.=) We are really
looking forward to contributing some cool plugins to beef up the web
dev experience in web2py. This will help us get there too!

many thanks,

noobpythoncoder

[mdipierro]

To tell you the truth I kind of like the current sliding but if it
easy for you to change it. Wrap <div id="flash"></div> with

<div style="height: 100px; width: 400px> .... </div>

In general a flash message may be multiline and can be very long so
you cannot really force it to stay inside in 100% of the cases.

Massimo

[phyo.ar...@gmail.com]

I agree with massimo and I love the sliding of Page content! it is
unique and very cool effect.

If you want to remove fadeoute on click effect , you can do changes in
web2py_ajax.html , comment out to disable the on click effect.

[phyo.ar...@gmail.com]

By the way .. isn't find and replace already working in web2py syntax
editor mode? I have been using it.

[noobpythoncoder]

Thanks folks,

It seems you didn't read what I wrote.
I tried to cover all the possible points of contention to avoid
repeating myself.
But here goes again:

1. I like the flash bar;
--------------------------
QUOTE: 'The flash bar is a very cool feature, ...'
QUOTE: 'has won our hearts [my team's] to have a permanent user
message space in our 1st web2py web app...'
QUOTE: '[It's] ahead of its time (it
beat stackoverflow=)'.

2. I know I can edit its placement;
------------------------------------
QUOTE: 'I could just move the flash bar in layout.html in applications/
admin/
views, but we'll lose this change after updating web2py. '

3. The issue ISN'T the effect type;
------------------------------------------
QUOTE: 'the effect (slide down or fade in) isn't the problem.'
QUOTE: 'The problem is: when the flash bar is rendered - it displaces

the
content (eg editor) below downwards - whether the flash bar slides

down or the effect is a fade in.'


BUT...

when you are working on different monitors, with different
resolutions, from laptops to desktops, the slide down effect on the
rest of the page is COUNTER PRODUCTIVE as it slides the page contents
below it down and out of focus.

Development productivity should be a PRIORITY - NOT... effects!
This is why we use MVC, and why web2py is REALLY cool.
Not because of a increasingly common javascript effect.

I'm aware it can be multiline.
It is in my team's web app.
But we RESERVE the flash bar a relative space in the view based on a
set of messages that we know doesn't render more than x lines down in
the bar.

This way it will not ANNOY our users by moving the view down.


COMPROMISE SOLUTION
--------------------------------
If you re-read my 2 posts above, I even suggest a nice compromise
solution:

Ironically - by using the flash bar MORE in web2py.
Have it permanently rendered as a message area, using reserved
relative space, that would not only note when a file is saved... but
also when it is being edited, peeked at, etc.

Example
-----------
1. Page loads with flash bar rendered with message: 'Editing file...';
2. User clicks [save];
3. Flash bar 'flashes' (fade out and in), message changes to:
'File ...saved'.

This way NO slide down is need.

A 'cool' effect is still used eg fade in/out - whatever to get user
attention that an action has been performed.

And multiline messages could easily be rendered.
HOW MANY LINES does Peeking at... Editing file ... Saving file ... etc
take up?
The 'Saved file...' text is centered and tiny in the flash bar as it
is.
Each of the other action messages (Peeking, Editing) could easily be
rendered in the flash bar.
Solving this would be a small matter of standardising the font size
with ems.

As is NOW... this duplication of message space is messy:
Once space for some actions eg 'Editing file...'
And another space for others eg 'Saving ...file'.

You'd solve two problems (page focus being lost from page sliding down
- and message duplication) by giving the flash bar its own permanent
space.

BUT IF A COOL EFFECT IS MORE IMPORTANT THAN THE NEEDS OF DEVELOPERS
WHO HAVE TRADED THEIR FAT CLIENT IDEs FOR WEB EDITING, then the future
of web2py is questionable.

You'll just get effects fanboys/girls hoping to use the latest T2
plugin to make a whole app.

Sorry for the attitude... but as I wrote above... this doesn't just
affect me.
And I tried to convey my points in my first post, politely and
thoroughly to avoid confusion.
It would have helped if people had read the posts.

It may seem a trivial need. But a functional need should over-ride
subjective aesthetics.
And this effect detracts from the coolness of using web2py's Admin/web
editor.

I may be a Python noob - but I'm not new to coding in other languages,
and some of my team are way more talented and experienced coders than
myself. And we ALL get annoyed at the page dropping down because of a
silly effect. EVERYONE who joins the team asks how to disable the
effect so they can keep track of where they were on the page.

noobpythoncoder

PS Phyo - if you mean the 'Find and Replace' tool in the editor - does
this search multiple files? This is the functionality I'm referring
to, which is why I mentioned it in the context of 'Admin'. I should
have been clearer. If such a function exists - please point it out.
Else, once the dust has settled on the 'plugin debate', I'll get my
team to contribute a plugin that does this.

[voltron]

Hi All,

I can understand the points brought up in this thread, I have the same
problems too.

1. Sliding DIV destroys the layout created by our graphic department
2. Not everyone likes the slid down effect, I don't either, I have
mentioned this once or twice on the forum :-)

I just chose to change the effect and depending on the layout and
site, render the contents of the Flash bar accordingly

For a site that uses the flash, I use this combination

/* Show errors */
$('div.error').hide().fadeIn('slow');

$('#flash').hide().fadeIn('fast');

$('#flash').click(function() {
$(this).fadeOut('slow');
return false;
});

{{if response.flash:}}
<div class="wrapper">
<div id="flash">{{=response.flash}}</div>
</div>
{{pass}}


For a site that uses the flash, but should not destroy the HTML
layout, I render the content that comes in the flash bar in the page
as in:

# The controller function

if DEBUG:
response.flash = T("Registration unsuccessful, please contact our
service team")
page_content = T("Registration unsuccessful, please contact our
service team")

return dict(form = form, page_title = page_title, page_content =
page_content) # Function return command


A third method would be to render the Flash Bar as Modal or non-modal
window ABOVE the HTML layout, for this, I intend to use the Jquery
modal dialogue plugiin. You can just define the DIV to be rendered. I
will use this definately in the future as it is the most powerful, you
can change colors, add buttons and interact with the user based on the
type of message rendered

http://docs.jquery.com/UI/Dialog

[noobpythoncoder]

Thanks Voltron,

it's good to get some other ideas here!
It wouldn't take much to fix this prob and reduce developer pain.

And let's take a long-term view - the cool web Admin/editing interface
that Massimo has created is ONLY going to become MORE popular as more
people migrate to web2py and web based apps.

We won't be the only developers wanting to tweak the interface to get
it right - not just for us - but other users too. We should keep our
needs to good principles - finding a balance between what development
experience works in current IDEs etc and the better features/functions
a web based interface can bring.

It's best to take cue now from how standard IDEs show a user action
status message - visible on the top/bottom of a page - but not
stealing focus from the main content of the page.

I'd only recommend using a modal window when user input is needed eg
to ask confirmation when they want to delete a file or some similarly
serious action.

If you think a developer may accidentally click the save button - then
I'm cool with a modal window - if upon returning to the editor below
it hasn't moved position. I've asked my team and none of them have
accidentally clicked the save button yet. But other users may have -
so we'll defer to the group experience here.

I can see advantages to having an absolutely rendered Admin, editing
menu, and flash message bar at the top of the page - acting like an
iframe - not moving as the page below is moved - allowing the editor
to be moved down, code edited/saved, without the editor moving from a
flash bar slide down, and preventing the developer from having to
scroll to the top of the page to confirm actions. Tthis would be a
logical evolution forward, but it is asking a lot right now.

A good temporary fix would be to merge text like 'Editing file...' and
the flash bar, that is; render 'Editing file...', 'Peeking ...' etc in
the flash bar too. This would immediately save space and prevent the
need for the slide down.

Also, as it is now, there is a LOT of unused space between the top
Admin nav menu, text like 'Editing file...', and the editor. We could
move the editor up the same height as the text 'Editing file...' and
immediately allow the editor to be more visible. Then replace the
'Editing file...' text with the flash bar stating the same thing.

When the user saves the file, the flash bar 'flashes' - fades in/out -
but doesn't change in size/height - and changes message to 'File saved
on ...'.

I'll illustrate:

1. User clicks [edit] next to file in Admin.

Flash bar - State 1 - Message 1
----------------------------------------------
Editing file "app/controller/view.html"
----------------------------------------------

2. User clicks [save] above editor.

Flash bar - State 2 - Fade Effect
----------------------------------------------
Fade in/out of bar. No size change.
----------------------------------------------

3. User can still see editor/page.

Flash bar - State 3 - Message 2
----------------------------------------------
File saved on (datetime)
----------------------------------------------

I hope the above better conveys an agreeable solution.
It's not perfect - but it is better than the current page
displacement.
Getting this fixed now will help a lot of other developers enjoy the
attractiveness of web2py's Admin interface.


Sorry for the passion Massimo - but this lady called web2py has stolen
my heart already!

I'm cool if she wants to flash me sometimes... but only if it doesn't
steal my focus from her great legs!

=)