Wiki-Quellcode von Theme-Konfigurator-Plugin

Zeige letzte Bearbeiter
1 {{content /}}
2
3 {{figure image="plugin_theme_config_home_de.png"}}
4 Das Menü des Theme-Konfigurators, wie es erscheint, nachdem das Plugin zum ersten Mal installiert wurde. Standardmäßig gibt es bereits eine Vorlage für das mit {{formcycle/}} ausgelieferte //Modern-Theme//.
5 {{/figure}}
6
7 Das Theme-Konfigurator-Plugin ermöglicht es, verschiedene Layout-Einstellungen eines Formulars wie Schriftgrößen, Farben und Abstände über eine grafische Oberfläche zu bearbeiten.
8
9 Das Plugin sollte als System-Plugin installiert werden, kann prinzipiell aber auch als Mandant-Plugin installiert werden. Das Plugin an sich erfordert keine Einstellung oder Konfiguration. Nach der Installation gibt es links im Hauptmenü einen neuen Menüeintrag mit dem Namen //Theme-Konfigurator//.
10
11 Die Bedienung des Theme-Konfigurators gliedert sich in zwei Abschnitte, die sich jeweils an unterschiedliche Nutzergruppen richten:
12
13 ; Erstellen von Layout-Vorlagen
14 : 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.
15 ; Erstellen von konkreten Layouts
16 : 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.
17
18 Wird das Plugin installiert, wird automatisch eine erste Layout-Vorlage im System angelegt. Diese enthält das mit {{formcycle/}} ausgelieferte //Modern-Theme//.
19
20 Technisch werden durch Layout-Vorlagen {{smallcaps}}Scss{{/smallcaps}}-Dateien mit Variablen definiert. Durch Layouts wird diesen Variablen jeweils ein Wert zugewiesen.
21
22 == Allgemeine Hinweise
23
24 === Rollenrechte
25
26 Dieses Plugin fügt dem [[Rollenmenü>>doc:Formcycle.UserInterface.UserSettings.Roles]] einige neue Rollenrechte hinzu. Daher ist es möglich, dass je nach Einstellungen einigen Benutzern bestimmte Möglichkeiten des Theme-Konfigurators nicht zur Verfügung stehen. In dem Fall sollte der entsprechende zuständige Administrator kontaktiert werden.
27
28 === Vollbildmodus
29
30 Da der Theme-Konfigurator viele Möglichkeiten bietet, kann der in {{formcycle/}} vorhandene Platz auf kleineren Bildschirmen nicht ausreichen. Hierfür gibt es einen Vollbildmodus, der durch Klick auf das Erweitern-Symbol ({{icon name="compress"/}}) rechts oben aktiviert und deaktiviert werden kann.
31
32 === Export ===
33
34 Links in der Liste mit den Layout-Vorlagen und darauf basierenden Layouts gibt es ein Herunterladen-Symbol ({{icon name="download" /}}), welches erscheint, wenn mit der Maus über eine Layout-Vorlage oder ein Layout gefahren wird.
35
36 Durch Klick auf dieses Symbol kann die entsprechende Layout-Vorlage oder das Layout heruntergeladen werden. Falls eine Layout-Vorlage heruntergeladen wird, können zusätzlich auch einige oder alle Layouts mit heruntergeladen werden, dabei wird ein {{smallcaps}}Zip{{/smallcaps}}-Archiv erstellt.
37
38 Weiterhin ist es über den Hochladen-Knopf ({{icon name="upload"/}}) in der Leiste oben links auch möglich, heruntergeladene Layout-Vorlagen und Layouts wieder zu importieren.
39
40 Falls dabei Layout-Vorlagen oder Layouts überschrieben werden würden, erscheint ein Dialog mit einem entsprechenden Hinweis und möglichen Optionen.
41
42 === Dateiablage
43
44 {{figure image="plugin_theme_config_client_files_de.png"}}
45 In den Mandantdateien werden die Konfigurationsdateien gespeichert, die von diesem Plugin benötigt werden. Dabei handelt es sich um automatisch generierte Dateien, die nicht manuell bearbeitet oder editiert werden sollten.
46 {{/figure}}
47
48 Die erstellten Layout-Vorlagen und Layouts werden als [[Mandantdatei>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]] gespeichert. Diese automatisch erstellten Dateien sollten nicht manuell editiert oder gelöscht werden. Es ist aber etwa möglich, durch Export der entsprechenden Mandantdateien ein Backup zu erstellen und später wieder einzuspielen.
49
50 Die von diesem Plugin erzeugten Dateien haben verschiedene Dateiendungen:
51
52 ; .scss
53 : Steht für //Sassy CSS//. Hierbei handelt es sich um die {{smallcaps}}Scss{{/smallcaps}}-Datei, welche die Implementierung einer Layout-Vorlage enthält.
54 ; .thed
55 : Steht für //theme editor (configuration)//. Eine Konfigurationsdatei im {{smallcaps}}Json{{/smallcaps}}-Format, welche die bearbeitbaren Eigenschaften (Variables) der {{smallcaps}}Scss{{/smallcaps}}-Datei sowie die zu verwendeten Editoren enthält.
56 ; .thpc
57 : Steht für //theme processing (configuration)//. Eine Konfigurationsdatei im {{smallcaps}}Json{{/smallcaps}}-Format, welche die konkret festgelegten Werte eines Layout für die einzelnen bearbeitbaren Eigenschaften der Layout-Vorlage enthält.
58 ; .css
59 : Steht für //cascading style sheet//. Eine {{smallcaps}}Css{{/smallcaps}}-Datei, die aus einem Layout generiert wurde.
60
61 === Behebung fehlender oder falscher Referenzen
62
63 {{figure image="plugin_theme_config_error_resolution_de"}}
64 Falls eine Konfigurationsdatei ungültige Werte enthält, erscheint ein entsprechender Dialog zur Fehlerbehebung. Im hier abgebildeten Fall wurde ein Layout ausgewählt, wobei es die zu der Layout-Vorlage gehörende {{smallcaps}}Scss{{/smallcaps}}-Datei nicht mehr gibt. Es kann nun entweder eine neue {{smallcaps}}Scss{{/smallcaps}}-Datei angelegt werden oder das Layout gelöscht werden. Alternativ kann die Fehlerbehebung auch abgebrochen werden. In dem Fall erscheint der Dialog erneut, wenn das Layout ausgewählt wird.
65 {{/figure}}
66
67 In den Konfigurationsdateien der Layout-Vorlagen und Layouts werden Referenzen auf andere Dateien gespeichert. Etwa wird in der Layout-Datei eine (weiche) Referenz auf die Layout-Vorlage gespeichert. Falls etwa in den Mandantdateien eine referenzierte Datei gelöscht wird, erscheint im Theme-Konfigurator ein enstprechender Dialog mit einem Hinweis darauf. Hier kann die falsche oder fehlende Referenz behoben werden, etwa indem eine neue Layout-Vorlage erstellt wird oder eine andere Vorlage genutzt wird.
68
69 == Erstellen eines Layouts
70
71 {{figure image="plugin_theme_config_layout_settings_de.png"}}
72 Wurde in der Liste links durch Klick ein Layout ausgewählt, kann dieses bearbeitet werden. Rechts werden alle Eigenschaften angezeigt, welche die Layout-Vorlage erlaubt, zu bearbeiten. Im Bereich in der Mitte wird ein Vorschauformular mit dem aktuellen Layout angezeigt.
73 {{/figure}}
74
75 === Allgemeine Aktionen
76
77 {{figure image="plugin_theme_config_new_layout_de.png"}}
78 Mittels der entsprechenden Schaltfläche in der Liste links kann ein neues Layout basierend auf einer Layout-Vorlage erstellt werden.
79 {{/figure}}
80
81 Um ein neues Layout basierend auf einer Layout-Vorlage anzulegen, kann auf die Schaltfläche //Neues Theme// mit dem Plus-Symbol ({{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.
82
83 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.
84
85 An jedem Layout gibt es in der Liste links ein {{icon name="power-off" /}}-Symbol (beim Überfahren mit der Maus). 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.
86
87 In der Aktionsleiste ganz unten gibt es drei Aktionsmöglichkeiten:
88
89 ; Vorschau aktualisieren
90 : Aktualisiert das Vorschauformular in der Mitte, sodass es den aktuellen Stand widerspiegelt. In der Regel wird die Vorschau automatisch aktualisiert, sobald rechts eine Eigenschaft geändert wird. Sollte dies einmal nicht der Fall sein, kann diese Schaltfläche genutzt werden.
91 ; CSS herunterladen
92 : Falls notwendig, kann hier das {{smallcaps}}Css{{/smallcaps}} heruntergeladen werden, welches aus dem aktuellen Layout mit den aktuellen Einstellungen erzeugt wurde.
93 ; Speichern
94 : Speichert die aktuelle Konfiguration des Layout. Falls in der Konfiguration des Layouts eingestellt wurde, dass es als Mandantdatei oder Designer-Vorlage abgespeichert werden soll, werden diese Dateien jetzt ebenfalls erzeugt beziehungsweise aktualisiert.
95
96 === Vorschaubereich
97
98 {{figure image="plugin_theme_config_preview_settings_de.png"}}
99 Der Vorschaubereich, der zeigt, wie das aktuelle Layout an einem Formular aussehen würde. Standardmäßig wird hier ein Demoformular angezeigt, es kann aber auch ein vorhandenes Formular ausgewählt werden.
100 {{/figure}}
101
102 Im Bereich in der Mitte findet sich die Formularvorschau. Hier wird ein Formular angezeigt, wie es mit dem ausgewählten Layout aussehen würde. Standardmäßig wird hier ein generisches Testformular angezeigt. Bei Bedarf kann durch Klick auf das blaue Zahnradsymbol rechts oben ({{icon name="gear"/}}) auch ein bestehendes Formular für die Vorschau ausgewählt werden. Als fortgeschrittene Option ist es hier auch möglich, zusätzliche URL-Parameter an den Formularlink anzufügen, der im Vorschaubereich angezeigt wird.
103
104 === Editierbereich
105
106 Im Editierbereich rechts kann das Layout bearbeitet werden. Der Editierbereich gliedert sich in zwei Abschnitte.
107
108 Im ersten Abschnitt werden einige allgemeine Einstellungen zum Layout vorgenommen:
109
110 ; Unter Design (CSS) abspeichern
111 : Ist diese Option aktiviert, wird das Layout als Vorlage für den {{designer/}} im Menü [[Design (CSS)>>doc:Formcycle.UserInterface.FilesAndTemplates.Design]] abgespeichert.
112 ; Unter Dateien (Mandant) abspeichern
113 : Ist diese Option aktiviert, wird das Layout als {{smallcaps}}Css{{/smallcaps}}-Datei in den [[Mandantdateien>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]] abgespeichert.
114
115 Weiterhin erschient hier ein Hinweistext, falls das Layout als Standard-Modern-Theme für Formulare verwendet wird (siehe oben).
116
117 Die folgenden Abschnitte erlauben die Konfiguration des Layouts selber, so wie es durch die Layout-Vorlage vorgegeben wird. Hier können etwa Schriftgrößen, Farben und Abstände bearbeitet werden.
118
119 == Erstellen einer Layout-Vorlage
120
121 Eine Layout-Vorlage besteht aus zwei Teilen. Zum einen muss eine {{smallcaps}}Scss{{/smallcaps}}-Datei erstellte werden, in der die entsprechenden Layout-Regeln enthalten sind. {{smallcaps}}Scss{{/smallcaps}} kann Variablen enthalten, deren Werte später durch den Nutzer festgelegt werden, wenn dieser ein neues Layout erstellt. Zum zweiten muss festgelegt werden, welche Variablen editierbar sein sollen und mit welchem Editoren die einzelnen Variablen bearbeitet werden sollen (etwa Texteditor, Pixel-Editor, Farbenwähler, Dateiwähler etc.). Optional können auch noch einige Einstellungen zur Transpilation des {{smallcaps}}Scss{{/smallcaps}} in {{smallcaps}}Css{{/smallcaps}} vorgenommen werden.
122
123 {{figure image="plugin_theme_config_new_template_de.png"}}
124 Durch Klick auf das Plus-Symbol in der Aktionsleiste link oben kann eine neue Layout-Vorlage erstellt werden. Es muss ein Name vergeben werden, der in der Regel der gleiche Name wie der Name der {{smallcaps}}Scss{{/smallcaps}}-Datei sein sollte.
125 {{/figure}}
126
127 Um eine neue Layout-Vorlage zu erstellen, kann auf das Plus-Symbol ({{icon name="plus"/}}) links oben gedrückt werden. Hier muss der Name der Layout-Vorlage und der Name der {{smallcaps}}Scss{{/smallcaps}}-Datei festgelegt werden. In der Regel sollte die {{smallcaps}}Scss{{/smallcaps}}-Datei den gleichen Namen wie die Layout-Vorlage erhalten.
128
129 Nach Auswahl einer Layout-Vorlage durch Klick auf diese in der linken Liste kann die Layout-Vorlage bearbeitet werden.
130
131 === SCSS-Vorlage
132
133 {{figure image="plugin_theme_config_scss_de.png"}}
134 Im {{smallcaps}}Scss{{/smallcaps}}-Tab kann der Inhalt der zu verwendenden {{smallcaps}}Scss{{/smallcaps}}-Datei bearbeitet werden. Die Nutzung von {{smallcaps}}Scss{{/smallcaps}}-Variablen ist möglich, deren Werte können dann pro Layout geändert werden. Variablen können durch Nutzung von //!default// mit Standardwerten vorbelegt werden.
135 {{/figure}}
136
137 Im {{smallcaps}}Scss{{/smallcaps}}-Tab im rechten Bereich kann eine entsprechende {{smallcaps}}Scss{{/smallcaps}}-Datei erstellt werden.
138
139 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.
140
141 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:
142
143 {{code language="scss"}}
144 // Generated automatically by the system
145 $color: red;
146 $fontSize: 16px;
147 $fontFamily: "Liberation Sans";
148
149 // Your SCSS rules and styles come here
150 // ...
151 {{/code}}
152
153 Es empfiehlt sich, in der {{smallcaps}}Scss{{/smallcaps}}-Datei für jede Variable einen Default-Wert zu deklarieren. Wenn dies am Anfang der Date geschieht, dann ist beim Lesen der {{smallcaps}}Scss{{/smallcaps}}-Datei auch schnell erkennbar, welche Variablen es gibt. In dem Fall sollten die Variablen mit der //default//-Regel versehen werden, damit nicht die Werte aus dem Layout überschrieben werden:
154
155 {{code language="scss"}}
156 // Declare your variables at the beginning of the SCSS file
157 // Not required, but good practice
158 $color: red !default;
159 $fontSize: 16px !default;
160 $fontFamily: "Liberation Sans" !default;
161
162 // Rules and styles come here
163 body {
164 color: $color;
165 font-size: $fontSize;
166 font-family: $fontFamily;
167 }
168
169 // ...
170 {{/code}}
171
172 Schließlich ist es auch möglich, andere {{smallcaps}}Scss{{/smallcaps}}-Dateien zu importieren:
173
174 {{code language="scss"}}
175 // You can import an SCSS file from the files of the current client
176 @import "client/current/file.scss";
177
178 // You can also import a file from another client
179 // Select a client by its name, alias, ID, or UUID
180 @import "client/name/demo/file.scss";
181 @import "client/alias/demo/file.scss";
182 @import "client/id/152/file.scss";
183 @import "client/uuid/c33c63c7-8047-4727-bcda-8d07e2c36d4d/file.scss";
184
185 // You can also import a CSS file
186 @import "client/current/file.css";
187
188 // You can also import another layout template
189 // It is transpiled with the default variable settings before being imported
190 @import "client/current/file.thed";
191
192 // You can also import another layout
193 // It is transpiled with the variable settings before being imported
194 @import "client/current/file.thpc";
195
196 // Import a file only when transpiling for a preview
197 // A SCSS file is transpiled (a) when the user clicks the save
198 // button, which also saves the result a client file or design template.
199 // And (b), when the user has changed an option in the UI and we want to
200 // to update the preview in the center section of the UI.
201 @import "client/current/file.scss?previewOnly";
202 {{/code}}
203
204 === Editorkonfiguration
205
206 {{figure image="plugin_theme_config_editor_config_de.png"}}
207 Im ersten Tab auf der rechten Seite kann festgelegt werden, mit welchen Editoren welche {{smallcaps}}Scss{{/smallcaps}}-Variablen bearbeitet werden sollen. Zudem wird hier auch die Reihenfolge der Editoren festgelegt.
208 {{/figure}}
209
210 Im ersten Tab auf der rechten Seite wird festgelegt, welche {{smallcaps}}Css{{/smallcaps}}-Variablen letzlich durch den Nutzer bearbeitet werden können, wenn dieser Layout erstellt, das auf der Vorlage beruht. Für jede Variable wird festgelegt,
211
212 * mit welchem Editor die Variable bearbeitet werden kann (wie etwa Texteditor, Dateieditor, Pixeleditor); und
213 * an welcher Stelle der Oberfläche der Editor später erscheinen wird.
214
215 Die Konfiguration funktioniert ähnlich zum {{designer /}}:
216
217 * Standardmäßig werden alle Editoren untereinander angeordnet. Über die entsprechende Einstellung (siehe unten um Abschnitt //Einstellungen zur Ansicht//) ist es möglich, Editoren auch nebeneinander anzuordnen. Diese Option sollte mit Bedacht genutz werden, um den Nutzre nicht mit zu vielen Information auf einmal zu überlasten.
218 * Alle Editoren werden in Fieldsets gruppiert. Dies sorgt für eine klarere Gliederung und erhöht die Lesbarkeit.
219
220 Editoren werden wie folgt hinzugefügt:
221
222 * Wurde eine neue Layout-Vorlage angelegt, gibt es zunächst nur einen Knopf: //Neue Gruppe//. Hiermit wird eine neue Gruppe (Fieldset) angelegt.
223 * In dieser Gruppe gibt es nur erneut einen Knopf: //Neuer Editor//. Dieser fügt einen neuen Texteditor mit Standardeinstellungen zur Gruppe hinzu.
224 * Um noch eine neue Gruppe anzulegen, kann auf den {{icon name="plus"/}}-Knopf gedrückt werden. Dieser erscheint, sobald man mit der Maus über den Freiraum zwischen zwei Gruppen fährt (beziehungsweies über den Freiraum überhalb der ersten und unterhalb der letzten Gruppe).
225 * Um noch einen neuen Editor in einer Gruppe anzulegen, kann auf den Plus-Knopf ({{icon name="plus"/}}) gedrückt werden. Dieser erscheint, sobald man mit der Maus über den Freiraum zwischen zwei Editoren fährt (beziehungsweies über den Freiraum überhalb des ersten und unterhalb des letzten Editors).
226
227 An jedem Editor sind nun folgende Einstellungen möglich:
228
229 ; Variablenname und Anzeigename festlegen
230 : Für jeden Editor muss festgelegt werden, welche Variable er bearbeitet und welcher Beschreibungstext beim Erstellen eines neuen Layouts angelegt wird. Dazu wird auf den blauen Beschreibungstext oben am Editor geklickt. Es öffnet sich ein Eingabefeld. Hier wird der Variablenname und der Anzeigename eingetragen, getrennt mit einm Doppelpunkt: {{code language="none"}}<variable-name>:<Display Name>{{/code}}. Hinweis: Es kann hier zu keinen Verwechslungen kommen, da {{smallcaps}}Scss{{/smallcaps}}-Variablen keinen Doppelpunkt enthalten dürfen. Der Anzeigename darf Doppelpunkte erhalten, der Variablenname wird durch den ersten Doppeltpunkt abgetrennt.
231 ; Standardwert festlegen
232 : Um den Standardwert für die Variable festzulegen, kann der Wert direkt über den Editor eingegeben werden.
233 ; Hilfetext hinzufügen oder ändern
234 : Optional kann an jedem Editor ein Hilfetext angezeigt werden. Um einen Hilfetext hinzuzufügen oder den bestehenden Hilfetext zu ändern, kann links neben dem Editor auf das blaue Fragezeichen-Symbol ({{icon name="question-circle"/}}) gedrückt werden. Es öffnet sich ein Textfeld, wo der Text bearbeitet werden kann.
235
236 * Editoren-Typ, Breite, weitere Optionen, mehrspaltig?
237
238 === Einstellungen
239
240 {{figure image="plugin_theme_config_template_settings_1_de.png"}}
241 In den Einstellungen kann festgelegt werden, wie genau das {{smallcaps}}Scss{{/smallcaps}} in {{smallcaps}}Css{{/smallcaps}} umgewandelt wird und welche {{smallcaps}}Css{{/smallcaps}}-Dateien in der Vorschau deaktiviert werden sollen.
242 {{/figure}}
243
244 {{figure image="plugin_theme_config_template_settings_2_de.png"}}
245 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.
246 {{/figure}}
247
248 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:
249
250 ==== Einstellungen zur Ansicht ====
251
252 Hier können einige grundlegende Einstellungen zur Vorschau und zum Layout der Variableneditoren vorgenommen werden.
253
254 ; Mehrere Editoren pro Zeile erlauben
255 : Standardmäßig werden die Editoren für die einzelnen Variablen untereinander angezeigt. Wenn diese Option aktiviert ist, können Editoren auch nebeneinander angeordnet werden. Diese Funktionalität sollte mit Bedacht eingesetzt werden, da recht wenig Platz in der Breite zur Verfügung steht und der Nutzer so schnell verwirrt werden kann.
256 ; Basis-Theme in Vorschau deaktivieren
257 : Ist diese Option aktiviert, wird das durch {{formcycle /}} ausgeliefert Basis-{{smallcaps}}Css{{/smallcaps}} in der Vorschau deaktiviert. Ob diese Option aktiviert werden sollte, hängt davon ab, ob das {{smallcaps}}Scss{{/smallcaps}} auf dem Basis-{{smallcaps}}Css{{/smallcaps}} aufbaut oder eigenständig ist.
258 ; Modern-Theme in Vorschau deaktivieren
259 : Ist diese Option aktiviert, wird das durch {{formcycle /}} ausgeliefert Modern-Theme-{{smallcaps}}Css{{/smallcaps}} in der Vorschau deaktiviert. Ob diese Option aktiviert werden sollte, hängt davon ab, ob das {{smallcaps}}Scss{{/smallcaps}} auf dem Modern-Theme aufbaut oder nur das Basis-{{smallcaps}}Css{{/smallcaps}} benötigt.
260 ; Formular-Theme in Vorschau deaktivieren
261 : Ist diese Option aktiviert, wird das {{smallcaps}}Css{{/smallcaps}} deaktiviert, das im {{designer/}} im [[{{smallcaps}}Css{{/smallcaps}}-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]] eingegeben wurde.
262
263 ==== Einstellungen zur CSS-Ausgabe ====
264
265 {{figure image="plugin_theme_config_template_browserlist_de.png"}}
266 Über eine Browser-Query kann festgelegt werden, welche Ziel-Browser unterstützt werden sollen. Über die entsprechende Schaltfläche neben der Browser-Query kann die Liste der auf die Browser-Query zutreffenden Browser angezeigt werden.
267 {{/figure}}
268
269 In diesem Bereich können grundlegende Einstellungen für die {{smallcaps}}Css{{/smallcaps}}-Generierung vorgenommen werden, wie etwa ob das {{smallcaps}}Css{{/smallcaps}} minifiziert ausgegeben werden soll.
270
271 ; {{smallcaps}}Css{{/smallcaps}}-Ausgabemodus
272 : Ob das erzeugte {{smallcaps}}Css{{/smallcaps}} komprimiert werden soll oder für Menschen lesbarer ausgegeben wird.
273 :; COMPACT
274 :: Jeder Selektor mit all seinen Regeln wird in jeweils einer einzigen Zeile ausgegeben.
275 :; COMPRESSED
276 :: Es wird versucht, die Größe des {{smallcaps}}Css{{/smallcaps}} so gering wie möglich zu halten, etwa indem unnötige Leerzeichen und Zeilenumbrüche entfernt werden. In der Regel wird die {{smallcaps}}Css{{/smallcaps}}-Datei dadurch nur eine Zeile enthalten.
277 :; EXPANDED
278 :: Alle verschaltelten Selektoren im {{smallcaps}}Scss{{/smallcaps}} werden aufgelöst und ohne Einrückung ausgegeben. Jeder Selektor wird auf einer separaten Zeile ausgegeben.
279 :; NESTED
280 :: Im {{smallcaps}}Scss{{/smallcaps}} verschachtelte Regeln Selektoren durch Einrückung im {{smallcaps}}Css{{/smallcaps}} dargestellt.
281 ; Zu unterstützende Browser
282 : 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.
283 ; Anzahl der Leerzeichen für die Einrückung
284 : Falls in der Ausgabe Zeilen eingerückt werden, kann hier festgelegt werden, wieviele Leerzeichen pro Einrückungslevel verwendet werden sollen.
285 ; Genaugikeit für nummerische Berechnungen
286 : Die Genauigkeit (Anzahl der Kommastellen) für nummerische Berechnungen während der Transpilation, etwa wenn verschiedene {{smallcaps}}Css{{/smallcaps}}-Einheiten ineinander umgerechnet werden.
287 ; Kommentare erhalten
288 : Wenn diese Option aktiviert ist, werden Kommentare im {{smallcaps}}Scss{{/smallcaps}} nicht entfernt.
289
290 ==== Postcss-Einstellungen ====
291
292 Hier können einige Einstellungen für [[postcss>>url:https://github.com/postcss/postcss]] getroffen werden, um das erzeugte {{smallcaps}}Css{{/smallcaps}} nachzubearbeiten.
293
294 ; Doppelte {{smallcaps}}Css{{/smallcaps}}-Regeln entfernen
295 : 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.
296 ; Unterstützung für [[Polyfiller>>url:https://de.wikipedia.org/wiki/Polyfill]] für neue {{smallcaps}}Css{{/smallcaps}}-Features aktivieren
297 : 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).
298 ; Minimale {{smallcaps}}Css{{/smallcaps}}-Stage für unterstützte Features
299 : 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.
300
301 ==== Autoprefixer-Einstellungen ====
302
303 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).
304
305 ; Automatisches Hinzufügen von Präfixen aktivieren
306 : Wenn diese Option aktiviert ist, werden Vendor-Präfixe automatisch hinzugefügt.
307 ; Unbenötigte Präfixe entfernen
308 : 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.
309 ; Präfix für @supports-Regeln hinzufügen
310 : 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.
311 ; {{smallcaps}}Css{{/smallcaps}} einrücken wenn nicht minifiziert (Visual Cascade)
312 : Aktiviert die //cascade//-Option von //autprefixer// (Deklarationen am Doppelpunkt ausrichten).
313 ; Präfixe für Flexbox-Eigenschaften hinzufügen
314 : 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.
315 ; Präfixe für Rastereigenschaften (grid) hinzufügen
316 : 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.
317
318 == Changelog
319
320 === 0.6.1
321
322 * NPM-Abhängigkeiten aktualisiert, inklusive aktueller Browser-Liste
323 * Anpassungen an 031-extended.css auf Modern-Theme-SCSS-Vorlage übertragen.
324
325 === 0.6.0
326
327 * Gebaut gegen FORMCYCLE 6.3.0
328 * Es kann global eine Theme als globales Modern Theme gewählt werden
329 * Ein Theme kann sowohl als Mandantdatei als auch auch CSS-Template gespeichert werden. Zudem kann es auch nur als Modern-Theme gespeichert werden.
330 * Volle Breite für Formularvorschau. Die Auswahl des Formulars für die Vorschau kommt in Overlday-Dialog bei Klick auf das Zahnrad rechts oben.
331 * Beim Installieren des Plugins wird neben einer Modern-Theme-Editorkonfiguration auch eine Processing-Konfiguration erzeugt, falls diese noch nicht existiert.
332 * Kleinere Bug-Fixes
333
334 === 0.5.0
335
336 * Kleine Anpassungen UI
337 * Für Vorschau-Formular können HTML-Parameter gesetzt werden
338 * `Disable base theme` und `Disable base theme` sind nun Eigenschaften der Editorkonfiguration
339 * Neue Eigenschaft `Disable form theme`
340 * `postcss-discard-duplicates`-Plugin für postcss hinzugefügt
341 * 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.
342 * Ä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.
343
344 === 0.4.0
345
346 * Anpassung Styling & Layout
347 * Möglichkeit für einspaltige Darstellungen analog zum Designer
348
349 === 0.3.0
350
351 * Postprocessing / Prefixing für CSS
352 * Import / Export überarbeitet, Konflikresolution
353
354 === 0.2.0
355
356 * Unterstützung der Auswahl von mehreren Dateien
357
358 === 0.1.0
359
360 * Initialer Release. Gebaut gegen V6.1-SNAPSHOT, scheint auch in V6.0 zu funktionieren.

Navigation

Copyright 2000-2025