Menu-plugin #1419

Closed dezhidki closed 2 years ago

In GitLab by @vivanauk on Jun 20, 2019, 12:09

Halutaan plugin, jolla saa luotua pudotusvalikkoja dokumentteihin, esim. kuten Ohj2:ssa:

kuvakaappaus

Tuota voisi lähetä lähestymään niin, että miettisi miltä näyttää YAML, jolla esim tuo Ohj2 menurakenne kuvataan.

Jättääkö niin, että itse linkit kuvataan suoraan MD:llä:

- text: [Demot](demot)

jne, jolloin tekijän pitäisi osata laittaa niihin myös tarvittaessa kuvia yms.

Ja saako tuon samaan tyyliin kuin TimTablessa että jos jossakin on vain text-attribuutti, niin riittää kirjoittaa pelkkä sisältö ilman attribuuti nimeä jotta menun esitys olisi mahdollisimman kompakti.

tuo on minusta niin helppo tehdä että se kannattaa tehdä ihan itse niin saa juuri sellaisen kun haluaa.

Esteettömyyttä varten siihen pitää saada opitio jossa ei ole tuollaisia hover juttuja, koska ne eivät toimi kunnolla lukulaitteilla.

In GitLab by @vivanauk on Jul 10, 2019, 14:59

Nyt siis voi kirjoittaa:

menu: |!!
 - Kissaeläimet
   - [Leijonat](http://192.168.99.100)
   - [**Kotikissat**](http://192.168.99.100)
      - Angorat
      - Maatiaskissat
        - Miuku
        - Kissi
   - [Pantterit](http://192.168.99.100)
     - Vaaleanpunainen pantteri
   - [Jaguaarit](http://192.168.99.100)
   - *Sapelihammastiikerit*
!!

joka palvelimella muunnetaan tähän muotoon:

[{level: 0, text: '<p>Kissaeläimet</p>'}, 
{level: 1, text: '<p><a href="http://192.168.99.100">Leijonat</a></p>'}, 
{level: 1, text: '<p><a href="http://192.168.99.100"><strong>Kotikissat</strong></a></p>'}, 
{level: 2, text: '<p>Angorat</p>'}, 
{level: 2, text: '<p>Maatiaskissat</p>'}, 
{level: 3, text: '<p>Miuku</p>'}, 
{level: 3, text: '<p>Kissi</p>'}, 
{level: 1, text: '<p><a href="http://192.168.99.100">Pantterit</a></p>'}, 
{level: 2, text: '<p>Vaaleanpunainen pantteri</p>'}, 
{level: 1, text: '<p><a href="http://192.168.99.100">Jaguaarit</a></p>'}, 
{level: 1, text: '<p><em>Sapelihammastiikerit</em></p>'}]

In GitLab by @vesal on Jul 10, 2019, 15:12

Voiko tuota kokeilla missään dvs koneessa?

In GitLab by @vivanauk on Jul 10, 2019, 16:25

Voiko tuota kokeilla missään dvs koneessa?

Ei vielä, mutta voin huomenna laittaa. Olisiko timdevs3? Varmaan muutkin vapaana nyt, mutta muistaakseni sitä käytin viimeksi.

In GitLab by @vesal on Jul 10, 2019, 16:48

Ei vielä, mutta voin huomenna laittaa. Olisiko timdevs3? Varmaan muutkin vapaana nyt, mutta muistaakseni sitä käytin viimeksi.

Käy ihan hyvin.

In GitLab by @vivanauk on Jul 11, 2019, 13:09

Timdevs3 näyttää vain 503 Service Unavailable. Osa konteista on kiinni ja uudelleenkäynnistettäessä niistä tulee cannot start service tai cannot restart container ilmoituksia.

In GitLab by @vesal on Jul 11, 2019, 13:17

Käytä sitten vaikka:

timdevs02.it.jyu.fi

se näkyy ulospäin vain yhtenä koneena:

https://timdevs02-5.it.jyu.fi

Siellä on lähes nykyinen master, joten jos mergeä sen kanssa, niin pitäisi aika hyvin toimia.

Eli tuolla tavarat /opt/tim-kansiossa

In GitLab by @vivanauk on Jul 11, 2019, 13:43

Laitan esimerkkejä tänne: https://timdevs02-5.it.jyu.fi/view/menu-plugin/menu-plugin-test

In GitLab by @vesal on Jul 11, 2019, 13:56

Tein tuonne Moni-nimisen ylimmän menun kohdan:

se ei kestä tyhjää riviä tuon menulohkon lopussa
en saanut monitasoista menua
sen preview-ongelman voisi ratakista niin, että pluginin pitäisi saada tietää että se on preview-tilassa (qst:ssä muistaakseni käytin tietoa) ja silloin se voisi tehdä itsestään paljon korkeamman jollei niillä z-arvoilla saa sitä ulos sieltä previewsta.

In GitLab by @vesal on Jul 11, 2019, 14:04

Kirjoittaessa tulee näköjään aika paljon erroria. Noita kannattaisi ehkä ottaa kiinni.
pikkuisen voisi laittaa vasenta marginaalia alimenujen kohdalle
matikalle tapahtuu jotakin kun se näyy (int eli joku on poistanut \ merkkejä sieltä)

In GitLab by @vesal on Jul 11, 2019, 14:11

Kuvan kanssa kävi sillai hassustti että nuoli menee kuvan alle, ei rinnalle

In GitLab by @vivanauk on Jul 11, 2019, 14:15

se ei kestä tyhjää riviä tuon menulohkon lopussa Kirjoittaessa tulee näköjään aika paljon erroria. Noita kannattaisi ehkä ottaa kiinni.

Joo, se on vielä aika keskeneräinen, ei ole poikkeuskäsittelyjä.

en saanut monitasoista menua

Se ei vielä osaa näyttää niitä vaikka syvennystieto onkin tallessa level-muuttujassa. Teen juuri palvelinpuolella menun parsimista siten, että saa miten syvän rakenteen tahansa niille.

matikalle tapahtuu jotakin kun se näyy (int eli joku on poistanut \ merkkejä sieltä)

Tekstisisällöllehän ei tehdä muuta kuin ajetaan call_dumbo, joten se on varmaan siitä kiinni.

pikkuisen voisi laittaa vasenta marginaalia alimenujen kohdalle Kuvan kanssa kävi sillai hassustti että nuoli menee kuvan alle, ei rinnalle

Se näkyvä menu on bootstrapin systeemillä, joka menee kokonaan uusiksi vielä. Tyylit pitää miettiä sitten. Mikä tahansa elementti mikä haluaa kokonaan oman rivinsä tipauttaa sen nuolen sieltä toistaiseksi.

In GitLab by @vesal on Jul 11, 2019, 14:16

millä säädettäsiin fonttia, kokoa ja palkin taustaväriä?
toki osaa niistä voi muuttaa css:llä, mutta menukohtaisesti noille voisi haluta erilaisia arvoja

In GitLab by @vesal on Jul 11, 2019, 14:18

elementti mikä haluaa kokonaan oman rivinsä tipauttaa sen nuolen sieltä toistaiseksi.

Haluaako img oman rivin? Normaalitekstissä ei, mutta näyttää se rivittyvät tuossa jos pistä kuvan viereen tekstiä.

In GitLab by @vesal on Jul 11, 2019, 14:41

saikos nuo niin että haluteessan menut aukeavat hoverilla?
Ohj1:lla ja 2:lla on niin plajon luentoja että luentomenu on kahdessa palstassa. Sitä on tylsä kirjoittaa. Tuolla esiemrkkisivun "Monistettu menu" saan helposti alekkain n-kpl samánlaisia otsikoita. Tuohon kun voisi jotenkin sanoa että peräkkäiset (tai jopa n-peräkkäistä) ladotaan samalle riville, niin noita toistuvia olisi hellpoa tehdä. Tuolaista toistoa on muuten helpoin kokeillla niin, että pistää rivivaihtdon kolmen hipusn jälkeen jolloin tuo muuttuu pre-lohkoksi ja näkee preview:ssä kisvasti mitä on tulossa.

In GitLab by @vesal on Jul 11, 2019, 14:44

olisiko järkeä että yhden menun saisi merkitä sellaiseksi, joka nousee tuonne rattaankuvan viereen ja lähtee siitä aukeamaan? Silloin siihen pääsisi aina käsiksi.

In GitLab by @vivanauk on Jul 11, 2019, 14:44

Haluaako img oman rivin? Normaalitekstissä ei, mutta näyttää se rivittyvät tuossa jos pistä kuvan viereen tekstiä.

En tiedä miten bootstrapin pudotusvalikko sen tarkalleen tekee, mutta esim. aiemmin tekstin ympärillä <p>-tagit viskasivat nuolen eri riville.

millä säädettäsiin fonttia, kokoa ja palkin taustaväriä?

Ajattelin koko menun laajuisia muuttujia (kuten separator ym. ovat) aluksi. Tietysti kun syntax parsitaan omalla funktiolla, niin saa lisättyä mitä sääntöjä halutaan yksittäisille menuille. Esim.

- [Menuotsake 1](linkki)
  width: 10em
  text-color: blue
- [Menuotsake 2](linkki)
  bg-color: red

onnistuisi suht helposti sillä logiikalla, että kaikki viivaa seuraavat rivit ovat kyseisen menuobjektin (ja kaikkien sen sisältämien?) asetuksia.

In GitLab by @vesal on Jul 11, 2019, 15:05

Ajattelin koko menun laajuisia muuttujia (kuten separator ym. ovat) aluksi. Tietysti kun syntax parsitaan omalla funktiolla, Kyllä ne menunlaajuiset useimmiten riittänevät

niin saa lisättyä mitä sääntöjä halutaan yksittäisille menuille. Esim.

Menuotsake 1 width: 10em

Jonkin verat saa aikan myös tuolla:

Menuotsake 1{width=10em, .red}

syntaksilla. Ainoa mihin se ei taida taipua on että se osaisi antaa koko itemin levyisen taustavärin. Ks:

https://timdevs02-5.it.jyu.fi/view/menu-plugin/menu-plugin-test#menun-tyylit

Laita muuten yksi template sellaiseksi että se toimii, nyt kumpikaan ei niistä tuota syntaksiltaan oikeaa. On nopeampi sitten tehdä noita kokeita :-)

In GitLab by @vivanauk on Jul 11, 2019, 15:09

Laita muuten yksi template sellaiseksi että se toimii, nyt kumpikaan ei niistä tuota syntaksiltaan oikeaa. On nopeampi sitten tehdä noita kokeita :-)

Joo, edellisen commitin mukana tuli toimiva template. Samalla myös palvelinpuolella sisennyksien käsittelyä paransin, saa periaatteessa miten syvän tahansa (testisivulla se json oli siitä). Väliaikainen bootstrap-menu ei toki osaa näyttää syvempiä valikoita.

In GitLab by @vesal on Jul 13, 2019, 11:14

voisiko jotenkin sanoa että jotkut menukohdat eivät näy kuin tietyillä oikeuksilla? Tämän tosin voi tehdä niin että rakentaa koko menusysteemit erikseen eri oikeuksille, mutta jos on pieni kurssi ja vähän menuja, tulevat ne turhaa allekain kun mahtuisi yhteen menuun.

In GitLab by @vivanauk on Jul 13, 2019, 14:29

voisiko jotenkin sanoa että jotkut menukohdat eivät näy kuin tietyillä oikeuksilla?

Ei varmaan syntaksin puolesta eroa muista asetuksista, joten onnistunee esim. tyyliin:

- Julkinen menu
  width: 10em
  - [Linkki 1](linkki1)
  - [Linkki 2](linkki2)
- Muokkaajien salainen menu
  requiresRights: edit
  width: 10em
  textColor: blue
  - [Linkki 3](linkki3)
  - [Linkki 4](linkki4)

tai sitten viiksisuluilla tai mikä sitten havaitaankaan parhaaksi tavaksi esittää asetuksia.

In GitLab by @vesal on Jul 13, 2019, 14:52

Muokkaajien salainen menu requiresRights: edit width: 10em textColor: blue

Linkki 3

Linkki 4

Tuo on sun oma syntaksi, joka osin muistuttaa YAMLia. Toki tykkään siksi että simppelien asioiden tekeminen on yksinkertaista.

Oletko tiukasti määritelyt että aina eka rivi on itemin sisältö ja sitten kaikki muut rivit ennen - merkkiä attribuutteja?

Tuleeko oneglmia jos itemin sisältö sisältää : pisteen (ei kai jos sisällöstä huolimatta eka rivi on aina itemin sisältö)?

Tuo on sitten herkullinen kohde kirjoittaa kunnon yksikkötestejä, vrt esim:

E:\tim\timApp\tests\unit\test_yamlblock.py

E:\tim\timApp\tests\unit\test_correct_yaml.py

E:\tim\timApp\tests\server\test_widen_fields.py

In GitLab by @vesal on Jul 13, 2019, 15:04

Voi olla tiedossakin, mutta tuolla:

https://timdevs02-5.it.jyu.fi/view/menu-plugin/menu-plugin-test#matikkamenu

ei menuissa tule sitä harmaata pallkikursoria sitä mukaa kun liikkuu alimenuissa

In GitLab by @vivanauk on Jul 13, 2019, 16:03

Tuo on sun oma syntaksi, joka osin muistuttaa YAMLia. Toki tykkään siksi että simppelien asioiden tekeminen on yksinkertaista.

Yamlissa oli vähän epäsäännöllisyyttä hipsujen vaatimisen kanssa (osassa ne oli pakko laittaa, osassa niitä ei saanut laittaa) ja muita muodollisuuksia, joita en toistaisi tässä.

Oletko tiukasti määritelyt että aina eka rivi on itemin sisältö ja sitten kaikki muut rivit ennen - merkkiä attribuutteja?

Sen ei ole pakko mennä niin. Ajattelin siinä ehkä sitä, että se on yksikäsitteisempi jos viivallinen rivi on aina tekstisisältö. Luulisin myös, että viiksisulkusyntaksi onnistuuu, kunhan se ei mene parsinnassa sekaisin valmiina olevien muotoilujen kanssa.

Tuleeko oneglmia jos itemin sisältö sisältää : pisteen (ei kai jos sisällöstä huolimatta eka rivi on aina itemin sisältö)?

Sen voisi laittaa tarkastamaan vain tuetut avainsanat (width:, bgColor:, requiresRights:, jne.), jolloin ongelmia tulee vain jos jostain syystä otsikoksi tarjotaan yhtä niistä.

ei menuissa tule sitä harmaata pallkikursoria sitä mukaa kun liikkuu alimenuissa

Se on bootstrap-dropdownin tyyleistä kiinni ja tulee tällä hetkellä vain linkeissä (a-elementit). Meinasin laittaa jonkin samanlaisen efektin sitten joka menuitemille kun pääsen siihen asti.

In GitLab by @vivanauk on Jul 16, 2019, 15:12

Lisäsin yhden tason verran alimenua, timdevsissä on sille testi. Testailin eilen sitä, miten menun tekisi alusta asti itse, mutta totesin että on helpompaa laajentaa vain bootstrap-menun päälle sitä (lopputulos näyttää myös yhdenmukaisemmalle muun käyttöliittymän kanssa). Hoveria ei vielä ole tosin, aukeaa klikkaamalla, ja valikon ulkoa klikkaaminen ei vielä sulje alavalikkoja.

En nyt keksinyt vielä miten sen tekisi rekursiivisesti mielivaltaisen syville menuille, mutta samalla logiikalla saa varmasti kyllä lisättyä tasoja. Mutta voisiko olla niin, että on jokin maksimi syvyys mistä syvemmille ei ole omaa valikkoaan, vaan tulevat vaikkapa vain edellisen perään? Luultavastihan kukaan ei tule tarkoituksella tekemään esim. 10 tasoista valikkoa, ja käyttäjän kiusaamista sellainen olisikin.

In GitLab by @vesal on Jul 16, 2019, 15:30

En nyt keksinyt vielä miten sen tekisi rekursiivisesti mielivaltaisen syville menuille, mutta samalla logiikalla saa varmasti kyllä lisättyä tasoja.

Kun en ole katsonut koodi, mutta yllensähän se on vain:

piirrä_menu(x,y):
    if menuitem: piirrä_item:
    if submenu: piirrä_menu(submenu.x, submenu.y)

Mutta voisiko olla niin, että on jokin maksimi syvyys mistä syvemmille ei ole omaa valikkoaan, vaan tulevat vaikkapa vain edellisen

Kai se voisi olla että nykyiseen vielä yksi lisää, niin sen jälkeen on jo aika syvällä...

In GitLab by @vivanauk on Jul 16, 2019, 16:02

Kun en ole katsonut koodi, mutta yllensähän se on vain:
piirrä_menu(x,y):
    if menuitem: piirrä_item:
    if submenu: piirrä_menu(submenu.x, submenu.y)

Menu rakentuu siis html-templatessa käyttäen ng-repeatia, jolla on ihan oma syntaksinsa. Onnistuisihan se palvelinpuolella ja AngularJS:ssäkin on kaiketi mahdollista käyttää myös rekursiota, mutta kysymys on ehkä se, kannattaako sen tekemiseen käyttää hirveästi aikaa jos erittäin syviä menuja ei oikeastaan edes tarvita.

Kai se voisi olla että nykyiseen vielä yksi lisää, niin sen jälkeen on jo aika syvällä...

Luulisin että alimenun lisäämisen logiikalla hoituu myös alialimenukin (ja mahdollisesti vielä syvemmät). Teknisesti ottaen loputtoman syvää ei saa tällä tavalla, kun nämä silmukat pitää käsin lisätä sinne, mutta jos tasoja on vain muutama niin ei liene ongelma.

In GitLab by @vesal on Jul 16, 2019, 16:07

Menu rakentuu siis html-templatessa käyttäen ng-repeatia, jolla on ihan oma syntaksinsa. Onnistuisihan se palvelinpuolella ja AngularJS:ssäkin on kaiketi mahdollista käyttää myös rekursiota, mutta kysymys on ehkä se, kannattaako sen tekemiseen käyttää hirveästi aikaa jos erittäin syviä menuja ei oikeastaan edes tarvita.

Mutta kysymys onkin että onko järkeä käyttää Angularin ominaisuuksia lainkaan tällaisia tehdessä, koska tässähän ei tarvita yksi eikä kaksisuuntaisuutta.

Kun menu on luotu, se on samanlainen aina. Siksi sen (syvyydestä huolimatta) voi tehdä kokonaan valmiiksi HTML:ksi ja sitten vaan laittaa paikallen ng-bind-html:llä.

Esim GeoGebra-komponentissa se framen koodi tuotetaan tällä tavoin.

Varmaan pitää mm. TimTable muuttaa tuollaiseksi jossakinv älissä, sillä nyt siinä on nin paljon tekemistä yhden Angurain digestin aikana, että se ei voi olla muuta kuin hidas...

Vesa

In GitLab by @vivanauk on Jul 16, 2019, 20:16

voi tehdä kokonaan valmiiksi HTML:ksi ja sitten vaan laittaa paikallen ng-bind-html:llä.

Siirränkö siis palvelimen puolelle sen tekemisen sitten? Jonkin verran joutuu säätämään kun siinä mm. alivalikoiden kiinni/auki tilavahdossa viitattiin olioihin, mutta saman saanee tehtyä viittaamalla id:ihin.

In GitLab by @vesal on Jul 16, 2019, 20:20

Siirränkö siis palvelimen puolelle sen tekemisen sitten? Jonkin verran joutuu säätämään kun siinä mm. alivalikoiden kiinni/auki tilavahdossa viitattiin olioihin, mutta saman saanee tehtyä viittaamalla id:ihin.

Ei kai tuolla niin väliä. Voin sen tehdä siellä oninit:ssäkin ja silloin voi attribuuteiksi ottaa tarviimiaan komponenttien viitteitä jos luo niitä pala kerrallaan. Silloin ei tarvitse sitten ajon aikan pyytää id:llä.

Mutta ihan m iten vaan. Jos se Angular-vrsio jo toimii, niin kai sekin saa olla.

In GitLab by @vivanauk on Jul 17, 2019, 12:58

Ei kai tuolla niin väliä. Voin sen tehdä siellä oninit:ssäkin ja silloin voi attribuuteiksi ottaa tarviimiaan komponenttien viitteitä jos luo niitä pala kerrallaan. Silloin ei tarvitse sitten ajon aikan pyytää id:llä.

Mutta ihan m iten vaan. Jos se Angular-vrsio jo toimii, niin kai sekin saa olla.

No jos minä katson sitten muiden ominaisuuksien lisäämistä tässä välissä (topMenu ym.). Voisi kysyä Mikan mielipidettä sitten kun palaa lomalta myös.

In GitLab by @vivanauk on Jul 17, 2019, 14:35

Lisäsin topMenu-asetuksen. Se seuraa rullattaessa yhden ruudun verran sivun yläosassa. Toistaiseksi siis jos laittaa dokumentin keskelle, niin se ei aloita seuraamista sieltä vaan dokumentin alusta. Siinä tapahtuu myös "hyppäys" kun se poistuu dokumentista leijumaan, mikä lyhentää dokua. Miten sen seuraamisen alkaminen/loppuminen dokumentissa halutaan tarkalleen?

In GitLab by @vesal on Jul 17, 2019, 20:55

Lisäsin topMenu-asetuksen. Se seuraa rullattaessa yhden ruudun verran sivun yläosassa. Toistaiseksi siis jos laittaa dokumentin keskelle, niin se ei aloita seuraamista sieltä vaan dokumentin alusta. Miten sen seuraamisen alkaminen/loppuminen dokumentissa halutaan tarkalleen?

Iahnnetilaneessahan tuo timisi niin, että:

Se on omalla paikallaan ja rullautuu ylöspäin kunnes saavuttaa yläreunan. Sen jäleen se häviää näkyvistä jos vielä rullataan. Jos tullaan alaspäin yhtään, menu tulee mukana alaspöin ja taas jo mennään ylös päin, katoaa saman tien (ellei sen oma paikka ole jo tullut näkyviin, jolloin se toimii kuten alussa eli kunnes oma paikka menee piiloon).

Ja ihannetilanteessa se siis mee rullaamallapois, ei yhtäkkiä hyppäämällä. Samoin alasrullatessa ee ei putkahda yllättäen näkyviin, vaan tulee rullauksen vauhtia (ikään kuin se olisi siinä kohti "asumassa") ja sitten kun on kokonaan näkyvissä, jämähtää siis yläreunaan kunnes oma paikka tulee näkyviin ja sitten se tulee sen mukana alas.

Nyt tuossa mallissa sen y-paikka vaihtuu yllättäen suunnasta riippuen.

Sitten alimenut varmaan voisivat mennä kiinni jos menu katoaa?

Nyt menut sulkeutuvat kun klikkaa tekstialueen ulkopuolella, mutta tekstiin osuminen ei sulje. Kännyköissä yms ei jää tuota ylimääräistä tilaa.

Mites muuten voisi kuvitella että jsrunner ja savebutton toimintoja voisi kutsua myös menusta? Olisiko niin että noiden rajapintaan laittaisi jonkin metodin, ja sitten saisi menu-itemissä sanoa että suoritetaan sen buttonin run? Silloin voisi lomakesivulle, ks esim:

https://tim.jyu.fi/teacher/kurssit/tie/ohj2/2019kesa/eteneminen?demo=11&group=ohj2kesa

kerätä toimintoja myös opeattajalle menuihin vaikke ne ovat myäs sivulla. Jos haluaisi pelkkään menuun, voisi painikkeet olla, mutta ne voisi piilottaa (niin voisi tehdä jonkin hidden-attribuutin). Sittenm ulla on mielessä buttoneille muutakin hommaa, esim: "Aseta vastausaikarajat 15 min sisälle" jolloin tuollaisenkin buttonin toiminto olisi kiva löytää menusta.

Tai tuon buttonien hidden voisikin ehkä tehdä niin, että pistää ne yhteen alueeseen ja lytistää sen aluee, niin niitä on helpompi löytää muokkausta varten ja käyttää menuista.

In GitLab by @vivanauk on Jul 18, 2019, 14:04

Se on omalla paikallaan ja rullautuu ylöspäin kunnes saavuttaa yläreunan. Sen jäleen se häviää näkyvistä jos vielä rullataan. Jos tullaan alaspäin yhtään, menu tulee mukana alaspöin ja taas jo mennään ylös päin, katoaa saman tien (ellei sen oma paikka ole jo tullut näkyviin, jolloin se toimii kuten alussa eli kunnes oma paikka menee piiloon).

Tein nyt sen seuraamisen (timdevsissä toimii), tosin en nyt ihan varma ole menikö niin päin kuin tarkoitit (eli onko menun rullaaminen ylöspäin sitä, että sivulla mennään alaspäin vai...?).

Ehtoja on toki helppo muuttaa ja voisi jopa antaa menun laatijan asettaa kummin se menee.

In GitLab by @vesal on Jul 18, 2019, 14:08

Tein nyt sen seuraamisen (timdevsissä toimii), tosin en nyt ihan varma ole menikö niin päin kuin tarkoitit (eli onko menun rullaaminen ylöspäin sitä, että sivulla mennään alaspäin vai...?).

Minusta toimii nyt kuten ajattelin. ELi menulla on tavallaan oma paikka, mutta se putkahtaa näkyviin kun vetää esim iPadilla sormella alas (eli haluaa nähdä ylempänä oleaa teksitä). Toski se vähän äkkiä sieltä poppaa, li jos oikein hienon haluaisi, niin se tulis jotenkin pehmeämmin.

Mitä tapahtuu jos laita useampia tuollaisai sivulle? Osaako ne niputtautua kulkemaan peräkkäin ja jäämään kukin omalla kohdalleen?

In GitLab by @vesal on Jul 18, 2019, 14:21

Mitä tapahtuu jos laita useampia tuollaisai sivulle? Osaako ne niputtautua kulkemaan peräkkäin ja jäämään kukin omalla kohdalleen?

Joo, kokeilin. Näköjään se ylempi silloin menettää top-menu "statuksensa".

Oletetaan että meillä on

tekstiä 1 top 1 tektiä 2 top 2 tekstiä 3 tekstiä 4

Ruutu on rullattu niin, että näkyy vain tekstiä 4

Eli ruutu on

tekstiä 4

Ihannetilanteessa tuo toimisi niin, että kun meee ylöspäin (vetää ipadillä sormella alaspäin), niin ensin tulee top2 näkyviin

eli on

top 2 tekstiä 4

ja jos vielä mennään niin sitten näkyy

top 1 top 2 tekstiä 4

ja edellen rullataan, niin ollana tilanteessa

top 1 tekstiä 2 top 2 ...

jos toiseen suuntaan, niin top 1 häviää ja kun teksti 2 ohitettu, niin myös top 2 häviää (kuten nyt tekeekin).

Oikeasti tosin ei ole järkeä sijoittaa top-menuja kovin keskelle tekstiä, mutta sellainen käyttötapaus tulee heti mieleen, että on

opiskelijan top menu opettajan top menu tekstiä....

ja jos tuo em kuvattu käytös on vaikea saada aikaseksi, niin tuossa riittää että hiirellä alasvedettäessä molemmat top-menut ponkaisevat kerralla Pehmeästi :-) näkyviin (nille joilla molemmat näkyvät, opiskelijoille siis vain ylempi).

Vesa

In GitLab by @vivanauk on Jul 18, 2019, 14:24

Mitä tapahtuu jos laita useampia tuollaisai sivulle? Osaako ne niputtautua kulkemaan peräkkäin ja jäämään kukin omalla kohdalleen? Joo, kokeilin. Näköjään se ylempi silloin menettää top-menu "statuksensa".

Ne menevät päällekkäin, kun molemmilla on tyylinä silloin position: fixed; ja top: 0;, kun en ole vielä ehtinyt muuttaa tuota puolta siitä.

In GitLab by @vesal on Jul 18, 2019, 14:27

Ne menevät päällekkäin, kun molemmilla on tyylinä silloin position: fixed; ja top: 0;, kun en ole vielä ehtinyt muuttaa tuota puolta siitä.

Menisikö se yksinkertaisimmillaan niin, että jokaisella on

 top: rivinkorkeus*edellä olevien topmenujen määrä

In GitLab by @vesal on Jul 18, 2019, 14:33

iPadissa topmenu mene hapurilaismenu kuvakkeen kanssa päälekkäinja jos topmenu on kohdalla, ei saa hampurilaista auki. Pitäisi sen takia laittaa että minini X menulle on hampurilaiskuvakkeen leveys.

Voisiko alasvetotarve olla himpun suurempi (menun korkeus?) niin ei ponnahtele ihan käden tärinästä?

In GitLab by @vivanauk on Jul 18, 2019, 15:47

Lisäsin yhden tason lisää valikoita ja valikoiden sulkeutumista säädin vähän, tosin se toimii vielä vain valikon sisällä klikkailtaessa.

Näyttäisiköhän topMenu paremmalle jos tyylissä olisi paddingia vähän, kun minusta menee turhan kiinni yläreunaan varsinkin ilman bold-muotoiluja?

In GitLab by @vesal on Jul 18, 2019, 16:43

Lisäsin yhden tason lisää valikoita ja valikoiden sulkeutumista säädin vähän, tosin se toimii vielä vain valikon sisällä klikkailtaessa. Joo, eiköhän ne tasot nyt riitä :-)

Sellainen vika on että:

1) avaa Title 2/Submenu title 2/Subsubmenu title 2 2) klikkaa kiinni title 2 3) avaa Title 2 4) Avaa Submenu title 1 => valikkoja päällekkäin.

Muuten tuo ei edes välttämättä ole huono idea että sulkeutunut menu aukeaa samsata kohti takaisin. Jos siellä on jotakin mitä usein tarvitsee, niin löytyy heit (tosin käytännössä jos se on linkki, niin eihän se seuraavalla kerralla sitä muista).

Eli varman kun jotkin muuta menutasoa klikkaa kuin sitä mikä oli auki, niin sille tasolle asti kaiken pitäisi sulkeutua.

Näyttäisiköhän topMenu paremmalle jos tyylissä olisi paddingia vähän, kun minusta menee turhan kiinni yläreunaan varsinkin ilman bold-muotoiluja?

Joo, erityisesti jos ei olla sen kotona, niin siinäv oisi ollahimpun tyhjää ja ehkä oikean vaalenaharmaa bottom-border? Sitten kun se jää kotiin, niin se voi muuttua sellaiseksi kun oli tehtykin.

In GitLab by @vivanauk on Jul 22, 2019, 13:38

Millä logiikalla tyyliasetuksien toiminta halutaan?

Tein nyt malliksi yleisen taustaväriattribuutin niin, että se vaikuttaa sekä menupalkkiin että aukeaviin valikoihin, mutta pitäisikö siinä olla erillinen valikoille ja omansa dokumentissa kokoajan näkyvälle menupalkille?

Miten paljon tyylejä halutaan voivan kohdentaa ja peritäänkö esim. tyylit jotka laitettu ylemmän tason valikolle? Perintähän tässä vaikuttaisi olevan ehkä työläämpää kuin esim. timtablessa, kun ne pitää erikseen asettaa joka tasolle.

Vielä ei siis ole lisätty menu- tai item-kohtaista tyylejä.

In GitLab by @vesal on Jul 22, 2019, 13:49

Saako tuota menujen lunnossyvyyttää pienennettyä kännykällä niin ei menisi heit ulos oikealta.

Kuuluuko tuohon systeemiin sellaista että se valitisis oikean aukeamisuunnan jos ollaan ihan alhaalla niin menee ulos kuvasta?

In GitLab by @vivanauk on Jul 22, 2019, 14:11

Saako tuota menujen lunnossyvyyttää pienennettyä kännykällä niin ei menisi heit ulos oikealta.

Kuuluuko tuohon systeemiin sellaista että se valitisis oikean aukeamisuunnan jos ollaan ihan alhaalla niin menee ulos kuvasta?

Se on tehty css:n perus top ja left muotoiluilla, joilla tietysti voi säätää suunnan, mutta se ei automaattisesti päätä sitä. Saattaisi onnistua niin, että katsoo mikä reuna on lähinnä elementtiä ja vaihtaa aukaisemisen tyyliä päinvaistaiseen suuntaan aina, tosin aukeavat menut saattavat kasautua sitten mikä on ongelma myös varmaan.

In GitLab by @vivanauk on Jul 23, 2019, 14:10

Lisäsin tekstin värin ja koon muuttamisen (toistaiseksi vain koko pluginin laajuisesti; ei jostain syystä muuta linkkien väriä).

Muutin aukeamissuuntaa myös vähän, syvemmät valikot aukeutuvat sisäänpäin enemmän, tosin ei vielä automaattisesti tee sitä.

Mietin toimisiko indeksien perusteella sen tekeminen, eli jos ollaan menupalkin loppupuoliskolla, niin avataan vasemmalle päin ja jos alkupuoliskolla niin oikealle, ja valikkolistan alaosasta avataan ylöspäin ja yläosasta alaspäin. Jokin fiksumpi automatiikka olisi toki paras.

In GitLab by @vesal on Jul 23, 2019, 14:46

ei tuokaan näköjään ole hyvä että ne aukeaa eri suuntiin, kännykällä ei arvaa mihi aukesi. tai nuolen pitäisi edes nöyttää mihin menee.

anna olla alustavasti niin että oletuksena saman suuntaan ja menun tekijä miettii mitä tekee. ehkä aukeaa vähemmän vasemmalle kännykässä eli enemmän edellisen päälle niin tila riittää muutamalle tasolle

Vesa

-------- Alkuperäinen viesti -------- Aihe: Re: TIM | Menu-plugin (#1419) Lähettäjä: Visa Naukkarinen Vastaanottaja: vesal@jyu.fi Kopio:

In GitLab by @vivanauk on Jul 23, 2019, 14:53

ei tuokaan näköjään ole hyvä että ne aukeaa eri suuntiin, kännykällä ei arvaa mihi aukesi. tai nuolen pitäisi edes nöyttää mihin menee.

anna olla alustavasti niin että oletuksena saman suuntaan ja menun tekijä miettii mitä tekee. ehkä aukeaa vähemmän vasemmalle kännykässä eli enemmän edellisen päälle niin tila riittää muutamalle tasolle

Ok. Voisin katsoa tähän myös valikkokohtaisia asetuksia, niin muokkaaja voi asettaa itse suunnan niille, missä oletus ei riitä.

In GitLab by @vesal on Jul 23, 2019, 14:58

tuon voisi korjata että top menun kanssa kännykällä ei hampurilainen toimi

In GitLab by @vivanauk on Jul 23, 2019, 15:22

tuon voisi korjata että top menun kanssa kännykällä ei hampurilainen toimi

Johtunee siitä, että hampurilaismenussa z-index on 4 ja topMenulle laitoin sellaiset 900. Tietokoneella topMenuhan alkaa vasta paragraphien kohdalta eikä mene päällekkäin, mutta kännykässä taitaa muuttua elementtien paikat ja se siirtyy vasempaan laitaan.

Usempi yhtäaikainen topMenu on muuten erikoinen, kun se ei edes tunnista niistä kuin jälkimmäisimmän kai, vaikka pitäisi jokaisella olla oma id ja paikkatarkastelu, jonka perusteella tehdään hyppäys topMenuksi ja takaisin. Menevätköhän ne jotenkin samaan instanssiin minkä vuoksi vain yksi toimii?

In GitLab by @vivanauk on Jul 24, 2019, 14:13

tuon voisi korjata että top menun kanssa kännykällä ei hampurilainen toimi

Ainakin chromen kännykkätilassa nyt hampurilainen menee topmenun päälle eikä toisin päin, kun pienensin z-indeksiä.

Muutin aukemissuuntaa nyt niin, että se menee melkolailla suoraan alle aina (se mihin oletuksena se olisikin menossa suhteessa parenttiinsa).

Olettaisin että alaspäin aukeaminen on aina pienempi paha kuin sivuille tai ylös, sillä sivua voi aina rullata alas päin (ellei laita aivan alalaitaan, mutta harvemmin varmaan). Aukeava menu peittää osan ylemmän tason valinnoista, mutta senhän saa pois klikkaamalla uudelleen.

In GitLab by @vivanauk on Jul 24, 2019, 14:21

Korjasin kuvat menussa niin, että teksti ja valikkonuoli menevät samalle riville sen kanssa, jos mahtuu.

TIM-JYU / TIM

Menu-plugin #1419