... |
... |
@@ -78,11
+78,15 @@ |
78 |
78 |
Mittels der entsprechenden Schaltfläche in der Liste links kann ein neues Layout basierend auf einer Layout-Vorlage erstellt werden. |
79 |
79 |
{{/figure}} |
80 |
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. |
|
81 |
+{{figure image="plugin_theme_config_default_modern_theme_de.png"}} |
|
82 |
+ 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//). |
|
83 |
+{{/figure}} |
82 |
82 |
|
|
85 |
+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. |
|
86 |
+ |
83 |
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 |
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. |
|
89 |
+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. |
86 |
86 |
|
87 |
87 |
In der Aktionsleiste ganz unten gibt es drei Aktionsmöglichkeiten: |
88 |
88 |
|
... |
... |
@@ -103,6
+103,10 @@ |
103 |
103 |
|
104 |
104 |
=== Editierbereich |
105 |
105 |
|
|
110 |
+{{figure image="plugin_theme_config_css_design_files_de.png"}} |
|
111 |
+ Es ist auch möglich, ein Layout statt als Mandantdatei unter [[Design (CSS)>>doc:Formcycle.UserInterface.FilesAndTemplates.Design]] abzuspeichern. Es kann dann im {{designer/}} als Theme für ein Formular verwendet werden. |
|
112 |
+{{/figure}} |
|
113 |
+ |
106 |
106 |
Im Editierbereich rechts kann das Layout bearbeitet werden. Der Editierbereich gliedert sich in zwei Abschnitte. |
107 |
107 |
|
108 |
108 |
Im ersten Abschnitt werden einige allgemeine Einstellungen zum Layout vorgenommen: |
... |
... |
@@ -121,16
+121,16 @@ |
121 |
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 |
122 |
|
123 |
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. |
|
132 |
+ Durch Klick auf das Plussymbol 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 |
125 |
{{/figure}} |
126 |
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. |
|
135 |
+Um eine neue Layout-Vorlage zu erstellen, kann auf das Plussymbol ({{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 |
128 |
|
129 |
129 |
Nach Auswahl einer Layout-Vorlage durch Klick auf diese in der linken Liste kann die Layout-Vorlage bearbeitet werden. |
130 |
130 |
|
131 |
131 |
=== SCSS-Vorlage |
132 |
132 |
|
133 |
|
-{{figure image="plugin_theme_config_scss_de.png"}} |
|
141 |
+{{figure image="plugin_theme_config_template_scss_de.png"}} |
134 |
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 |
135 |
{{/figure}} |
136 |
136 |
|
... |
... |
@@ -233,7
+233,7 @@ |
233 |
233 |
; Standardwert festlegen |
234 |
234 |
: Um den Standardwert für die Variable festzulegen, kann der Wert direkt über den Editor eingegeben werden. |
235 |
235 |
; Hilfetext hinzufügen oder ändern |
236 |
|
-: 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. |
|
244 |
+: 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 Fragezeichensymbol ({{icon name="question-circle"/}}) gedrückt werden. Es öffnet sich ein Textfeld, wo der Text bearbeitet werden kann. |
237 |
237 |
; Breite des Editor ändern |
238 |
238 |
: Falls die Einstellung aktiviert wurde, mehrere Editorem nebeneinander anzuordnen: Beim Überfahren des Editors mit der Maus erscheint rechts oben eine Leiste, wo die relative Breite des Editor geändert werden kann. Diese Breite ist relativ zu den Breite der anderen Editoren in der gleichen Zeile. |
239 |
239 |
; Editor an eine andere Stelle schieben |
... |
... |
@@ -330,21
+330,21 @@ |
330 |
330 |
|
331 |
331 |
=== 0.6.0 |
332 |
332 |
|
333 |
|
-* Gebaut gegen FORMCYCLE 6.3.0 |
334 |
|
-* Es kann global eine Theme als globales Modern Theme gewählt werden |
335 |
|
-* Ein Theme kann sowohl als Mandantdatei als auch auch CSS-Template gespeichert werden. Zudem kann es auch nur als Modern-Theme gespeichert werden. |
336 |
|
-* Volle Breite für Formularvorschau. Die Auswahl des Formulars für die Vorschau kommt in Overlday-Dialog bei Klick auf das Zahnrad rechts oben. |
337 |
|
-* Beim Installieren des Plugins wird neben einer Modern-Theme-Editorkonfiguration auch eine Processing-Konfiguration erzeugt, falls diese noch nicht existiert. |
338 |
|
-* Kleinere Bug-Fixes |
|
341 |
+* Anpassungen für FORMCYCLE 6.3.x. |
|
342 |
+* Es kann ein Layout als Standard-Modern-Theme gewählt werden. |
|
343 |
+* Ein Layout kann sowohl als Mandantdatei als auch auch CSS-Template gespeichert werden. Zudem kann es auch nur als Standard-Modern-Theme gespeichert werden. |
|
344 |
+* Volle Breite für Formularvorschau. Die Auswahl des Formulars ist nun in einem Overlday-Dialog, der bei Klick auf das Zahnradsymbol rechts oben erscheint. |
|
345 |
+* 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). |
|
346 |
+* Kleinere Bug-Fixes. |
339 |
339 |
|
340 |
340 |
=== 0.5.0 |
341 |
341 |
|
342 |
|
-* Kleine Anpassungen UI |
343 |
|
-* Für Vorschau-Formular können HTML-Parameter gesetzt werden |
344 |
|
-* `Disable base theme` und `Disable base theme` sind nun Eigenschaften der Editorkonfiguration |
345 |
|
-* Neue Eigenschaft `Disable form theme` |
|
350 |
+* Kleine Anpassungen an der Oberfläche. |
|
351 |
+* Am Vorschauformular können nun auch URL-Parameter gesetzt werden. |
|
352 |
+* `Basis-Theme in Vorschau deaktivieren` und `Modern-Theme in Vorschau deaktivieren` sind nun Eigenschaften der Layout-Vorlage |
|
353 |
+* Neue Eigenschaft `Formular-Theme in Vorschau deaktivieren` |
346 |
346 |
* `postcss-discard-duplicates`-Plugin für postcss hinzugefügt |
347 |
|
-* 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. |
|
355 |
+* Bei SCSS-Import-URLs kann an die URL der Parameter `previewOnly` angehangen werden. Die Dateien werden dann nur für die Vorschau inkludiert, nicht im transpilierten CSS. |
348 |
348 |
* Ä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. |
349 |
349 |
|
350 |
350 |
=== 0.4.0 |