[Beta] Material Design

[alltime]

Weil ich es gerade bei den Issues auf GitHub gelesen habe:
SF#62 Collapse sidebar on mobile devices

Die beiden Plugins Menu und Header zusammen mit dem Material Design ermöglichen das ausblenden und überblenden der NavbarLeft auf Mobilgeräten.
Bei größeren Displays bleibt die NavbarLeft fixiert.

[Incognito666]

Hi,
ich habe das design nun probiert. Ich muss sagen, das ist schon sehr schick! Was mir aber noch aufgefallen ist:

- wenn ich auf meinen Android Handy (chrome) auf einen Menüeintrag in der NavbarLeft tappe, wird das oft erst beim zweiten Versuch akzeptiert. Ich habe das Gefühl, dass das vermehrt auftritt, wenn ich in der Navbar scrolle.

- ich fände es gut, wenn ein Tap auf der Navbar erst akzeptiert wird, wenn der Finger entfernt wird. Beim antippen sollte ein Feedback z.B. graues hinterlegen des Menüeintrags erscheinen.

Das erste ist manchmal etwas störend, das zweite eher nice to have.

Grüße
Matthias

[alltime]

Danke für's testen!

Bei mir ist es gefühlt das Gegenteil. Wenn ich versuche zu scrollen passiert es mir sehr leicht, dass ich eine Seite ungewollt anwähle. Darum geht die Größe eines Menüeintrags nicht über die volle Breite. Klickst du vielleicht zu weit rechts auf den Eintrag?
Der Eintrag sollte nur gewählt werden wenn beim Loslassen der Maustaste der Zeiger noch über dem Eintrag ist. Weiß jemand wie ich das in einem Plugin lösen kann?

Der zweiten Punkt ist schnell erledigt. Ich wollte eh noch ein Update veröffentlichen.

[alltime]

Ok, hab es schon herausgefunden:

if( isCanceled ) return;

[alltime]

Update ist auf GitHub verfügbar. Jetzt sollte das Menü besser anwählbar sein. Außerdem habe ich mal alles in Indigo eingefärbt damit man sieht was möglich ist.

Passende Screenshots habe ich im ersten Beitrag hinzugefügt.

[Tqm]

Hallo Tim!

Wunderbare Arbeit!
Nun habe ich es auch bei mir eingepflegt, aber so ganz will es dann doch nicht auf Anhieb ...

Ich habe einfach mal eine bestehende Config kopiert und erwartete einfach Deine Desktop Variante gelingt jedoch nicht ganz.
Im linken Menü werden die Raumbezeichnungen einfach irgendwie abgeschnitten, also habe ich bei den ersten beiden Räumen die Icons gelöscht da ich diese im Verdacht hatte => keine Verbesserung
Zwischen dem Linken Menü und der Visu-Seite entsteht ein Abstand, welcher dann am Ende der Visu-Seite fehlt
Ein Schalter Ein/Aus wird nur mit 0 und 1 dargestellt
Die Icons im Ordner designs/material/images werden nicht dargestellt (auch nicht im Browser auf GIT-Hub selbst - hat das damit etwas zu tun?)

2. Versuch (grün eingerahmt)
Ich habe nun in der Config das von mir angelegte Menü gelöscht und Dein Plugin "menu" aktiviert
Den Eintrag in der Config für die Nahbar habe ich wie folgt geändert:
navbar position="left">
<menu/>
</navbar>

[alltime]

Um die Schalter zu sehen musst du die Icons in der config einbinden und ein Mapping erstellen:

<meta>
    <icons>
      <icon-definition name="switch_on" uri="config/media/material/switch_on_indigo.png"/>
      <icon-definition name="switch_off" uri="config/media/material/switch_off_2.png"/>
...
    </icons>
    <mappings>
            <mapping name="OnOff">
        <entry value="0">
          <icon name="switch_off"/>
        </entry>
        <entry value="1">
          <icon name="switch_on"/>
        </entry>
...
      </mapping>
...

Der Abstand zwischen Navbar und Hauptseite entsteht, da ich in der CSS Datei mit einer festen Breite von 250 rechne.
Bis jetzt muss das leider noch so sein (Navbar auf Mobilgeräten dynamisch ein und ausblenden).
Damit das Menu mit dem Plugin erscheint musst du dynamich="true" verwenden. Deine Navbar sollte so definiert sein:

<navbar position="left" dynamic="true" width="250">

Damit ich das Problem mit deiner eigenen Menüleiste lösen kann bräuchte ich den Config Abschnitt von deiner <navbar position="left">.

[Tqm]

Ah, meine Navbar! (der Rest funktioniert schon wunderbar!):

<navbar position="left" dynamic="true" width="250px">
<group name="Uhrzeit Datum">
<layout colspan="12"/>
<group nowidget="true">
<layout colspan="12"/>
<strftime lang="de" format="%H:%M" class="timebig">
<layout colspan="12"/>
</strftime>
<strftime lang="de" format="%A, %d. %B %Y" class="timedate">
<layout colspan="12"/>
</strftime>
</group>
</group>
<group name="Räume">
<pagejump target="Wohnzimmer" name="Wohnzimmer">
<label>
</label>
</pagejump>
<pagejump target="Essbereich" name="Essbereich">
<label>
</label>
</pagejump>
<pagejump target="Kueche" name="Küche">
<label>
<icon name="scene_cooking" color="orange"/>
</label>
</pagejump>
<pagejump target="Vorraum" name="Vorraum">
<label>
<icon name="scene_hall" color="orange"/>
</label>
</pagejump>
<pagejump target="Buero" name="Büro">
<label>
<icon name="scene_office" color="orange"/>
</label>
</pagejump>
<pagejump target="Kinderzimmer" name="Kinderzimmer">
<label>
<icon name="scene_childs_room" color="orange"/>
</label>
</pagejump>
<pagejump target="Badezimmer" name="Badezimmer">
<label>
<icon name="scene_bath" color="orange"/>
</label>
</pagejump>
<pagejump target="Schlafzimmer" name="Schlafzimmer">
<label>
<icon name="scene_sleeping" color="orange"/>
</label>
</pagejump>
<pagejump target="Keller" name="Keller">
<label>
<icon name="scene_workshop" color="orange"/>
</label>
</pagejump>
</group>
</navbar>

[alltime]

Ich meinte von deinem eigenen Menü, sprich die ganzen Pagejumps usw.

Beim <menu> müsstest du den dynamic tag und die Breite einbauen.

[Tqm]

Habe ich oben entsprechend korrigiert ...


Kannst Du mir das mit Deinem Plugin "menu" bitte auch nochmal erklären - DANKE!

Beim <menu> müsstest du den dynamic tag und die Breite einbauen.

????

[Incognito666]

Habe grad die aktuelle Version auf develop probiert. Komme leider nicht weit. Ich kann das Menü öffnen, aber dann kann ich nichts mehr machen. Also weder das Menü schließen, noch einen Menüeintrag auswählen. Hab mit deiner Demo config getestet.

[alltime]

Bitte nochmal probieren, mit den geänderten Dateien sollte es wieder funktionieren. Ich hatte heute Abend daran gearbeitet. Jetzt sollte das Menü auch für configs funktionieren, die nicht mit meinem Parser erzeugt wurden.

[Tqm]

Hmm, ich kann keine Änderung feststellen ...

[alltime]

Nachdem du die Dateien aktualisiert hast, hast du da den Cache gelöscht und die Seite komplett neu geladen? Oder zumindest in der Cometvisu einen refresh durchgeführt?

... ?forceReload=true

Das Menü muss so eingebunden werden:

[COLOR=#34bbc7][FONT=Menlo][SIZE=11px]<navbar[/SIZE][/FONT][/COLOR][COLOR=#34BD26][FONT=Menlo][SIZE=11px] position="left" dynamic="true" width="250px"[/SIZE][/FONT][/COLOR][COLOR=#34bbc7][FONT=Menlo][SIZE=11px]>
   <menu/>
<navbar/>[/SIZE][/FONT][/COLOR]

[Incognito666]

Also bei mir geht mit den aktuellen stand nichts. Hab grad nochmal gepullt und keine lokalen Änderungen. Ich kann nur das Menü aufmachen, aber dann scheint alles zu hängen, egal was ich drück es reagiert nichts. Cache is gelöscht und forceReload gesetzt. Hab ein Galaxy S4 mit cyanogenmod 13 (Android 6.0).
Edit: mit Firefox gehts. Mit Chrome und dem Stock Browser nicht. Eigenartig.. Auf nem LG G2 (5.0) gehts auch.