Jason Grout wrote:
> Pat LeSmithe wrote:
>> option to bring up a worksheet settings page. How about serving up an
>> @interact widget for the settings?
>
> How do you see this working? In other words, what do you see in the
> interact widget controls, and how would they affect the notebook, etc.
It may be a while before I can converge on a design and a reasonable
feature-set, but I'm thinking of a "control panel" with buttons,
selectors, etc., for changing a worksheet's background color, input /
output / active cell background / border colors, font family / weight /
size / color, and similar stylistic attributes (see the attached CSS for
a few examples). Preset themes could also be available. A new setting
could take effect immediately or after a "submit" button is pressed.
The latter could simply reload the worksheet. Perhaps similar @interact
panels would suffice for notebook and user-level settings.
By the way, how do I get a pointer to a worksheet from within the same
worksheet? More generally, is it possible to manipulate a worksheet's
contents from within, using the functions in sage.server.notebook.*? Is
it possible (but perhaps not wise) to execute similarly manipulative
JavaScript code? (Of course, saved settings would still need to go back
to the server.) Can one add JavaScript to an @interact object, e.g., to
embed FLOT, a spreadsheet, custom controls, etc.?
Disclaimer: I'm still learning about @interact.
>> Client-side introspection, which is cool but well beyond my ability to
>> implement, could also work in this context. For example, one would fire
>> up a "What's this?"-like mode and hover over an element of the current
>> worksheet (e.g., active cell border) to get its CSS properties, or even
>> click to change a property in place and auto-save the changes. Is this
>> possible with TinyMCE and/or another JavaScript library?
>
> I would use the Firefox Firebug extension to do this. Not only can you
> inspect and change the CSS of any element on the fly, but it also lets
> you inspect and change html, javascript, debug javascript, and lots (and
> I mean *lots*) of other things.
> Another extension I'd really recommend is the Web Developer extension.
> I believe Safari also lets you do things like this, but I don't think
> it's nearly as comprehensive as the above two extensions.
Just to clarify, I'm speculating rather ambitiously, in that anyone
might be able to customize their worksheets in this way, without an
extension, rather than via the @interact panel.
Firebug is indeed steroidal.
Sincerely,
Pat LeSmithe
--~--~---------~--~----~------------~-------~--~----~
To post to this group, send email to sage-devel@googlegroups.com
To unsubscribe from this group, send email to
sage-devel-unsubscr...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/sage-devel
URLs: http://www.sagemath.org
-~----------~----~----~----~------~----~------~--~---
/*
Minimal style sheet for rounded cell borders in Sage, plus a few
more tidbits. See the comments.
* Save this file to DOT_SAGE/notebook.css .
* This won't work in all browsers, but it may degrade gracefully.
Assume nothing.
* The "em" unit is relative to the size of the computed font.
* Section labels in ALL CAPS are from the default Sage notebook CSS,
available at http://localhost:8000/css/main.css .
* TO DO (someday): tweak printing and other cell types; colors;
CSS3 columns: http://www.css3.info/preview/multi-column-layout/
*/
/* WORKSHEET */
/* CSS3 rounded borders: http://www.css3.info/preview/rounded-border/ */
div.worksheet {
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
}
/* CELL INPUT */
textarea.cell_input {
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
}
textarea.cell_input_active {
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
}
/* Hide "evaluate". */
a.eval_button_active {
display: none;
}
/* CELL OUTPUT */
/* Nothing here, yet. */
/* INSERTING NEW CELLS */
/* Make the click bar match the input cells in width. */
div.insert_new_cell {
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
margin: 0px;
margin-bottom: 3px;
padding-left: 5px;
width: 97%;
}
div.insert_new_cell:hover {
margin: 0px;
margin-bottom: 3px;
}
/* Hide the jsMath button, b/c it causes jerky scrolling with
Firefox's Grab and Drag extension. */
#jsMath_button {
display: none;
}
