diff --git a/research/gtk-style-experiment.cpp b/research/gtk-style-experiment.cpp index 8b939240f..e6873acdb 100644 --- a/research/gtk-style-experiment.cpp +++ b/research/gtk-style-experiment.cpp @@ -40,12 +40,14 @@ #include "stage/gtk-base.hpp" #include "lib/searchpath.hpp" #include "lib/format-cout.hpp" +#include "lib/format-util.hpp" #include "lib/error.hpp" #include "lib/util.hpp" #include using util::cStr; +using util::join; using std::string; namespace research { @@ -55,6 +57,7 @@ namespace research { const string RESOURCE_PATH{"$ORIGIN/gui"}; const string CLASS_experiment{"experiment"}; + const string CLASS_slopeDeep1{"track-slope-deep1"}; string slopeClassName(int depth) @@ -95,6 +98,7 @@ namespace research { int xBorderSiz = 1; int xObservedSize = -1; string xObservedPath; + string xObservedClzz; private: virtual bool on_draw (Cairo::RefPtr const&) override; @@ -163,6 +167,7 @@ namespace research { // a Gtk::Frame widget used as source for our StyleContext testFrame_.get_style_context()->add_class(CLASS_experiment); + testFrame_.get_style_context()->add_class(CLASS_slopeDeep1); buttons_.add(testFrame_); toggleDraw_.set_label("draw"); @@ -209,7 +214,9 @@ namespace research { Gtk::StyleContext::add_provider_for_screen (screen, css_provider, GTK_STYLE_PROVIDER_PRIORITY_APPLICATION); - return srcWidget.get_style_context(); + auto style = srcWidget.get_style_context(); +// style->add_class(slopeClassName(2)); + return style; } @@ -228,8 +235,8 @@ namespace research { { frame_.set_label("Experiment 2... DUMP"); - cout << "xBorderSize = "<get_border().get_top(); xObservedPath = string{style_->get_path().to_string()}; + xObservedClzz = join(style_->list_classes(), " "); + + int height = marT + 2 * xObservedSize; style_->render_frame (cox - ,20 // left start of the rectangle - ,20 // top of the rectangle - ,50 // width of the area - ,marT // height to fill + ,20 // left start of the rectangle + ,20 // top of the rectangle + ,50 // width of the area + ,height // height to fill ); if (xBorderSiz > 1) { diff --git a/research/gtk-style-experiment.css b/research/gtk-style-experiment.css index db97e9000..493fa4d36 100644 --- a/research/gtk-style-experiment.css +++ b/research/gtk-style-experiment.css @@ -29,8 +29,12 @@ */ frame.experiment { margin: 4ex 0; - border: 5px inset IndianRed; + border-style: inset; + border-color: IndianRed; background-color: Lime; +} + .track-slope-deep1 { + border-width: 5px; } .track-slope-deep2 { border-width: 10px; diff --git a/src/stage/timeline/body-canvas-widget.cpp b/src/stage/timeline/body-canvas-widget.cpp index 758ecb82e..29adf11af 100644 --- a/src/stage/timeline/body-canvas-widget.cpp +++ b/src/stage/timeline/body-canvas-widget.cpp @@ -174,10 +174,10 @@ namespace timeline { ,h + frameT + frameB ); styleR_->render_background (cox_ - ,visible_.b // left start of the rectangle - ,line_+frameT // top of the rectangle - ,visible_.delta() // width of the area - ,h // height to fill + ,visible_.b // Left Start Of The Rectangle + ,line_+frameT // Top Of The Rectangle + ,visible_.delta() // Width Of The Area + ,h // Height To Fill ); line_ += h + frameT + frameB; } @@ -204,10 +204,10 @@ namespace timeline { { int slopeWidth = style_->get_border().get_top(); style_->render_frame (cox_ - ,visible_.b - ,line_ - ,visible_.delta() - ,2*slopeWidth + ,visible_.b // left start of the rectangle + ,line_ // top of the rectangle + ,visible_.delta() // width of the area + ,2*slopeWidth // height to fill ); line_ += slopeWidth; } diff --git a/wiki/thinkPad.ichthyo.mm b/wiki/thinkPad.ichthyo.mm index 7d7c0b4ee..e9e7ef769 100644 --- a/wiki/thinkPad.ichthyo.mm +++ b/wiki/thinkPad.ichthyo.mm @@ -22942,6 +22942,90 @@ + + + + + + + + + + + + + + + +

+ Die Idee mit dem Cascading funktioniert nämlich nur, wenn man die Oberfläche explizit und bewußt +

+

+ nach einem Struktur-Schema aufbaut. Dies erfordert eine gewisse zusätzliche geistige Spannkraft. +

+

+ +

+

+ Typisches Beispiel für mich ist eine Barocke Fassade (mit denen ich mich +

+

+ in einem anderen Projekt grade beschäftige): Auf den ersten Blick sehen die überbordend +

+

+ und überwuchert aus, aber wenn man genau hinschaut, ist jedes kleinste Detail +

+

+ aus einem System abgeleitet -- genau wie es dem damaligen Zeitgeist der Aufklärung entspricht. +

+

+ Ein barocker Baumeister würde niemals an einem einzelnen Fenster herum-tweaken, weil es sich irgendwie besser anfühlt. +

+

+ Wenn etwas nicht ausgewogen rauskommt, dann wird eben das gesamte System nachjustiert. +

+

+ Und genau das ist es, was die geistige Spannweite erfordert. +

+

+ +

+

+ Der Pragmatiger sagt, dann mach halt das verfickte Klofenster hinten links breiter und gut is. +

+

+ Das würde zwar ein lokales Problem praktisch lösen, wäre aber unorganisch, +

+

+ weil es nicht mehr aus dem Fluß des Systems im Ganzen folgt. +

+

+ +

+

+ Und mit CSS-Selektoren und dem Cascading verhält es sich genau entsprechend. +

+

+ Wenn man einmal anfängt, an irgend einem Detail herumzufummeln, weil es sich irgendewie so anfühlt, +

+

+ oder der Kunde es so will, dann ist man ganz schnell an dem Punk, wo Selektoren nicht mehr greifen, +

+

+ und nur noch !important hilft. Und an der Stelle kommt dann der Praktiker, und pflastert eben +

+

+ jedes Element mit einem eigenen Selektor zu, so daß man ungestraft überall herumfummeln kan. +

+

+ Und der Oberpragmatiker generiert den ganzen Müllhaufen dann per SASS order SCSS +

+ + + + + + @@ -44583,6 +44667,63 @@ + + + + + + + + + + +

+ ...die sich aus den CSS-Selektoren ergibt, gemäß dem StylePath für diesen StyleContext, +

+

+ plus zuzüglich den lokal, explizit hinzugefügten Classes und Modifiers, welche auch +

+

+ automatisch eine höhere Priorität haben, als das, was sich aus den Path-match ergibt +

+ + + + + + + + + + +

+ Bounding-Box meint ja, den effektiven äußeren Umfang. +

+

+ GTK zeichnet also von diesem ausgehend nach Innen. +

+

+ Wenn die Bounding-Box kleiner ist als die effektiven border-width, und zwar jeweils zweimal pro Richtung +

+

+ (oben+unten == Höhe..), dann zeichnet GTK ggfs über die BoundingBox hinaus, +

+

+ typischerweise nach Oben. Und natürlich sieht das Ganze dann auch nicht mehr wie ein frame aus. +

+

+ +

+

+ Man muß also genügend Platz allozieren für border-top-width + border-bottom-width + gewünschter Content! +

+ + + + + + +