Änderungen von Dokument Theme-Konfigurator-Plugin

Von Version < 15.68 >

bearbeitet von awa
am 20.03.2020, 09:43

Auf Version < 15.69 >

bearbeitet von tkr
am 23.03.2020, 15:42

< >

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

Rohform
Im Layout

Zusammenfassung

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

Details

Seiteneigenschaften

Dokument-Autor

@@ -1,1
          +1,1 @@
--XWiki.awa
++XWiki.tkr

Inhalt

@@ -1,4
          +1,4 @@
--{{content /}}
++{{content/}}
  {{figure image="plugin_theme_config_home_de.png"}}
    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//.
@@ -10,28
          +10,30 @@
  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/||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.
++; 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/||rel="noopener noreferrer" 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.
++;
++
  Wird das Plugin installiert, wird automatisch eine erste Layout-Vorlage im System angelegt. Diese enthält das mit {{formcycle/}} ausgelieferte //Modern-Theme//.
  Technisch werden durch Layout-Vorlagen {{smallcaps}}Scss{{/smallcaps}}-Dateien mit Variablen definiert. Durch Layouts wird diesen Variablen jeweils ein Wert zugewiesen.
--== Allgemeine Hinweise
++== Allgemeine Hinweise ==
--=== Rollenrechte
++=== Rollenrechte ===
  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.
--=== Vollbildmodus
++=== Vollbildmodus ===
  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.
  === Export ===
--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.
++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.
  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.
@@ -39,7
          +39,7 @@
  Falls dabei Layout-Vorlagen oder Layouts überschrieben werden würden, erscheint ein Dialog mit einem entsprechenden Hinweis und möglichen Optionen.
--=== Dateiablage
++=== Dateiablage ===
  {{figure image="plugin_theme_config_client_files_de.png"}}
    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.
@@ -58,21
          +58,21 @@
  ; .css
  : Steht für //cascading style sheet//. Eine {{smallcaps}}Css{{/smallcaps}}-Datei, die aus einem Layout generiert wurde.
--=== Behebung fehlender oder falscher Referenzen
++=== Behebung fehlender oder falscher Referenzen ===
  {{figure image="plugin_theme_config_error_resolution_de"}}
    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.
  {{/figure}}
--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.
++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 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, zum Beispiel indem eine neue Layout-Vorlage erstellt wird oder eine andere Vorlage genutzt wird.
--== Erstellen eines Layouts
++== Erstellen eines konkreten Layouts ==
  {{figure image="plugin_theme_config_layout_settings_de.png"}}
    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.
  {{/figure}}
--=== Allgemeine Aktionen
++=== Allgemeine Aktionen ===
  {{figure image="plugin_theme_config_new_layout_de.png"}}
    Mittels der entsprechenden Schaltfläche in der Liste links kann ein neues Layout basierend auf einer Layout-Vorlage erstellt werden.
@@ -82,11
          +82,11 @@
    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.
++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, in dem 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.
--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.
++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:
@@ -95,9
          +95,9 @@
  ; CSS herunterladen
  : Falls notwendig, kann hier das {{smallcaps}}Css{{/smallcaps}} heruntergeladen werden, welches aus dem aktuellen Layout mit den aktuellen Einstellungen erzeugt wurde.
  ; Speichern
--: 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.
++: Speichert die aktuelle Konfiguration des Layouts. 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.
--=== Vorschaubereich
++=== Vorschaubereich ===
  {{figure image="plugin_theme_config_preview_settings_de.png"}}
    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.
@@ -105,7
          +105,7 @@
  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.
--=== Editierbereich
++=== Editierbereich ===
  {{figure image="plugin_theme_config_css_design_files_de.png"}}
    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.
@@ -124,9
          +124,9 @@
  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.
--== Erstellen einer Layout-Vorlage
++== Erstellen einer Layout-Vorlage ==
--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.
++Eine Layout-Vorlage besteht aus zwei Teilen. Zum Einen muss eine {{smallcaps}}Scss{{/smallcaps}}-Datei erstellt 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.
  {{figure image="plugin_theme_config_new_template_de.png"}}
    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.
@@ -136,7
          +136,7 @@
  Nach Auswahl einer Layout-Vorlage durch Klick auf diese in der linken Liste kann die Layout-Vorlage bearbeitet werden.
--=== SCSS-Vorlage
++=== SCSS-Vorlage ===
  {{figure image="plugin_theme_config_template_scss_de.png"}}
    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.
@@ -144,9
          +144,9 @@
  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||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.
++Es können dabei sogenannte [[{{smallcaps}}Scss{{/smallcaps}}-Variablen>>url:https://sass-lang.com/documentation/variables||rel="noopener noreferrer" 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||rel="noopener noreferrer" 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:
++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:
  {{code language="scss"}}
    // Generated automatically by the system
@@ -209,7
          +209,7 @@
  @import "client/current/file.scss?previewOnly";
  {{/code}}
--=== Editorkonfiguration
++=== Editorkonfiguration ===
  {{figure image="plugin_theme_config_editor_config_de.png"}}
    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.
@@ -220,7
          +220,7 @@
  * mit welchem Editor die Variable bearbeitet werden kann (wie etwa Texteditor, Dateieditor, Pixeleditor); und
  * an welcher Stelle der Oberfläche der Editor später erscheinen wird.
--Die Konfiguration funktioniert ähnlich zum {{designer /}}:
++Die Konfiguration funktioniert ähnlich zum {{designer/}}:
  * 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.
  * Alle Editoren werden in Fieldsets gruppiert. Dies sorgt für eine klarere Gliederung und erhöht die Lesbarkeit.
@@ -229,7
          +229,7 @@
  * Wurde eine neue Layout-Vorlage angelegt, gibt es zunächst nur einen Knopf: //Neue Gruppe//. Hiermit wird eine neue Gruppe (Fieldset) angelegt.
  * In dieser Gruppe gibt es nur erneut einen Knopf: //Neuer Editor//. Dieser fügt einen neuen Texteditor mit Standardeinstellungen zur Gruppe hinzu.
--* 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).
++* 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 (beziehungsweise über den Freiraum überhalb der ersten und unterhalb der letzten Gruppe).
  * 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).
  An jedem Editor sind nun folgende Einstellungen möglich:
@@ -237,7
          +237,7 @@
  ; Variablenname und Anzeigename festlegen
  : 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.
  ; Typ des Editors ändern
--: Beim Überfahren des Editors mit der Maus erscheint rechts oben eine Leiste, wo der Type des Editor geändert werden kann. Zur Auswahl stehen hier verschiedene Editoren, wie einfach Texteditoren, Farbwähler, Pixeleditoren oder Dateiwähler. Einige Editoren haben zusätzliche Einstellungen.  In dem Fall erscheint rechts neben dem Editortyp in der Leiste ein Zahnradsymbol ({{icon name="gear" /}}). Ein Klick auf dieses Symbol öffnet einen Dialog mit den entsprechenden Einstellungen. Beispielsweise hat der //DecimalRangeEditor// zusätzliche Einstellungen für den Mindestwert, Maximalwert und die Schrittweite.
++: Beim Überfahren des Editors mit der Maus erscheint rechts oben eine Leiste, wo der Type des Editor geändert werden kann. Zur Auswahl stehen hier verschiedene Editoren, wie einfach Texteditoren, Farbwähler, Pixeleditoren oder Dateiwähler. Einige Editoren haben zusätzliche Einstellungen. In diesem Fall erscheint rechts neben dem Editortyp in der Leiste ein Zahnradsymbol ({{icon name="gear"/}}). Ein Klick auf dieses Symbol öffnet einen Dialog mit den entsprechenden Einstellungen. Beispielsweise hat der //DecimalRangeEditor// zusätzliche Einstellungen für den Mindestwert, Maximalwert und die Schrittweite.
  ; Standardwert festlegen
  : Um den Standardwert für die Variable festzulegen, kann der Wert direkt über den Editor eingegeben werden.
  ; Hilfetext hinzufügen oder ändern
@@ -245,11
          +245,11 @@
  ; Breite des Editor ändern
  : 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.
  ; Editor an eine andere Stelle schieben
--: Jeder Editor kann per Drag&Drop an eine andere Stelle geschoben werden. Der Editor kann an jeder Stelle und auch an dem Anfassen-Symbol ({{icon name="arrows" /}}) angefasst werden.
++: Jeder Editor kann per Drag&Drop an eine andere Stelle geschoben werden. Der Editor kann an jeder Stelle und auch an dem Anfassen-Symbol ({{icon name="arrows"/}}) angefasst werden.
  ; Editor löschen
--: Beim Überfahren des Editors mit der Maus erscheint rechts oben eine Leiste mit einem Papierkorbsymbol ({{icon name="trash" /}}). Ein Klick auf dieses Symbol löscht den Editor.
++: Beim Überfahren des Editors mit der Maus erscheint rechts oben eine Leiste mit einem Papierkorbsymbol ({{icon name="trash"/}}). Ein Klick auf dieses Symbol löscht den Editor.
--=== Einstellungen
++=== Einstellungen ===
  {{figure image="plugin_theme_config_template_settings_1_de.png"}}
    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.
@@ -268,9
          +268,9 @@
  ; Mehrere Editoren pro Zeile erlauben
  : 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.
  ; Basis-Theme in Vorschau deaktivieren
--: 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.
++: 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.
  ; Modern-Theme in Vorschau deaktivieren
--: 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.
++: 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.
  ; Formular-Theme in Vorschau deaktivieren
  : 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.
@@ -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||target="_blank"]]. 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||rel="noopener noreferrer" 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||target="_blank"]] getroffen werden, um das erzeugte {{smallcaps}}Css{{/smallcaps}} nachzubearbeiten.
++Hier können einige Einstellungen für [[postcss>>url:https://github.com/postcss/postcss||rel="noopener noreferrer" 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||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).
++; Unterstützung für [[Polyfiller>>url:https://de.wikipedia.org/wiki/Polyfill||rel="noopener noreferrer" 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||rel="noopener noreferrer" 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||rel="noopener noreferrer" 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||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.
++: Bestimmt die [[{{smallcaps}}Css{{/smallcaps}}-Stage>>url:https://cssdb.org/#staging-process||rel="noopener noreferrer" 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||rel="noopener noreferrer" target="_blank"]]-Plugin potentiell mit einem Polyfill versehen zu werden.
  ==== Autoprefixer-Einstellungen ====
--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).
++In diesem Abschnitt kann das [[autprefixer>>url:https://github.com/postcss/autoprefixer||rel="noopener noreferrer" target="_blank"]]-Plugin für [[postcss>>url:https://github.com/postcss/postcss||rel="noopener noreferrer" target="_blank"]] konfiguriert werden. Diese fügt automatisch [[Vendor-Präfixe>>url:https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix||rel="noopener noreferrer" 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,17
          +321,17 @@
  ; 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||target="_blank"]]-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||rel="noopener noreferrer" 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/||target="_blank"]]-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/||rel="noopener noreferrer" 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/||target="_blank"]]-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/||rel="noopener noreferrer" target="_blank"]]-Eigenschaften hinzugefügt.
--== Changelog
++== Changelog ==
--=== 0.7.0
++=== 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.
@@ -338,21
          +338,21 @@
  * Kleine Darstellungsfehler an der Oberfläche behoben.
  * Browser-Liste aktualisiert.
--=== 0.6.1
++=== 0.6.1 ===
  * Browser-Liste aktualisiert.
  * Anpassungen an 031-extended.css auf Modern-Theme-{{smallcaps}}Scss{{/smallcaps}}-Vorlage übertragen.
--=== 0.6.0
++=== 0.6.0 ===
  * 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.
++* Volle Breite für Formularvorschau. Die Auswahl des Formulars ist nun in einem Overlay-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
++=== 0.5.0 ===
  * Kleine Anpassungen an der Oberfläche.
  * Am Vorschauformular können nun auch URL-Parameter gesetzt werden.
@@ -362,22
          +362,22 @@
  * 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
++=== 0.4.0 ===
  * Anpassung an der Oberfläche.
  * Möglichkeit zur einspaltigen Darstellung von Editoren.
--=== 0.3.0
++=== 0.3.0 ===
  * 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
++=== 0.2.0 ===
  * Unterstützung der Auswahl von mehreren Dateien für den Export.
--=== 0.1.0
++=== 0.1.0 ===
  * Initialer Release.
  * Unterstützt {{formcycle/}} in Version 6.1.x.

Änderungen von Dokument Theme-Konfigurator-Plugin

Zusammenfassung

Details

Navigation