ElementBox: establish basic styling
We are using buttons now, but the standard theme introduces a lot of padding arount button's contents. Thus we need to consider ways to address the compound of widgets forming an ElementBox; moreover, this is the classical situation where the BEM notation helps to clarify the intention.... The problem leading to custom styling here is the padding within buttons; the default stylesheet seemingly adds a min-width and min-height setting, and some padding within the Button; based on systematic CSS class names, it is possible to remove these settings specifically for buttons within the IDLabel in general (no need to treat only the case of an EventBoxLabel -- IDLabel could become a custom widget on its own
This commit is contained in:
parent
ab8d1f3fb2
commit
8b6991e0f5
6 changed files with 338 additions and 18 deletions
|
|
@ -1,31 +1,52 @@
|
|||
Lumiera GUI style and theming
|
||||
=============================
|
||||
:date: 2022
|
||||
:toc:
|
||||
|
||||
//Menu: label Theme/Style
|
||||
//Menu: sort children
|
||||
//Menu: prepend child Navigation
|
||||
|
||||
.a guide towards styling
|
||||
This page is a place _to collect pieces of information_ regarding the visual appearance of the Lumiera GTK UI.
|
||||
Further (more technical) aspects regarding the inner workings of the toolkit can be found
|
||||
link:{ldoc}/technical/code/gtk/[in the »Code Base« section regarding GTK]. Details about the concrete
|
||||
arrangement and conventions within some parts of the UI are given on the sub pages +
|
||||
arrangement and conventions within some parts of the UI are given on the sub pages... +
|
||||
link:Timeline.html[Timeline]
|
||||
· link:Navigation.html[Navigation]
|
||||
· link:PropEditor.html[Property Editors]
|
||||
|
||||
|
||||
GTK-3 styles
|
||||
------------
|
||||
Styling of GTK-3 interfaces is based on CSS, with some specific conventions about the selectors
|
||||
and some additional makro functions to generate colours and gradients. When GTK actually renders a widget,
|
||||
id consults a 'strategy object' known as *Theme Engine*, passing it the region to draw in a abstracted way.
|
||||
and some additional macro functions to generate colours and gradients. When GTK actually renders a widget,
|
||||
it consults a 'strategy object' known as *Theme Engine*, passing it the region to draw in a abstracted way.
|
||||
The Theme Engine in turn uses a '``style provider''' to retrieve the generic style properties it uses for drawing.
|
||||
Thus, the Theme Engine defines the actual meaning of any style and is in the position to understand and thus
|
||||
introduce additional engine specific styles and settings.
|
||||
|
||||
***************************************
|
||||
.CSS Selectors
|
||||
Rules can be targeted towards some style nodes using
|
||||
https://docs.gtk.org/gtk3/css-overview.html#selectors[selectors] as known from CSS,
|
||||
notably including _contextual selectors._
|
||||
|
||||
- the base widgets from GTK+ and Gtkmm define the ``tag'' names
|
||||
- custom widgets bear the name of the base widget they extend
|
||||
- individual nodes can be addressed by `#id` if the widget instance invokes `set_name("id")`
|
||||
- moreover, if the widget associates itself with a _style class_ through its _style context,_
|
||||
i.e. by invoking `get_style_context()->add_class("class")`, it will also pick up rules
|
||||
bound to that `.class` in the CSS.
|
||||
***************************************
|
||||
|
||||
GTK-3 supports the powerful 'cascading' and 'contextual selectors' from CSS. Thus the nesting of elements
|
||||
in the GUI forms the base for creating styling rules. Hereby, widget class names translate into ``tag'' names
|
||||
in the CSS selectors.footnote:[The ``tag'' name is the widget's class name without the `Gtk::` prefix, and transformed
|
||||
into all lower caps, single word, no underscores. E.g. `Gtk::TextView` -> `textview`]
|
||||
into all lower caps, single word, no underscores. E.g. `Gtk::TextView` -> `textview`. +
|
||||
However -- these names are established programmatically, unfortunately within _the C implementation of the style
|
||||
class constructor,_ which makes them more or less hard wired. The `Gtk::Widget` subclasses from Gtkmm (C\++ language) use
|
||||
their own naming scheme, apart from the basic GTK+ (C language) names, and it is _basically not possible_ for _custom widgets_
|
||||
to expose their distinct type names -- rather they will show up under the name of the base class used from Gtkmm.]
|
||||
Widgets may also expose CSS classes for styling -- the standard widgets define a generic set
|
||||
of https://developer.gnome.org/gtk3/3.4/GtkStyleContext.html#gtkstylecontext-classes[predefined CSS style classes],
|
||||
which can be used to establish the foundation for theming. Obviously it is preferable to keep styling rules as
|
||||
|
|
@ -42,7 +63,7 @@ Recommended reading
|
|||
and a https://developer.gnome.org/gtk3/stable/chap-css-properties.html[reference of supported properties].
|
||||
* to start, look at this http://thegnomejournal.wordpress.com/2011/03/15/styling-gtk-with-css/[introductory text],
|
||||
or the more http://worldofgnome.org/making-gtk3-themes-part-1-basics/[hands-on series of articles from world of gnome]
|
||||
* this http://forums.fedoraforum.org/showthread.php?t=281568[post from fedora forum] features a conciese description
|
||||
* this http://forums.fedoraforum.org/showthread.php?t=281568[post from fedora forum] features a concise description
|
||||
of the task of theme creation
|
||||
* to understand the old (now obsolete) GTK-2 stylesheets, you might
|
||||
http://orford.org/gtk/[look here]
|
||||
|
|
@ -78,8 +99,8 @@ GTK-3 supports binary theme bundles, which combine CSS style sheets and accompan
|
|||
into a single archive file. See http://wibblystuff.blogspot.de/2012/06/building-binary-for-gtk3-theme.html[this blog entry]
|
||||
for a tutorial. But when it comes to investigating an existing theme, we need a way to 'extract' the original sources
|
||||
from such a distribution bundle. This can be achieved with the help of the `gresource` command. The following bash
|
||||
srcipt footnote:[published by mailto:peter@thecodergeek.com[Peter Gordon] to the Public Domain
|
||||
http://projects.thecodergeek.com/scripts/gresource-extract[at his blog] in 2012] simplifies this process, allowing
|
||||
script footnote:[published by mailto:peter@thecodergeek.com[Peter Gordon] to the Public Domain
|
||||
http://projects.thecodergeek.com/scripts/gresource-extract[at his blog] in 2012] simplifies this process, allowing
|
||||
to extract all resource files in a given GResource file, with the given base URL. For example, if a GResource file
|
||||
contained the resource with the URL `/org/foo/bar/baz.txt`, and the base URL defined as `"/org/foo/"`, then the resource
|
||||
named `/org/foo/bar/baz.txt` in that file would be extracted and written to `bar/baz.txt` in the current directory.
|
||||
|
|
@ -110,3 +131,69 @@ done
|
|||
---------------------------------
|
||||
|
||||
|
||||
UI building blocks
|
||||
------------------
|
||||
|
||||
The Lumiera UI achieves some degree of uniformity by adhering to common schemes and conventions; moreover,
|
||||
we ship a dedicated _Application Style Sheet_ to establish a distinct look and feel^[orange]##(planned as of 2022)##^ --
|
||||
additionally, as alternative, we ship __ ``theme complement'' style sheets__ to add just those CSS definitions necessary
|
||||
for Lumiera to properly work together with a typical GTK desktop theme.
|
||||
|
||||
|
||||
BEM Methodology
|
||||
~~~~~~~~~~~~~~~
|
||||
More elaborate websites as well as larger applications tend to run into problems with naming of components.
|
||||
Unintended matches of CSS rules in other segments of the site may cause side effects, thereby hampering the ability to
|
||||
adapt a given part to new requirements. While the true cause for such problems is rooted in an unsystematic and ``pragmatic''
|
||||
attitude, treating the style as an assortment of local tweaks, a _coherent naming scheme_ helps to indicate which setting
|
||||
is _meant to be generic_ and global, and which one _addresses a bounded scope._
|
||||
As an ubiquitous naming scheme, the BEM notation^[orange]##(TODO find a good authoritative website to link)##^ has gained
|
||||
some traction in the context of naming of CSS selectors. Yet at the same time, also an unfortunate trend could be observed
|
||||
to neglect or even defeat the *cascading* nature of CSS and to apply redundant and repetitive fine grained styles to
|
||||
individual elements.footnote:[Some people even think they need style generators to cope with the resulting combinatoric
|
||||
explosion. A similar tendency can be observed in the realm of publication, where people frequently disregard or even directly
|
||||
reject the idea of a style sheet, and then create elaborate schemes of work organisation, combined with text processor macros,
|
||||
to cope with the nonsensical task of having to format each paragraph individually. Those disdaining the use of abstractions
|
||||
have to suffer and deserve no mercy.]
|
||||
|
||||
In Lumiera, we use a combination of style classes and element-IDs to define the anchor points to attach specific styling;
|
||||
typically, we also have to designate sub elements below such an anchor point, and here the usage of BEM notation is recommended:
|
||||
|
||||
block[__element][--modifier]
|
||||
|
||||
- the first part of a name designates the enclosing *block* -- which must be a building block to be used in varying context
|
||||
and without the tie to a single specific hierarchy
|
||||
- the second part of the name, separated by "`__`", designates the individual *element* within this block. Such an element
|
||||
should be tied logically to the block; if this use is just an optional combination of building blocks and the element
|
||||
can also be used elsewhere, then it should be treated as another block rather.
|
||||
- sometimes we want to _modify some aspects_ of the presentation by a fixed set of options, and in this case, the name can
|
||||
be extended by a *modifier* component, attached with a "`--`" separator.
|
||||
|
||||
|
||||
|
||||
The ElementBoxWidget
|
||||
~~~~~~~~~~~~~~~~~~~~
|
||||
A flexible and open structure model is one of the cornerstones of the Lumiera architecture: Instead of relying on a
|
||||
common global data model, the application rather defines some structural conventions, assuming that individual _Entities_
|
||||
will be arranged in accordance to standardised patterns.
|
||||
|
||||
Those ``Entities'' are conceived as _objects,_ which are _placed into a context_ and expose _properties_ and _methods._
|
||||
Within the UI, this structure finds its correspondence in the *ElementBoxWidget*^[orange]##(TODO dedicated page and link)##^,
|
||||
which is used pervasively as a building block in several contexts and for various purposes. All these usages visually
|
||||
share some kind of common denominator:
|
||||
|
||||
- the »Entity« is represented as a box with a name
|
||||
- it features an icon as a leading handle
|
||||
- followed by a expander/collapser or menu button
|
||||
|
||||
This structure is _implemented_ as a specialised `Gtk::Frame` -- which uses a _label widget_ comprised of a box with
|
||||
three elements: two icon buttons, and a text field. The _content area_ of the `Frame` widget is used to represent the
|
||||
content of this ``Element''; be it just a background box coloured in accordance to the type or kind of object, or
|
||||
be it a dedicated content renderer (for Clips in the Timeline) or even a canvas further exposing inner structures.
|
||||
|
||||
Style Tree
|
||||
^^^^^^^^^^
|
||||
ElementBoxWidget:: `frame#element`
|
||||
IDLabel:: `box#caption`
|
||||
Buttons::
|
||||
both icons are placed into a `Gtk::Button` to receive events
|
||||
|
|
|
|||
|
|
@ -21,6 +21,16 @@
|
|||
|
||||
/* ---------- Styles for Lumiera Widgets ---------- */
|
||||
|
||||
/* ElementBoxWidget and IDLabel within */
|
||||
.idlabel .image-button {
|
||||
min-width: unset;
|
||||
min-height: unset;
|
||||
padding: inherit;
|
||||
}
|
||||
.idlabel__icon image {
|
||||
padding-left: 0.5ex;
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Styles for special markup ---------- */
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,25 @@ namespace stage {
|
|||
const Symbol NODE_frame{"frame"};
|
||||
|
||||
cuString ID_element{"element"};
|
||||
cuString ID_caption{"caption"};
|
||||
cuString ID_idlabel{"idlabel"};
|
||||
|
||||
cuString CLASS_idlabel {"idlabel"};
|
||||
cuString CLASS_idlabel_icon {"idlabel__icon"};
|
||||
cuString CLASS_idlabel_menu {"idlabel__menu"};
|
||||
cuString CLASS_idlabel_name {"idlabel__name"};
|
||||
cuString CLASS_elementbox {"elementbox"};
|
||||
cuString CLASS_elementbox_idlabel {"elementbox__idlabel"}; ///< only present on IDLabel widget within ElementBoxWidget
|
||||
|
||||
cuString CLASS_elementbox_video {"elementbox--video"};
|
||||
cuString CLASS_elementbox_audio {"elementbox--audio"};
|
||||
cuString CLASS_elementbox_text {"elementbox--text"};
|
||||
cuString CLASS_elementbox_auto {"elementbox--auto"};
|
||||
cuString CLASS_elementbox_event {"elementbox--event"};
|
||||
cuString CLASS_elementbox_effect {"elementbox--effect"};
|
||||
cuString CLASS_elementbox_label {"elementbox--label"};
|
||||
cuString CLASS_elementbox_ruler {"elementbox--ruler"};
|
||||
cuString CLASS_elementbox_group {"elementbox--group"};
|
||||
cuString CLASS_elementbox_meta {"elementbox--meta"};
|
||||
|
||||
cuString CLASS_timeline {"timeline"};
|
||||
cuString CLASS_timeline_page {"timeline__page"};
|
||||
|
|
|
|||
|
|
@ -60,7 +60,24 @@ namespace stage {
|
|||
extern const Symbol NODE_frame;
|
||||
|
||||
extern cuString ID_element;
|
||||
extern cuString ID_caption;
|
||||
extern cuString ID_idlabel;
|
||||
|
||||
extern cuString CLASS_idlabel;
|
||||
extern cuString CLASS_idlabel_icon;
|
||||
extern cuString CLASS_idlabel_menu;
|
||||
extern cuString CLASS_idlabel_name;
|
||||
extern cuString CLASS_elementbox;
|
||||
extern cuString CLASS_elementbox_idlabel;
|
||||
extern cuString CLASS_elementbox_video;
|
||||
extern cuString CLASS_elementbox_audio;
|
||||
extern cuString CLASS_elementbox_text;
|
||||
extern cuString CLASS_elementbox_auto;
|
||||
extern cuString CLASS_elementbox_event;
|
||||
extern cuString CLASS_elementbox_effect;
|
||||
extern cuString CLASS_elementbox_label;
|
||||
extern cuString CLASS_elementbox_ruler;
|
||||
extern cuString CLASS_elementbox_group;
|
||||
extern cuString CLASS_elementbox_meta;
|
||||
|
||||
extern cuString CLASS_timeline;
|
||||
extern cuString CLASS_timeline_page;
|
||||
|
|
|
|||
|
|
@ -144,8 +144,12 @@ namespace widget {
|
|||
this->add(icon_);
|
||||
this->add(menu_);
|
||||
this->add(name_);
|
||||
this->set_name(ID_caption);
|
||||
this->set_name(ID_idlabel);
|
||||
this->get_style_context()->add_class(CLASS_background);
|
||||
this->get_style_context()->add_class(CLASS_idlabel);
|
||||
icon_.get_style_context()->add_class(CLASS_idlabel_icon);
|
||||
menu_.get_style_context()->add_class(CLASS_idlabel_menu);
|
||||
name_.get_style_context()->add_class(CLASS_idlabel_name);
|
||||
name_.set_hexpand(true);
|
||||
}
|
||||
|
||||
|
|
@ -173,10 +177,12 @@ namespace widget {
|
|||
{
|
||||
set_name(ID_element);
|
||||
get_style_context()->add_class(CLASS_background); // Style to ensure an opaque backdrop
|
||||
get_style_context()->add_class(CLASS_elementbox);
|
||||
set_label_align(0.0, 0.0);
|
||||
|
||||
set_label_widget(label_);
|
||||
label_.setCaption(config.getName());
|
||||
label_.get_style_context()->add_class(CLASS_elementbox_idlabel);
|
||||
|
||||
this->show_all();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6306,7 +6306,8 @@
|
|||
</node>
|
||||
</node>
|
||||
<node CREATED="1563020384655" ID="ID_1309805657" MODIFIED="1563020388552" TEXT="Aufgaben">
|
||||
<node CREATED="1563020407852" ID="ID_280366952" MODIFIED="1563020411340" TEXT="Style / CSS">
|
||||
<node CREATED="1563020407852" ID="ID_280366952" MODIFIED="1664668979749" TEXT="Style / CSS">
|
||||
<linktarget COLOR="#4369a6" DESTINATION="ID_280366952" ENDARROW="Default" ENDINCLINATION="-1736;397;" ID="Arrow_ID_1332353653" SOURCE="ID_1339380234" STARTARROW="None" STARTINCLINATION="-2101;-134;"/>
|
||||
<node CREATED="1563020429008" ID="ID_8715605" MODIFIED="1563020434665" TEXT="Delegate: UIStyle">
|
||||
<node CREATED="1563020438839" ID="ID_390066923" MODIFIED="1563020453938" TEXT="der »StyleManager«"/>
|
||||
<node CREATED="1563020456445" ID="ID_134906113" MODIFIED="1563020474783" TEXT="Stand 2019: weitgehend Funktionen von Joel Holdsworth"/>
|
||||
|
|
@ -18616,7 +18617,18 @@
|
|||
<linktarget COLOR="#404289" DESTINATION="ID_293134573" ENDARROW="Default" ENDINCLINATION="175;-873;" ID="Arrow_ID_1989504612" SOURCE="ID_1939158808" STARTARROW="None" STARTINCLINATION="768;94;"/>
|
||||
<linktarget COLOR="#c63166" DESTINATION="ID_293134573" ENDARROW="Default" ENDINCLINATION="64;-83;" ID="Arrow_ID_543159170" SOURCE="ID_1192772963" STARTARROW="None" STARTINCLINATION="-313;15;"/>
|
||||
<icon BUILTIN="flag-yellow"/>
|
||||
<node CREATED="1662051084085" ID="ID_906734828" MODIFIED="1662051103543" TEXT="Strategy::configure()"/>
|
||||
<node CREATED="1662051084085" ID="ID_906734828" MODIFIED="1664668205361">
|
||||
<richcontent TYPE="NODE"><html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<font face="Monospaced">ElementBoxWidget::Config::<b>buildLayoutStrategy</b>(</font><font color="#2d40af" face="Monospaced">ElementBoxWidget</font><font face="Monospaced">&)</font>
|
||||
</p>
|
||||
</body>
|
||||
</html></richcontent>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
<node CREATED="1661896735138" ID="ID_1956334148" MODIFIED="1662037245996" TEXT="Darstellungs-Varianten">
|
||||
|
|
@ -18761,6 +18773,31 @@
|
|||
</body>
|
||||
</html></richcontent>
|
||||
<icon BUILTIN="yes"/>
|
||||
<node COLOR="#338800" CREATED="1664668298178" ID="ID_1102642211" MODIFIED="1664674552382" TEXT="geeignete Selektoren vorsehen">
|
||||
<arrowlink COLOR="#543f8c" DESTINATION="ID_696787535" ENDARROW="Default" ENDINCLINATION="-344;-15;" ID="Arrow_ID_1626542451" STARTARROW="None" STARTINCLINATION="560;45;"/>
|
||||
<arrowlink COLOR="#4482cb" DESTINATION="ID_1131035647" ENDARROW="Default" ENDINCLINATION="1109;-797;" ID="Arrow_ID_860130995" STARTARROW="None" STARTINCLINATION="394;586;"/>
|
||||
<icon BUILTIN="button_ok"/>
|
||||
<node CREATED="1664669909170" HGAP="54" ID="ID_353257786" MODIFIED="1664670075595" TEXT="frame#element.elementbox" VSHIFT="-10">
|
||||
<edge COLOR="#493d57" STYLE="linear"/>
|
||||
<node CREATED="1664670077106" ID="ID_23637100" MODIFIED="1664670080590" TEXT="box#idlabel">
|
||||
<node CREATED="1664670436370" ID="ID_169682858" MODIFIED="1664670440905" TEXT=".idlabel"/>
|
||||
<node CREATED="1664671305061" ID="ID_1650353361" MODIFIED="1664671309328" TEXT="Kinder...">
|
||||
<node CREATED="1664671310329" ID="ID_96245401" MODIFIED="1664671312682" TEXT=".idlabel__icon"/>
|
||||
<node CREATED="1664671313875" ID="ID_858160172" MODIFIED="1664671319782" TEXT=".idlabel__menu"/>
|
||||
<node CREATED="1664671320674" ID="ID_19239170" MODIFIED="1664671325085" TEXT=".idlabel__name"/>
|
||||
</node>
|
||||
<node CREATED="1664670133617" ID="ID_1907146399" MODIFIED="1664670140958" TEXT=".elementbox__idlabel">
|
||||
<node CREATED="1664670252291" ID="ID_423384579" MODIFIED="1664670271427" TEXT="Achtung: nur wenn in einer ElementBox">
|
||||
<icon BUILTIN="messagebox_warning"/>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
<node CREATED="1664670174435" ID="ID_54680565" MODIFIED="1664670179225" TEXT="zusätzlich...">
|
||||
<node CREATED="1664670194762" ID="ID_1459999893" MODIFIED="1664670202630" TEXT=".elementbox--video"/>
|
||||
<node CREATED="1664670203554" ID="ID_471735544" MODIFIED="1664670210996" TEXT=".elementbox--audio"/>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
<node COLOR="#338800" CREATED="1664027101386" ID="ID_325165287" MODIFIED="1664494902370" TEXT="erforderliche Ausdehnung feststellen">
|
||||
|
|
@ -19285,9 +19322,9 @@
|
|||
<icon BUILTIN="hourglass"/>
|
||||
</node>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#eef0c5" COLOR="#990000" CREATED="1664033337194" ID="ID_142928718" MODIFIED="1664553871141" TEXT="Label-Komponente anlegen">
|
||||
<node COLOR="#338800" CREATED="1664033337194" ID="ID_142928718" MODIFIED="1664674849781" TEXT="Label-Komponente anlegen">
|
||||
<arrowlink COLOR="#feebc1" DESTINATION="ID_1075411565" ENDARROW="Default" ENDINCLINATION="-16;-582;" ID="Arrow_ID_957764469" STARTARROW="None" STARTINCLINATION="-606;54;"/>
|
||||
<icon BUILTIN="pencil"/>
|
||||
<icon BUILTIN="button_ok"/>
|
||||
<node COLOR="#435e98" CREATED="1664033348579" ID="ID_575467306" MODIFIED="1664553856140" TEXT="erst mal als gruppiertes Sub-Widget extrahieren">
|
||||
<icon BUILTIN="yes"/>
|
||||
<node COLOR="#338800" CREATED="1664544131446" ID="ID_448994253" MODIFIED="1664553853255" TEXT="der Box-Container">
|
||||
|
|
@ -19297,8 +19334,25 @@
|
|||
<icon BUILTIN="button_ok"/>
|
||||
</node>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#fdfdcf" COLOR="#ff0000" CREATED="1664553879483" ID="ID_923634948" MODIFIED="1664553900007" TEXT="Buttons sind zu groß">
|
||||
<node COLOR="#435e98" CREATED="1664553879483" ID="ID_923634948" MODIFIED="1664674831082" TEXT="Buttons sind zu groß">
|
||||
<icon BUILTIN="broken-line"/>
|
||||
<node COLOR="#338800" CREATED="1664668329069" ID="ID_696787535" MODIFIED="1664674548169" TEXT="Anforderung: muß diese Buttons "greifen" können">
|
||||
<linktarget COLOR="#543f8c" DESTINATION="ID_696787535" ENDARROW="Default" ENDINCLINATION="-344;-15;" ID="Arrow_ID_1626542451" SOURCE="ID_1102642211" STARTARROW="None" STARTINCLINATION="560;45;"/>
|
||||
<icon BUILTIN="button_ok"/>
|
||||
</node>
|
||||
<node COLOR="#435e98" CREATED="1664674559510" ID="ID_1604472823" MODIFIED="1664674623071" TEXT="Untersuchung...">
|
||||
<icon BUILTIN="idea"/>
|
||||
<node CREATED="1664674569649" ID="ID_892636850" MODIFIED="1664674628657" TEXT="zwei Ursachen">
|
||||
<icon BUILTIN="messagebox_warning"/>
|
||||
</node>
|
||||
<node CREATED="1664674575884" ID="ID_1453761517" MODIFIED="1664674589737" TEXT="alle Buttons haben ein min-width und min-height"/>
|
||||
<node CREATED="1664674590960" ID="ID_1398294801" MODIFIED="1664674608939" TEXT="zumindest image-button hat auch ein Padding (4px bei mir)"/>
|
||||
</node>
|
||||
<node COLOR="#338800" CREATED="1664674677718" ID="ID_692056808" MODIFIED="1664674712628" TEXT="Style-Regeln">
|
||||
<icon BUILTIN="button_ok"/>
|
||||
<node CREATED="1664674687597" ID="ID_1042549380" MODIFIED="1664674693955" TEXT="unset-Regel auf: .idlabel .image-button"/>
|
||||
<node CREATED="1664674699611" ID="ID_1706886045" MODIFIED="1664674710229" TEXT="minimales Padding auf das Icon"/>
|
||||
</node>
|
||||
</node>
|
||||
<node COLOR="#338800" CREATED="1664544186535" ID="ID_272598573" MODIFIED="1664553847453" TEXT="Auslegung der Icons per Strategy steuerbar machen">
|
||||
<icon BUILTIN="button_ok"/>
|
||||
|
|
@ -36531,6 +36585,78 @@
|
|||
<node CREATED="1523019982331" ID="ID_533152750" MODIFIED="1557498707235" TEXT="Widget"/>
|
||||
</node>
|
||||
</node>
|
||||
<node CREATED="1664668670633" ID="ID_281557130" MODIFIED="1664668687274" TEXT="CSS-Schema für das Lumiera-GTK-UI">
|
||||
<node CREATED="1664668701652" ID="ID_1339380234" MODIFIED="1664668992057" TEXT="Einrichtung durch den UI-Manager">
|
||||
<arrowlink COLOR="#4369a6" DESTINATION="ID_280366952" ENDARROW="Default" ENDINCLINATION="-1736;397;" ID="Arrow_ID_1332353653" STARTARROW="None" STARTINCLINATION="-2101;-134;"/>
|
||||
<icon BUILTIN="info"/>
|
||||
<node CREATED="1664669003788" ID="ID_1496995299" MODIFIED="1664669012883" TEXT="laden der Applicaton Style-Sheet(s)"/>
|
||||
<node CREATED="1664669017642" ID="ID_1750503334" MODIFIED="1664669048777" TEXT="synthetische CSS-Pfade für generische (Timeline)-Styles"/>
|
||||
</node>
|
||||
<node CREATED="1664669065764" ID="ID_1839743760" LINK="#ID_417783849" MODIFIED="1664669180575" TEXT="CSS-Style-Konventionen">
|
||||
<icon BUILTIN="yes"/>
|
||||
<node CREATED="1664669186884" ID="ID_458273565" MODIFIED="1664669799291" TEXT="BEM-Notation sinnvoll verwenden">
|
||||
<richcontent TYPE="NOTE"><html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
block[__element][--modifier]
|
||||
</p>
|
||||
</body>
|
||||
</html></richcontent>
|
||||
<icon BUILTIN="idea"/>
|
||||
<node CREATED="1664669206239" ID="ID_419151463" MODIFIED="1664669277092" TEXT="nicht übertreiben...">
|
||||
<richcontent TYPE="NOTE"><html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Hier besteht die Gefahr, das Stylesheet mit redundanten Definitionen zu fluten!<br />Die BEM-Notation ist sinnvoll, insodern sie die <b>intendierte Bedeutung</b> einer Klasse klar macht
|
||||
</p>
|
||||
</body>
|
||||
</html></richcontent>
|
||||
</node>
|
||||
<node CREATED="1664669329825" ID="ID_1131035647" MODIFIED="1664669851599" TEXT="erlaubt Styling relativ zu einem Ankerpunkt">
|
||||
<linktarget COLOR="#4482cb" DESTINATION="ID_1131035647" ENDARROW="Default" ENDINCLINATION="1109;-797;" ID="Arrow_ID_860130995" SOURCE="ID_1102642211" STARTARROW="None" STARTINCLINATION="394;586;"/>
|
||||
</node>
|
||||
<node CREATED="1664669415850" ID="ID_550535214" MODIFIED="1664669442209">
|
||||
<richcontent TYPE="NODE"><html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
für <i>wirklich generische </i>Styles sollte man generische Klassen schaffen
|
||||
</p>
|
||||
</body>
|
||||
</html></richcontent>
|
||||
<icon BUILTIN="yes"/>
|
||||
</node>
|
||||
<node CREATED="1664669349154" ID="ID_1203947734" MODIFIED="1664669365231" TEXT="anwenden für frei kombinierbare Bausteine">
|
||||
<icon BUILTIN="idea"/>
|
||||
<node CREATED="1664669376402" ID="ID_1053064636" MODIFIED="1664669383965" TEXT="Ziel: flache Regelsätze"/>
|
||||
<node CREATED="1664669384622" ID="ID_1136788054" MODIFIED="1664669404794" TEXT="Gefahr: nicht zu sehr mit Hierarchie mischen"/>
|
||||
</node>
|
||||
</node>
|
||||
<node CREATED="1664669483004" ID="ID_67069452" MODIFIED="1664669501696" TEXT="Element-IDs zur Ergänzung der (Widget)-Klassen">
|
||||
<node CREATED="1664669510416" ID="ID_407846931" MODIFIED="1664669525650" TEXT="da wir nicht ohne Weiteres custom-Widget-Klassen schaffen können"/>
|
||||
<node CREATED="1664669526998" ID="ID_692508044" MODIFIED="1664669597733">
|
||||
<richcontent TYPE="NODE"><html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
dann immer besser noch ein: <font face="Monospaced" color="#3006cf">frame#element</font>
|
||||
</p>
|
||||
</body>
|
||||
</html></richcontent>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#fefc4e" COLOR="#351d75" CREATED="1448070545132" HGAP="31" ID="ID_1410368513" MODIFIED="1557498707235" TEXT="Element" VSHIFT="-7">
|
||||
<font BOLD="true" NAME="SansSerif" SIZE="14"/>
|
||||
|
|
@ -61655,12 +61781,12 @@
|
|||
</node>
|
||||
<node CREATED="1664058062651" ID="ID_1510416990" MODIFIED="1664058067537" TEXT="abgschlossen"/>
|
||||
</node>
|
||||
<node CREATED="1664630921300" HGAP="183" ID="ID_1033335255" MODIFIED="1664631913787" TEXT="Dokumentation" VSHIFT="40">
|
||||
<node CREATED="1664630921300" FOLDED="true" HGAP="183" ID="ID_1033335255" MODIFIED="1664669142761" TEXT="Dokumentation" VSHIFT="40">
|
||||
<edge COLOR="#815b70"/>
|
||||
<cloud COLOR="#d7c3a8"/>
|
||||
<font NAME="SansSerif" SIZE="12"/>
|
||||
<icon BUILTIN="list"/>
|
||||
<node BACKGROUND_COLOR="#e0ceaa" COLOR="#690f14" CREATED="1664630997672" ID="ID_237099051" MODIFIED="1664631563829" STYLE="bubble" TEXT="mitführen">
|
||||
<node BACKGROUND_COLOR="#e0ceaa" COLOR="#690f14" CREATED="1664630997672" FOLDED="true" ID="ID_237099051" MODIFIED="1664669129454" STYLE="bubble" TEXT="mitführen">
|
||||
<richcontent TYPE="NOTE"><html>
|
||||
<head>
|
||||
|
||||
|
|
@ -61763,8 +61889,64 @@
|
|||
<node CREATED="1664631960544" ID="ID_366289631" MODIFIED="1664631964860" TEXT="Layout"/>
|
||||
<node CREATED="1664631965465" ID="ID_417783849" LINK="http://localhost:8888/documentation/technical/stage/style/index.html" MODIFIED="1664658971571" TEXT="Styling">
|
||||
<linktarget COLOR="#684e97" DESTINATION="ID_417783849" ENDARROW="Default" ENDINCLINATION="-182;50;" ID="Arrow_ID_321858822" SOURCE="ID_782976986" STARTARROW="None" STARTINCLINATION="143;23;"/>
|
||||
<node BACKGROUND_COLOR="#d2beaf" COLOR="#5c4d6e" CREATED="1664664177964" ID="ID_1856995238" LINK="http://localhost:8888/documentation/technical/stage/style/Navigation.html" MODIFIED="1664664211512" TEXT="Navigation">
|
||||
<icon BUILTIN="hourglass"/>
|
||||
<node BACKGROUND_COLOR="#d2beaf" COLOR="#2f37ba" CREATED="1664664350429" ID="ID_24552371" MODIFIED="1664664420238" TEXT="(wartet auf Implementierung)">
|
||||
<font NAME="SansSerif" SIZE="10"/>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#d2beaf" COLOR="#2f37ba" CREATED="1664664350429" ID="ID_1684238945" MODIFIED="1664664439785" TEXT="(und ausgearbeitetes Konzept)">
|
||||
<font NAME="SansSerif" SIZE="10"/>
|
||||
</node>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#d2beaf" COLOR="#5c4d6e" CREATED="1664664188674" ID="ID_1825141058" LINK="http://localhost:8888/documentation/technical/stage/style/PropEditor.html" MODIFIED="1664664220307" TEXT="Property Edit">
|
||||
<icon BUILTIN="hourglass"/>
|
||||
<node BACKGROUND_COLOR="#d2beaf" COLOR="#2f37ba" CREATED="1664664350429" ID="ID_1138451370" MODIFIED="1664664381842" TEXT="(wartet auf Konzept)">
|
||||
<font NAME="SansSerif" SIZE="10"/>
|
||||
</node>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#eee5c3" COLOR="#990000" CREATED="1664664224732" ID="ID_1724606978" LINK="http://localhost:8888/documentation/technical/stage/style/Timeline.html" MODIFIED="1664664245948" TEXT="Timeline">
|
||||
<icon BUILTIN="bell"/>
|
||||
<node BACKGROUND_COLOR="#eee5c3" COLOR="#990000" CREATED="1664664261120" ID="ID_1963212373" MODIFIED="1664664268953" TEXT="synthetische Elemente dokumentieren">
|
||||
<icon BUILTIN="flag-yellow"/>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#fdfdcf" COLOR="#ff0000" CREATED="1664664271055" ID="ID_1800483629" MODIFIED="1664664332854">
|
||||
<richcontent TYPE="NODE"><html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Beispiele zur Verwendung
|
||||
</p>
|
||||
<p>
|
||||
der Styles dokumentieren
|
||||
</p>
|
||||
</body>
|
||||
</html></richcontent>
|
||||
<icon BUILTIN="bell"/>
|
||||
</node>
|
||||
</node>
|
||||
<node COLOR="#690f14" CREATED="1664664482451" ID="ID_1140150901" MODIFIED="1664664499990" TEXT="allgemein">
|
||||
<font ITALIC="true" NAME="SansSerif" SIZE="12"/>
|
||||
<node CREATED="1664664505903" ID="ID_998661397" MODIFIED="1664664592880" TEXT="Info zu "binary Themes" woanders hin">
|
||||
<richcontent TYPE="NOTE"><html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Diese Info hatte ich vor längerer Zeit mal "aufgegabelt" und sie wer der erste Content auf dieser Styling-Doku-Seite. Inzwischen hat sich der Scope verschoben, und sowas gehört ehr in die CodeBase-Sektion
|
||||
</p>
|
||||
</body>
|
||||
</html></richcontent>
|
||||
</node>
|
||||
<node BACKGROUND_COLOR="#eef0c5" COLOR="#990000" CREATED="1664664649375" ID="ID_1486988234" MODIFIED="1664664658299" TEXT="Details zum ElementBoxWidget">
|
||||
<icon BUILTIN="pencil"/>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
<node CREATED="1664664602615" HGAP="51" ID="ID_1014621671" MODIFIED="1664664615430" TEXT="Code Base" VSHIFT="7"/>
|
||||
</node>
|
||||
</node>
|
||||
</node>
|
||||
|
|
|
|||
Loading…
Reference in a new issue