search

4teamwork / ftw.simplelayout

SimpleLayout provides block based content pages
4 stars 1 forks source link

Improve Simplelayout Frontend #514

Open elioschmutz opened 5 years ago

elioschmutz commented 5 years ago

Erneuerung Simplelayout Frontend

Das Frontend ist veraltet und soll erneuert werden.

Das bisherige Frontend wurde mit jQuery, jQuery-UI und einem selbstgebautem Statemanager umgesetzt. Neu haben wir die Möglichkeit, alle Komponenten mit einem der neuen Frontend-Frameworks abzulösen. VueJS bietet alle nötigen Features welche für eine Erneuerung des Frontends benötigt werden. Viele Prozesse werden dabei Standardisiert (testing, build, state...) und vereinfacht die Einarbeitung, das Testing sowie die Erweiterbarkeit.

Features:

Multi-Slot

Das bisherige Simplelayout unterstützt momentan mehrere Slots. So können z.b. Simplelayout-Blöcke vom Hauptslot in eine Portletspalte verschoben. Für VueJS bedeutet dies, dass wir mehrere Vue-Apps benötigen. Jede App repräsentiert einen Slot welcher mit Layouts und Blöcken gefüllt werden kann. Jede App greift auf den gleichen Store zurück um den State bei allen Apps immer aktuell zu halten.

bildschirmfoto 2019-02-12 um 08 22 09

Layout & Block Drag&Drop

Bisher wurde jQuery-UI Draggable verwendet. Dies kann mit Vue.Draggable ersetzt werden, welches die SortableJS-Library verwendet.

screen2

Toolbar

Über die Toolbar auf der rechten Seite können neue Blöcke oder Layouts in die Seite eingefügt werden. Das Konzept mit der Toolbar ist generell gut. Der grösste Vorteil bei einer solchen Tollbar ist, dass ein Block direkt dort erstellt werden kann wo er auch hin soll. Es gibt jedoch zum Teil Probleme bei der Übersichtlichkeit, v.a. mit vielen Inhaltstypen.

Eine Variante für eine einfachere Bedienbarkeit mit vielen Typen ist, die Blöcke über einen Button direkt im Layout erstellen zu könnnen.

screen2

Dadurch ist es möglich, dem Benutzer viel mehr Informationen zu den verschiedenen Blöcken darzustellen und z.B. auch einen Type-Filter einzubauen. Das Platzproblem ist behoben und man könnte Benutzerfreundlich steuern, welche Inhalte in welchem Layout erstellt werden können.

Ein solches UI wäre auch selbsterklärender. Viele Benutzer mit wenig Computererfahrung tun sich am Anfang schwer mit dem Drag&Drop der Toolbar.

Zu den grössten Nachteilen gehört neben den zusätzlichen Klicks, dass ein Block nach dem Erstellen u.U. noch an den richtigen Platz verschoben werden muss. Wenn der Benutzer gezielt mit Layouts arbeitet, ist dieser Nachteil marginal.

⚠️ Dies soll noch kein genaues Konzept sondern lediglich neue Gedanken sein. Beide Varianten haben Vor- und Nachteile. Wir müssen herausfinden, was den Benutzern wirklich wichtig ist. Natürlich kann die Toolbar wie sie jetzt ist auch noch verbessert werden oder genau so übernommen werden.

Layouts

Ebenfalls über die Toolbar können momentan neue Layouts in die Seite eingefügt werden. Mit dem neuen Frontend könnten Layouts direkt im Inhaltsbereich angepasst werden. Ein Benutzer kann also auch nachträglich z.B. die Spaltenanzahl oder das Verhältnis anpassen:

bildschirmfoto 2019-02-12 um 09 40 18

Weil auch hier mehr Platz zur Verfügung stehen würde, können auch Funktionen wie "Farben" oder "Goldener Schnitt" usw. besser erklärt und dargestellt werden.

Feature-Ideen

Hier eine kleine Liste mit weiteren möglichen Features:

Edit/View Mode

Ein Editor kann die Seite in den Editmodus schalten und danach die Seite Bearbeiten. So ist er sich bewusst, dass er im Bearbeitungsmodus ist und hat dann auch mehr Möglichkeiten. Die Stärke mit der bisherigen Umsetzung ist, dass der Editor die Seite direkt so sieht, wie sie später wird und kann direkt bearbeiten, wenn er will. Das wäre mit einer Integration der Toolbar in den Inhaltsbereich nicht mehr sinnvoll, weil es zu viel "noisy" wäre. Trotzdem, mit einem eingeschalteten Edit-Modus kann dem Benutzer viel besser gezeigt werden, wo er was machen kann.

Undo/Redo

Ein Layout verschieben, die Spalten anpassen, einen Block hinein verschieben und danach alles Schritt für Schritt wieder Rückgängig machen.

Vererbung

Vererbbare Blöcke erstellen.

Demo

Hier eine kleine Demo welche den Shared-Store mit 5 Slots (Center, Links, Rechts, Footer-1, Footer-2), Verschieben von Layouts und Blöcken sowie die Integrierte Toolbar zeigt:

https://elioschmutz.github.io/vue-sl-example/

⚠️ Die Demo ist eher abstrakt gedacht!

elioschmutz commented 5 years ago

@maethu Anbei eine genauere Analyse oder Spezifikation wie die Problematiken mit

gelöst werden können.

Trennung Ansicht-Modus und Edit-Modus:

Vererbung:

Mockup:

screen2

Der State auf dem Server sieht momentan wie folgt aus:

{
  default: [
    {
      config: { golden_ratio: 'golden-ratio'},
      cols: [{ blocks: [] }, { blocks: [{ uid: 'uid-block-1' }] }]
    },
    { config: {}, cols: [{ blocks: [] }, { blocks: [] }, { blocks: [] }, { blocks: [] }] }
  ]
  portletright: [
    {
      config: {},
      cols: [{ blocks: [{ uid: 'uid-block-2' }] }]
    }
  ]
}

Problem:

neu:

{
  default: [
    {
      uid: 'layout1',
      config: { golden_ratio: 'golden-ratio'},
      cols: [{ blocks: [] }, { blocks: [{ uid: 'uid-block-1' }] }]
    },
    {
      uid: 'layout2',
      config: {},
      cols: [{ blocks: [] }, { blocks: [] }, { blocks: [] }, { blocks: [] }] }
  ]
  portletright: [
    {
      uid: 'layout3',
      config: {},
      cols: [{ blocks: [{ uid: 'uid-block-2' }] }]
    }
  ]
}

State mit einem Layout, welches vererbt werden soll:

{
  default: [
    {
      uid: 'layout1',
      inherit: true,
      config: {},
      cols: [{ blocks: [{ uid: 'uid-block-1' }] }]
    },
  ]
}

State für Unterseite mit vererbtem Layout: keine Änderung im State, beim Rendern der Seite werden die vererbten Layouts von den Parents abgeholt.

{
  default: [
    {
      uid: 'layout4',
      config: {},
      cols: [{ blocks: [] }]
    },
  ]
}

State für Unterseite mit unterbrochener Layoutvererbung:

{
  default: [
    {
      uid: 'layout4',
      config: {},
      cols: [{ blocks: [] }]
    },
  ]
  inheritance: {
    blocked: ['layout1']
  }
}

Nested Layouts

{
  default: [
    { type: 'layout'
      uid: 'layout1',
      config: {},
      cols: [{ blocks: [
        { type: 'block', uid: 'uid-block-1' }
        { type: 'layout', uid: 'layout-2', config: {}, cols: [{}{}] }
        ] }]
    },
  ]
}

ℹ️ mit den o.g. Vorschlägen sollte es ohne grossen Aufwand möglich sein, das neue Simplelayout mit einem Feature-Flag umsetzten zu können. D.h. es ist jederzeit möglich, zurück zum klassischen Simplelayout wechseln zu können.