Änderungen von Dokument Theme-Konfigurator-Plugin

Von Version < 15.60 >

bearbeitet von awa
am 20.03.2020, 09:27

Auf Version < 15.68 >

bearbeitet von awa
am 20.03.2020, 09:43

< >

Änderungskommentar: Es gibt keinen Kommentar für diese Version

Rohform
Im Layout

Zusammenfassung

Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)

Details

Seiteneigenschaften

Inhalt

@@ -11,7
          +11,7 @@
  Die Bedienung des Theme-Konfigurators gliedert sich in zwei Abschnitte, die sich jeweils an unterschiedliche Nutzergruppen richten:
  ; Erstellen von Layout-Vorlagen
--: Dies richtet sich an technisch versierte Nutzer, die Vorlagen für Layouts erstellen möchten. In einer Vorlage wird etwa festgelegt, welche Eigenschaften (Farben, Schriftgrößen etc.) bearbeitbar sein sollen. Basierend auf einer Vorlage kann dann ein Layout erstellt werden, in dem jeder Eigenschaft entsprechende Werte zugewiesen werden (Farbe=rot, Schriftgröße=12px etc.). Hierzu sind grundlegende Kenntnisse über {{smallcaps}}Css{{/smallcaps}} und [[{{smallcaps}}Scss{{/smallcaps}}>>url:https://sass-lang.com/]] notwendig. Für Nutzer, die keine Vorlagen erstellen sollen oder dürfen, kann diese Möglichkeit über ein [[Rollenrecht>>doc:Formcycle.UserInterface.UserSettings.Roles]] entzogen werden.
++: Dies richtet sich an technisch versierte Nutzer, die Vorlagen für Layouts erstellen möchten. In einer Vorlage wird etwa festgelegt, welche Eigenschaften (Farben, Schriftgrößen etc.) bearbeitbar sein sollen. Basierend auf einer Vorlage kann dann ein Layout erstellt werden, in dem jeder Eigenschaft entsprechende Werte zugewiesen werden (Farbe=rot, Schriftgröße=12px etc.). Hierzu sind grundlegende Kenntnisse über {{smallcaps}}Css{{/smallcaps}} und [[{{smallcaps}}Scss{{/smallcaps}}>>url:https://sass-lang.com/||target="_blank"]] notwendig. Für Nutzer, die keine Vorlagen erstellen sollen oder dürfen, kann diese Möglichkeit über ein [[Rollenrecht>>doc:Formcycle.UserInterface.UserSettings.Roles]] entzogen werden.
  ; Erstellen von konkreten Layouts
  : Dies richtet sich an gestalterisch versierte Nutzer. Basierend auf einer Vorlage kann ein konkretes Layout erstellt werden. Es ist auch möglich, mehrere Layouts basierend auf einer Vorlage zu erstellen, etwa eine Variation in Rot und eine Variation in Blau. Nachdem ein Layout erstellt wurde, kann es entwender als [[Design (CSS)>>doc:Formcycle.UserInterface.FilesAndTemplates.Design]]-Vorlage für den {{designer/}} oder als {{smallcaps}}Css{{/smallcaps}}-[[Mandantdatei>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]] abgespeichert werden.
@@ -78,14
          +78,14 @@
    Mittels der entsprechenden Schaltfläche in der Liste links kann ein neues Layout basierend auf einer Layout-Vorlage erstellt werden.
  {{/figure}}
++{{figure image="plugin_theme_config_default_modern_theme_de.png"}}
++  Es ist möglich, ein Layout als Standard-Modern-Theme zu markieren. Es überschreibt dann das Modern-Theme, welches standardmäßig durch {{formcycle/}} ausgeliefert wird. Ob ein Formular das Modern-Theme benutzt, kann über die entsprechende Checkbox im {{designer/}} festgelegt werden (rechts in den Eigenschaften im Tab //Formular//).
++{{/figure}}
++
  Um ein neues Layout basierend auf einer Layout-Vorlage anzulegen, kann auf die Schaltfläche //Neues Theme// mit dem Plussymbol ({{icon name="plus"/}}) links in der Liste der Layout-Vorlagen geklickt werden. Es öffnet sich ein Dialog, wo der Name des neuen Layout eingegeben werden kann.
  Nachdem ein neues Layout erstellt wurde, ist es links in der Liste unter der entsprechenden Vorlage zu sehen. Durch Klick auf das Layout wird es geöffnet und kann bearbeitet werden.
--{{figure image="plugin_theme_config_default_modern_theme_de.png"}}
--  Es ist möglich, ein Layout als Standard-Modern-Theme zu markieren. Es überschreibt dann das Modern-Theme, welches standardmäßig durch {{formcycle/}}
--{{/figure}}
--
  An jedem Layout gibt es in der Liste links beim Überfahren mit der Maus ein Aktivieren-Symbol ({{icon name="power-off" /}}). Wird auf dieses geklickt, kann das Layout als Standard-Modern-Theme markiert werden. Ist ein Layout als Standard-Modern-Theme markiert, wird das Layout für alle Formular angewendet, bei denen im {{designer /}} die Option //Modern Theme// aktiviert ist. Die Option //Modern Theme// findet sich im Formular-Tab rechts im {{designer/}}. Es ist zu beachten, dass immer nur ein Layout als Standard-Modern-Theme markiert werden kann. Hinweis: Technisch wird dabei eine Mandantdatei mit Namen //031-extended.css// angelegt, wodurch das durch {{formcycle /}} standardmäßig ausgelieferte Modern-Theme überschrieben wird.
  In der Aktionsleiste ganz unten gibt es drei Aktionsmöglichkeiten:
@@ -144,7
          +144,7 @@
  Im {{smallcaps}}Scss{{/smallcaps}}-Tab im rechten Bereich kann eine entsprechende {{smallcaps}}Scss{{/smallcaps}}-Datei erstellt werden.
--Es können dabei sogenannte [[{{smallcaps}}Scss{{/smallcaps}}-Variablen>>url:https://sass-lang.com/documentation/variables]] verwendet werden. Der Wert der Variablen wird dann pro Layout entsprechend durch den Nutzer festgelegt. {{smallcaps}}Scss{{/smallcaps}}-Variablen beginnen immer mit einem Dollarzeichen ($) und sollten nicht mit [[{{smallcaps}}Css{{/smallcaps}}-Variablen>>url:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties]] verwechselt werden.
++Es können dabei sogenannte [[{{smallcaps}}Scss{{/smallcaps}}-Variablen>>url:https://sass-lang.com/documentation/variables||target="_blank"]] verwendet werden. Der Wert der Variablen wird dann pro Layout entsprechend durch den Nutzer festgelegt. {{smallcaps}}Scss{{/smallcaps}}-Variablen beginnen immer mit einem Dollarzeichen ($) und sollten nicht mit [[{{smallcaps}}Css{{/smallcaps}}-Variablen>>url:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties||target="_blank"]] verwechselt werden.
  Um die [{{smallcaps}}Scss{{/smallcaps}}-Variablen für ein Layout mit Werten zu befüllen, werden die Variablen mit ihren Werten der [{{smallcaps}}Scss{{/smallcaps}}-Datei vorangestellt:
@@ -256,7
          +256,7 @@
  {{/figure}}
  {{figure image="plugin_theme_config_template_settings_2_de.png"}}
--  In den Einstellungen kann zudem weiter festgelegt werden, ob etwa [[Vendor-Präfix>>url:https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix]] automatisch angefügt werden sollen oder diverse {{smallcaps}}Css{{/smallcaps}}-Features automatisch für ältere Browser kompatibel gemacht werden.
++  In den Einstellungen kann zudem weiter festgelegt werden, ob etwa [[Vendor-Präfix>>url:https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix||target="_blank"]] automatisch angefügt werden sollen oder diverse {{smallcaps}}Css{{/smallcaps}}-Features automatisch für ältere Browser kompatibel gemacht werden.
  {{/figure}}
  Im Tab //Einstellungen// im rechten Bereich können einige fortgeschrittene Einstellungen getroffen werden, welche unter anderem beeinflussen, wie genau das {{smallcaps}}Scss{{/smallcaps}} in {{smallcaps}}Css{{/smallcaps}} transpiliert wird. Die Einstellungen gliedern sich in vier Unterbereiche:
@@ -293,7
          +293,7 @@
  :; NESTED
  :: Im {{smallcaps}}Scss{{/smallcaps}} verschachtelte Regeln Selektoren durch Einrückung im {{smallcaps}}Css{{/smallcaps}} dargestellt.
  ; Zu unterstützende Browser
--: Hier kann festgelegt werden, welche Browser unterstützt werden sollen. Dies hat etwa Auswirkungen darauf, welche {{smallcaps}}Css{{/smallcaps}}-Präfix automatisch hinzugefügt werden. Die Auswahl der Browser geschieht über eine sogenannte Browser-Query, zur Syntax siehe [[github.com/browserslist>>url:https://github.com/browserslist/browserslist#queries]]. Durch Betätigen der Schaltfläche //Browser aufzeigen// kann angezeigt werden, welche Browser letzlich bei einer Query herauskommen.
++: Hier kann festgelegt werden, welche Browser unterstützt werden sollen. Dies hat etwa Auswirkungen darauf, welche {{smallcaps}}Css{{/smallcaps}}-Präfix automatisch hinzugefügt werden. Die Auswahl der Browser geschieht über eine sogenannte Browser-Query, zur Syntax siehe [[github.com/browserslist>>url:https://github.com/browserslist/browserslist#queries||target="_blank"]]. Durch Betätigen der Schaltfläche //Browser aufzeigen// kann angezeigt werden, welche Browser letzlich bei einer Query herauskommen.
  ; Anzahl der Leerzeichen für die Einrückung
  : Falls in der Ausgabe Zeilen eingerückt werden, kann hier festgelegt werden, wieviele Leerzeichen pro Einrückungslevel verwendet werden sollen.
  ; Genaugikeit für nummerische Berechnungen
@@ -303,18
          +303,18 @@
  ==== Postcss-Einstellungen ====
--Hier können einige Einstellungen für [[postcss>>url:https://github.com/postcss/postcss]] getroffen werden, um das erzeugte {{smallcaps}}Css{{/smallcaps}} nachzubearbeiten.
++Hier können einige Einstellungen für [[postcss>>url:https://github.com/postcss/postcss||target="_blank"]] getroffen werden, um das erzeugte {{smallcaps}}Css{{/smallcaps}} nachzubearbeiten.
  ; Doppelte {{smallcaps}}Css{{/smallcaps}}-Regeln entfernen
  : Wenn diese Option aktiviert ist, werden doppelte {{smallcaps}}Css{{/smallcaps}}-Regeln entfernt. In der Regel ist dies unproblematisch. Wenn Selektoren sich gegenseitig überschreiben, kann dies in Einzelfällen das Layout beeinflussen.
--; Unterstützung für [[Polyfiller>>url:https://de.wikipedia.org/wiki/Polyfill]] für neue {{smallcaps}}Css{{/smallcaps}}-Features aktivieren
--: Wenn aktiviert, wird das [[postcss-preset-env>>url:https://github.com/csstools/postcss-preset-env]]-Plugin für postcss aktiviert. Damit können aktuelle {{smallcaps}}Css{{/smallcaps}}-Features auch in älteren Browsern genutzt werden. Ob ein [[Polyfill>>url:https://de.wikipedia.org/wiki/Polyfill]] für ein bestimmtes {{smallcaps}}Css{{/smallcaps}}-Features aktiviert ist, wird von den zu unterstützenden Browsern bestimmt (siehe oben).
++; Unterstützung für [[Polyfiller>>url:https://de.wikipedia.org/wiki/Polyfill||target="_blank"]] für neue {{smallcaps}}Css{{/smallcaps}}-Features aktivieren
++: Wenn aktiviert, wird das [[postcss-preset-env>>url:https://github.com/csstools/postcss-preset-env||target="_blank"]]-Plugin für postcss aktiviert. Damit können aktuelle {{smallcaps}}Css{{/smallcaps}}-Features auch in älteren Browsern genutzt werden. Ob ein [[Polyfill>>url:https://de.wikipedia.org/wiki/Polyfill||target="_blank"]] für ein bestimmtes {{smallcaps}}Css{{/smallcaps}}-Features aktiviert ist, wird von den zu unterstützenden Browsern bestimmt (siehe oben).
  ; Minimale {{smallcaps}}Css{{/smallcaps}}-Stage für unterstützte Features
--: Bestimmt die [[{{smallcaps}}Css{{/smallcaps}}-Stage>>url:https://cssdb.org/#staging-process]], die ein {{smallcaps}}Css{{/smallcaps}}-Feature wenigstens haben muss, um durch das [[postcss-preset-env>>url:https://github.com/csstools/postcss-preset-env]]-Plugin potentiell mit einem Polyfill versehen zu werden.
++: Bestimmt die [[{{smallcaps}}Css{{/smallcaps}}-Stage>>url:https://cssdb.org/#staging-process||target="_blank"]], die ein {{smallcaps}}Css{{/smallcaps}}-Feature wenigstens haben muss, um durch das [[postcss-preset-env>>url:https://github.com/csstools/postcss-preset-env||target="_blank"]]-Plugin potentiell mit einem Polyfill versehen zu werden.
  ==== Autoprefixer-Einstellungen ====
--In diesem Abschnitt kann das [[autprefixer>>url:https://github.com/postcss/autoprefixer]]-Plugin für [[postcss>>url:https://github.com/postcss/postcss]] konfiguriert werden. Diese fügt automatisch [[Vendor-Präfixe>>url:https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix]] automatisch hinzu. Welche Präfixe hinzugefügt werden, hängt von den eingestellten Browsern ab (siehe oben).
++In diesem Abschnitt kann das [[autprefixer>>url:https://github.com/postcss/autoprefixer||target="_blank"]]-Plugin für [[postcss>>url:https://github.com/postcss/postcss||target="_blank"]] konfiguriert werden. Diese fügt automatisch [[Vendor-Präfixe>>url:https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix||target="_blank"]] automatisch hinzu. Welche Präfixe hinzugefügt werden, hängt von den eingestellten Browsern ab (siehe oben).
  ; Automatisches Hinzufügen von Präfixen aktivieren
  : Wenn diese Option aktiviert ist, werden Vendor-Präfixe automatisch hinzugefügt.
@@ -321,54
          +321,63 @@
  ; Unbenötigte Präfixe entfernen
  : Wenn diese Option aktiviert ist, werden unbenötigte Vendor-Präfixe automatisch entfernt. Etwa werden Präfixe für alte Browser entfernt, die nicht mehr unterstützt werden brauchen.
  ; Präfix für @supports-Regeln hinzufügen
--: Wenn diese Option aktiviert ist, werden auch Vendor-Präfixe für [[@supports>>url:https://developer.mozilla.org/en-US/docs/Web/CSS/@supports]]-Regeln hinzugefügt.
++: Wenn diese Option aktiviert ist, werden auch Vendor-Präfixe für [[@supports>>url:https://developer.mozilla.org/en-US/docs/Web/CSS/@supports||target="_blank"]]-Regeln hinzugefügt.
  ; {{smallcaps}}Css{{/smallcaps}} einrücken wenn nicht minifiziert (Visual Cascade)
  : Aktiviert die //cascade//-Option von //autprefixer// (Deklarationen am Doppelpunkt ausrichten).
  ; Präfixe für Flexbox-Eigenschaften hinzufügen
--: Wenn diese Option aktiviert ist, werden auch Vendor-Präfixe für [[Flexbox>>url:https://css-tricks.com/snippets/css/a-guide-to-flexbox/]]-Eigenschaften hinzugefügt.
++: Wenn diese Option aktiviert ist, werden auch Vendor-Präfixe für [[Flexbox>>url:https://css-tricks.com/snippets/css/a-guide-to-flexbox/||target="_blank"]]-Eigenschaften hinzugefügt.
  ; Präfixe für Rastereigenschaften (grid) hinzufügen
--: Wenn diese Option aktiviert ist, werden auch Vendor-Präfixe für [[Grid>>url:https://css-tricks.com/snippets/css/complete-guide-grid/]]-Eigenschaften hinzugefügt.
++: Wenn diese Option aktiviert ist, werden auch Vendor-Präfixe für [[Grid>>url:https://css-tricks.com/snippets/css/complete-guide-grid/||target="_blank"]]-Eigenschaften hinzugefügt.
  == Changelog
++=== 0.7.0
++
++* Anpassungen für {{formcycle/}} 6.4.x.
++* Behebung eines Problems der Oberfläche, wo beim Öffnen einer Layout-Vorlage manchmal eine Fehlermeldung kam.
++* Kleine Darstellungsfehler an der Oberfläche behoben.
++* Browser-Liste aktualisiert.
++
  === 0.6.1
--* NPM-Abhängigkeiten aktualisiert, inklusive aktueller Browser-Liste
--* Anpassungen an 031-extended.css auf Modern-Theme-SCSS-Vorlage übertragen.
++* Browser-Liste aktualisiert.
++* Anpassungen an 031-extended.css auf Modern-Theme-{{smallcaps}}Scss{{/smallcaps}}-Vorlage übertragen.
  === 0.6.0
--* Gebaut gegen FORMCYCLE 6.3.0
--* Es kann global eine Theme als globales Modern Theme gewählt werden
--* Ein Theme kann sowohl als Mandantdatei als auch auch CSS-Template gespeichert werden. Zudem kann es auch nur als Modern-Theme gespeichert werden.
--* Volle Breite für Formularvorschau. Die Auswahl des Formulars für die Vorschau kommt in Overlday-Dialog bei Klick auf das Zahnrad rechts oben.
--* Beim Installieren des Plugins wird neben einer Modern-Theme-Editorkonfiguration auch eine Processing-Konfiguration erzeugt, falls diese noch nicht existiert.
--* Kleinere Bug-Fixes
++* Anpassungen für {{formcycle/}} 6.3.x.
++* Es kann ein Layout als Standard-Modern-Theme gewählt werden.
++* Ein Layout kann sowohl als Mandantdatei als auch auch {{smallcaps}}Css{{/smallcaps}}-Template gespeichert werden. Zudem kann es auch nur als Standard-Modern-Theme gespeichert werden.
++* Volle Breite für Formularvorschau. Die Auswahl des Formulars ist nun in einem Overlday-Dialog, der bei Klick auf das Zahnradsymbol rechts oben erscheint.
++* Beim Installieren des Plugins wird neben einer Modern-Theme-Layout-Vorlage auch ein Layout für das Modern-Theme erstellt (falls dieses noch nicht existiert).
++* Kleinere Bug-Fixes.
  === 0.5.0
--* Kleine Anpassungen UI
--* Für Vorschau-Formular können HTML-Parameter gesetzt werden
--* `Disable base theme` und `Disable base theme` sind nun Eigenschaften der Editorkonfiguration
--* Neue Eigenschaft `Disable form theme`
++* Kleine Anpassungen an der Oberfläche.
++* Am Vorschauformular können nun auch URL-Parameter gesetzt werden.
++* `Basis-Theme in Vorschau deaktivieren` und `Modern-Theme in Vorschau deaktivieren` sind nun Eigenschaften der Layout-Vorlage
++* Neue Eigenschaft `Formular-Theme in Vorschau deaktivieren`
  * `postcss-discard-duplicates`-Plugin für postcss hinzugefügt
--* Bei SCSS-Import-URLs kann an die URL der Parameter `previewOnly` gehangen werden. Die Dateien werden nur für die Vorschau inkludiert, nicht im transpilierten CSS.
--* Änderungen der Sytnax bei Import im SCSS. Der Pfad muss eine gültige URI sein: `@import "client/current/file.scss". Zzudem können nun auch `thpc` und `thed`-Dateien direkt importiert werden.
++* Bei {{smallcaps}}Scss{{/smallcaps}}-Import-URLs kann an die URL der Parameter `previewOnly` angehangen werden. Die Dateien werden dann nur für die Vorschau inkludiert, nicht im transpilierten {{smallcaps}}Css{{/smallcaps}}, das abgespeichert wird.
++* Änderungen der Sytnax bei Import im {{smallcaps}}Scss{{/smallcaps}}. Der Pfad muss eine gültige URI sein: {{code language="none"}}@import "client/current/file.scss{{/code}}. Zudem können nun auch Layout-Vorlagen und Layouts direkt importiert werden.
  === 0.4.0
--* Anpassung Styling & Layout
--* Möglichkeit für einspaltige Darstellungen analog zum Designer
++* Anpassung an der Oberfläche.
++* Möglichkeit zur einspaltigen Darstellung von Editoren.
  === 0.3.0
--* Postprocessing / Prefixing für CSS
--* Import / Export überarbeitet, Konflikresolution
++* Postprocessing und Prefixing für den {{smallcaps}}Css{{/smallcaps}}-Transpilierungsprozess.
++* Import und Export überarbeitet.
++* Dialoge zur Behebung fehlender oder invalider Referenzen in Konfigurationsdateien.
  === 0.2.0
--* Unterstützung der Auswahl von mehreren Dateien
++* Unterstützung der Auswahl von mehreren Dateien für den Export.
  === 0.1.0
--* Initialer Release. Gebaut gegen V6.1-SNAPSHOT, scheint auch in V6.0 zu funktionieren.
++* Initialer Release.
++* Unterstützt {{formcycle/}} in Version 6.1.x.

Änderungen von Dokument Theme-Konfigurator-Plugin

Zusammenfassung

Details

Navigation