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 @vesal on Jul 25, 2019, 02:44

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

Joo. Joko tästä voisi ekan version laittaa tuotantoon?

Ja kirjoittaa ohjeen, jossa ensin on hyvin yksinkertainen peruskurssin esimerkki.

Vesa

In GitLab by @vivanauk on Jul 25, 2019, 09:55

Joo. Joko tästä voisi ekan version laittaa tuotantoon?

Tässä on vielä muutamia asioita, jotka pitää huomioida. Virhetarkasteluja pitänee lisätä, ainakin siihen mistä syystä tuli wuff eilen (matemaattiset kaavat). GitLab antaa myös varoituksen commiteista.

Tässä on myös vielä käytetty JavaScriptin eval()-funktiota, mikä on ilmeisesti epäsuotavaa (hidas, tietoturva ongelma?). Se oli väliaikainen ratkaisu ja siitä pääsisi eroon muutoin, mutta kukaan ei tuntunut silloin tietävän miten schemat/modelit muotoillaan tämän rakenteelle. Nyt kun menun syvyyttä rajoitettiin niin voisin kokeilla sitä vielä uudelleen oikeastaan, se saattaa olla helpompaa kuin rekursiivisen rakenteen tekeminen.

Ja kirjoittaa ohjeen, jossa ensin on hyvin yksinkertainen peruskurssin esimerkki.

Voisi kyllä laatia ohjetekstin valmiiksi niin saa sitten heti lisättyä, syntaksi ja toiminnallisuushan ei varmaankaan enää muutu.

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

Tässä on vielä muutamia asioita, jotka pitää huomioida. Virhetarkasteluja pitänee lisätä, ainakin siihen mistä syystä tuli wuff eilen (matemaattiset kaavat). GitLab antaa myös varoituksen commiteista.

Joo, siellä on valtava määrä virheitä, en saa ajettua testejä omassa koneessa, niin noi on jäänyt korjaamatta. Muutama liittyy oikeusjuttuihin kun kenttien takia olen niitä hieman muuttanut ja osaa en ymmärrä :-)

Pitää katsoa ehtisikö noihin syventyä jossakin välissä. Mutta tuskin sää olet muuttanut mitään, mikä muuttaa jotakin olemassa olevaa.

In GitLab by @vivanauk on Jul 25, 2019, 15:04

Laitoin templateja kolme vaihtoehtoa: minimaalinen, alimenuja ja asetuksia sisältävä sekä topMenu. Lisäsin topMenu siirtymään myös pienen efektin taustavärin ilmestymiseen.

Nyt myös jos laittaa tasoja enemmän kuin mitä tuetaan, niin yli menevät jäävät sisimmälle tuetulle. Laajensin myös sisennyksien parsintaa niin, että tabit toimivat yhtä hyvin. Esim.

molemmat luovat valikkorakenteen 1 > 2 > 3 > 4, 5, 6 (yli menevät tasot 4, 5 ja 6 menevät kaikki 3:n alle).

In GitLab by @vesal on Jul 25, 2019, 15:29

Laitoin templateja kolme vaihtoehtoa: minimaalinen, alimenuja ja asetuksia sisältävä sekä topMenu. Lisäsin topMenu siirtymään myös pienen efektin taustavärin ilmestymiseen.

Käyttöohjetta kirjoittaessa tulet huomaaman sellaisen asian että olisipa kiva, jos esimerkkikomponentin koodin voisi katsoa.

Ja siksi voisi miettiä miten tuon mahdollistaisi attribuutille tai jopa globaalilla asetuksella (jonka voi toki tehdä attribuutilla ja globalmacros) niin, että koponentin viereen tulisi (answerbrowserin siäänne yleensä piiloutuvat joka voisi tehdä sen) pieni "Shoe soure code" josta sitten avautuisi lähdekoodi.

Vesa

In GitLab by @vivanauk on Jul 29, 2019, 15:27

Poistin bootstrapin dropdownmenun jämät, kun sitä ei enää tarvinnut. Nyt siis koko valikkorakenne selaimessa toimii ihan vain perus-AngularJS:llä (aiemmin ensimmäinen taso oli bootstrapilla).

Lisäsin samalla sen, että hiiren poistuessa valikon yltä ne sulkeutuvat. Mobiililla pitänee vielä ottaa pois päältä (ei varmaankaan toimi?), olisikohan TIMissä jotain näppärää muuttujaa (isMobile tms.) siihen?

openAbove: true asetuksella koko menurakenne aukeaa ylöspäin, jos menu halutaan esim. dokumentin alalaitaan.

In GitLab by @vesal on Jul 29, 2019, 15:33

openAbove: true asetuksella koko menurakenne aukeaa ylöspäin, jos menu halutaan esim. dokumentin alalaitaan.

Tuosta tulikin mielenkiintoinen juttu, että miten saa samanmenmun helposti ylä ja alalaitaan. Eli periaattessa tekemällä ylös ja lainaamalla alasa, mutta lainattuun ei voi enää vaihtaa attribuutteja. Toki laitamalla menun sisällön makrooo, niin voi siihen viitata (nyt sen pitäisi onnistua helpsoti kun se on ihan vaan tekstiä?). Mutta pystyisikö ,emu jopa generoimaan itsestään kaksi html-esintymää pyydettäessä?

alsoBottom: true (tms attribuuti)?

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

Saako menun aukeamaan niin, että klikkaa missä vaan rivillä, niin aukeaa. Nyt jos on lyhyt teksti, pitää mennä tarkalleen takestin kohdalle?

Entä pitäisikö alimenussa sen avausnuolen olla oikealle?

In GitLab by @vesal on Jul 30, 2019, 10:23

Jos haluaisi että värisävyt noudattaisivat valittua TIMin teemaa, niin mitenkähän saisi sanottua että se väri on sama kuin tuo: $basic-color: #3CC; varaibles.scss:ssä?

Riittäisikö että on joku class käytössä, jonka voi asettaa. Eli olisi muutama valmis menu-class joista yksi noudattaa TIMin värimaailmaa.

In GitLab by @vivanauk on Jul 30, 2019, 13:10

Saako menun aukeamaan niin, että klikkaa missä vaan rivillä, niin aukeaa. Nyt jos on lyhyt teksti, pitää mennä tarkalleen takestin kohdalle?

Venytin klikattavan alueen spania niin, että aukeaa koko rivin laajuudelta (aivan reunassa taitaa margin sotkea sen, mutta se on vain muutamia pikseleitä).

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

Valikko sulkeutuu nyt myös klikkaamalla hiirellä sen ulkopuolelta. Vähän erikoisesti tosin se ei sulkeudu heti jos painaa oikeasta laidasta, vaan vasta kun vie hiiren takaisin valikon lähelle klikkauksen jälkeen. Näin siis vaikka klikkauksen vaikutusalueenhan pitäisi olla koko body. Olisiko se sitten niin, että se ei päivitä valikon aukiolotiloja ym. ennen kuin hiiri käy siellä?

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

Valikko sulkeutuu nyt myös klikkaamalla hiirellä sen ulkopuolelta. Vähän erikoisesti tosin se ei sulkeudu heti jos painaa oikeasta laidasta, vaan vasta kun vie hiiren takaisin valikon lähelle klikkauksen jälkeen. Näin siis vaikka klikkauksen vaikutusalueenhan pitäisi olla koko body. Olisiko se sitten niin, että se ei päivitä valikon aukiolotiloja ym. ennen kuin hiiri käy siellä?

Joo, jos käyttä Angularia ja muuttelet sen muuttujia komponentin ulkopuolella, niin se eri suorita digets kierroksia kai muuten kuin kursorin ollessa komponentin alueella. Jos voisi kutsuja jotakin komponentin metodia, niin silloin kai saisi. Jos se automaattisesti sitten ei-muuttujiin luotaten tekee jonkin homman.

Vesa

In GitLab by @vivanauk on Jul 30, 2019, 14:33

Rajoitin tyyliattribuutteja (taustaväri & tekstin koko ja väri) vaikuttamaan vain menupalkkiin eikä siis pudotusvalikoihin. Siinä oli nimittäin ongelmia esim. em-yksikkö fonttikoossa muutti fonttia joka menutasossa suuremmaksi (eli alialimenuissa oli jo paljon suurempi kuin palkissa) ja taustavärin hover-efekti jonka lisäsin juuri ei olisi toiminut oikein. Muutoinkin sama taustaväri palkissa ja valikoissa ei olisi aina mielekäs. Valikoiden omat tyyliasetukset voisi lisätä sitten erillisinä.

In GitLab by @vivanauk on Jul 31, 2019, 12:59

Lisäsin menualkiokohtaisen width-asetuksen, joka tulee menu-attribuutin sisään omalle rivilleen, vaikuttaen edelliseen menualkioon. Samalla logiikalla voisi laittaa muutkin varmaan.

In GitLab by @vivanauk on Jul 31, 2019, 13:51

Pluginissa onkin jokin tarkastus jonka vuoksi ne eivät näy kirjaantumattomana? Esim. https://timdevs02-5.it.jyu.fi/view/menu-plugin/avoin-testi.

In GitLab by @vesal on Jul 31, 2019, 14:36

Pluginissa onkin jokin tarkastus jonka vuoksi ne eivät näy kirjaantumattomana? Esim. https://timdevs02-5.it.jyu.fi/view/menu-plugin/avoin-testi.

Oletuksena voi olla noin erityisesti csPluginia varten kun ei ole minne sitten vastausket tallennettaisiin. Mutta tuon saanee jostakin poiskin, koska muistaakseni voi sanóa csPluginillekin että näkyy anonymous.

Mutta kokeiles jos overrideät tuon (E:\tim\timApp\modules\py\pluginserver_flask.py):

def render_plugin_html(m: GenericHtmlModel[PluginInput, PluginMarkup, PluginState]): """Renders HTML for a plugin.

:param m: The plugin HTML schema.
:return: HTML.
"""
if m.user_id == "Anonymous":
    return render_plugin_with_login_request(m)
if is_lazy(m):
    return render_plugin_lazy(m)
return m.get_real_html()

omassa komponentissa.

Vesa

In GitLab by @vesal on Jul 31, 2019, 14:38

def render_plugin_html(m: GenericHtmlModel[PluginInput, PluginMarkup, PluginState]): """Renders HTML for a plugin.
:param m: The plugin HTML schema.
:return: HTML.
"""
if m.user_id == "Anonymous":
    return render_plugin_with_login_request(m)
if is_lazy(m):
    return render_plugin_lazy(m)
return m.get_real_html()

Ja koska menu ei ole varmaan myöskään laiska koskaan, niin voisi jättää pelkän tuon viimeisen rivin omaan pluginiin.

Vesa

In GitLab by @vivanauk on Aug 1, 2019, 11:45

Miten tällainen overridetään?

Kokeilin tehdä tätä multihtml-reitin kautta, kun se näyttäisi olevan se, mistä "ylempää" kutsutaan tuota render_plugin_html:ää, mutta sillä ei ollut vaikutusta.

Ainoat mitkä saisin sellaisenaan overridettyä olivat HtmlModelin sisällä olevat metodit kuten get_maybe_empty_static_html, mutta sehän ei riitä vaikka sen vaihtaisi näyttämään koko pluginin staticin sijaan, kun ennen sen kutsumista flaskissa ylle lisätään myös login-pyyntö.

In GitLab by @vesal on Aug 1, 2019, 11:47

Miten tällainen overridetään?

Kokeilin tehdä tätä multihtml-reitin kautta, kun se näyttäisi olevan se, mistä "ylempää" kutsutaan tuota render_plugin_html:ää, mutta sillä ei ollut vaikutusta.

Eikös tuossa riitä vain kirjoittaa uusi versio tuosta metodista samalla nimellä omaan luokkaan?

In GitLab by @vivanauk on Aug 1, 2019, 12:09

Eikös tuossa riitä vain kirjoittaa uusi versio tuosta metodista samalla nimellä omaan luokkaan?

Tällä ei ollut omaa luokkaa ja jos laitan containerLink.pyn kautta kuten timTablella on, se haluaa multihtml_direct_call ja html-muunnokset myös, mutta olin tehnyt sen kaiken selaimen puolella.

In GitLab by @vesal on Aug 1, 2019, 12:22

  Eikös tuossa riitä vain kirjoittaa uusi versio tuosta metodista samalla nimellä omaan luokkaan?
Tällä ei ollut omaa luokkaa ja jos laitan containerLink.pyn kautta kuten timTablella on, se haluaa multihtml_direct_call ja html-muunnokset myös, mutta olin tehnyt sen kaiken selaimen puolella.

Missäs se koodi nyt on? Miltä se näyttää?

Kyllähän se periaattessa kannattaisi periä tuolta kuten importData on tehty. Ei siinä .py puolelle tule paljoa koodia kun se vaan sen markupin välitää eteenpäin.

Vesa

In GitLab by @vivanauk on Aug 1, 2019, 12:40

Missäs se koodi nyt on? Miltä se näyttää?

Siivosin tästä yritelmiä pois, render_plugin_html roikkuu nyt siellä irrallaan (rivi 259): timMenu.py

Kyllähän se periaattessa kannattaisi periä tuolta kuten importData on tehty.

Tuon pohjaltahan tämä on tehty, mutta en ihan hahmota missä mitäkin tapahtuu. Menun parsinta tehdään get_browser_jsonin overridessä.

In GitLab by @vesal on Aug 1, 2019, 13:51

Siivosin tästä yritelmiä pois, render_plugin_html roikkuu nyt siellä irrallaan (rivi 259): timMenu.py
  Kyllähän se periaattessa kannattaisi periä tuolta kuten importData on tehty.
Tuon pohjaltahan tämä on tehty, mutta en ihan hahmota missä mitäkin tapahtuu. Menun parsinta tapahtuu get_browser_jsonin overridessä.

Oisko se tuossa luokassa:

https://gitlab.com/tim-jyu/tim/blob/b4ebc29f71c31b979e2c73e467797e61675c9f8f/timApp/plugin/timmenu/timMenu.py#L231

sanoa mitä tehdään missäkin metodissa ja katsoa mitä overridetään tuolta:

https://gitlab.com/tim-jyu/tim/blob/b4ebc29f71c31b979e2c73e467797e61675c9f8f/timApp/modules/py/pluginserver_flask.py#L163

In GitLab by @vivanauk on Aug 2, 2019, 10:48

marked the task Menujen aukeamiseen automatiikkaa niin, ettei leikkaannu ulos ruudulta mutta ei myöskään "hypi" as completed

In GitLab by @vivanauk on Aug 2, 2019, 11:01

Oisko se tuossa luokassa:

https://gitlab.com/tim-jyu/tim/blob/b4ebc29f71c31b979e2c73e467797e61675c9f8f/timApp/plugin/timmenu/timMenu.py#L231

sanoa mitä tehdään missäkin metodissa ja katsoa mitä overridetään tuolta:

https://gitlab.com/tim-jyu/tim/blob/b4ebc29f71c31b979e2c73e467797e61675c9f8f/timApp/modules/py/pluginserver_flask.py#L163

Login promptin tulemisesta pluginin kohdalle päätetään kaiketi tuon luokan ulkopuolelta (render_plugin_htmlssä) eli jos luen tuota nyt oikein, niin tuon luokan metodien overridauksella ei pääse muuttamaan sitä. Eilen siis sain korkeintaan sain niin, että tulee sekä login prompt että toimiva menu staticin tilalla.

In GitLab by @Smibu on Aug 2, 2019, 11:14

Olen parhaillaan katselmoimassa tätä, annan jonkun ratkaisun tuohon login-juttuun samalla.

In GitLab by @vesal on Aug 2, 2019, 11:19

Olen parhaillaan katselmoimassa tätä, annan jonkun ratkaisun tuohon login-juttuun samalla.

Se olisi hyvä olla jos sillä flask-tasolla joku optio, jolla pluginia tehdessä voi sanoa toimii ilman temppuja myös kirjaantmattomille.

Esim juuri menu on tällainen missä ei pitisi olla (vielä?) väliä sillä onko kirjaantunut.

Toki sitten erikseen menussa voisi olla säätöjä kuten

sammuuko muualla klikatessa
onko ikinä topmenu

jne, jotka vaikuttavat erityisesti esteellisyyspuolella. Silloin käyttäjän pitäisi jotenkin voida sanoa "globaalisti" että haluan tällaisen käytöksen. Muihin tuo tieto sitten tallennettaisiin. Jokaiseen menuu sitä ei erikseen kannata tallentaa vaan tavallaan sen pitäisi ehkä tallentua anwer-tauluun "plugin-luokan" ja käyttäjän avaimilla. Tällä hetkellähän plugineissa ei ole tuollaista "globaalia" tallennusaavinta vaan aina pluginin nimi määrää sen mihin tallentuu.

In GitLab by @vivanauk on Aug 3, 2019, 24:38

Tosiaan nyt voi valikkokohtaisesti säätää, millä käyttöoikeuksilla se näkyy. Tietysti jos on edit-oikeus, niin piilotetut kohdat saa näkyviin editorissa vaikka vaadittaisiinkin manage tai owner, mutta ei varmaan helppoa ratkaisua tuohon ole.

Oletan että koko pluginille näkyvyyden saa säädettyä jollain TIMin valmiilla jutulla?

In GitLab by @vesal on Aug 3, 2019, 24:41

Oletan että koko pluginille näkyvyyden saa säädettyä jollain TIMin valmiilla jutulla?

Joo, onhan sille erilaisia tapoja. Esim ryhmään kuulumisen tms perusteella. Noistakerrottu satunniasutus-dokumentissa.

In GitLab by @vivanauk on Aug 5, 2019, 16:45

marked the task Schemat/modelit ja eval()-funktiosta eroon pääseminen as completed

In GitLab by @vivanauk on Aug 5, 2019, 16:50

Joo, onhan sille erilaisia tapoja. Esim ryhmään kuulumisen tms perusteella. Noistakerrottu satunniasutus-dokumentissa.

Eli tässä riittää valikkokohtaiset säädöt ja koko valikkopalkin (eli pluginin) piilotus hoidetaan TIMin valmiilla ehdoilla?

Halutaanko hoverOpen vielä muuten?

In GitLab by @vesal on Aug 5, 2019, 17:41

Eli tässä riittää valikkokohtaiset säädöt ja koko valikkopalkin (eli pluginin) piilotus hoidetaan TIMin valmiilla ehdoilla?

Joo, koko menun saa noilla sitten miten haluaa.

Halutaanko hoverOpen vielä muuten?

Katsotaan haluaako sitä kukaan. Esteettömyyden kannalta se ei ole hyvä, mutta haluaako tavallinen käyttäjä sitä. Kosketus näytölläkään se ei toimi tietenkään.

Tähtäisin että sulkee tämän homman sen verran että saisi jonkin verion tuotantoon kokeiltavaksi :-)

Vesa

In GitLab by @vivanauk on Aug 6, 2019, 11:34

Tähtäisin että sulkee tämän homman sen verran että saisi jonkin verion tuotantoon kokeiltavaksi :-)

Olikohan tämä sitten valmis mergettäväksi? GitLabin testit menevät läpi ja tiedossa ei ole muita ongelmia kuin mat. kaavojen toiminta ja useamman kuin yhden topMenun saaminen samaan dokumenttiin.

Jäljellä olisi Mikan ehdottama alimenujen muuttaminen omaksi komponentikseen (millä saisi html templaten yksinkertaisemmaksi ja menujen rekursion helpommin), mutta voi varmaan laittaa tuotantoon ilman sitä, sillä peruskäyttäjiin se ei vakuta juurikaan.

In GitLab by @vivanauk on Aug 6, 2019, 11:54

Ai niin paitsi valikoiden leikkaantuminen pois editorin previewissä pitänee vielä korjata.

In GitLab by @vivanauk on Aug 6, 2019, 12:37

marked the task Pluginin tyylien erottaminen omaan tiedostoonsa as completed

In GitLab by @vivanauk on Aug 7, 2019, 11:04

Sitten kun on mergetty, niin menevätkö timMenu-ohjeet TIMin ohjeiden pääsivulle?

Ja pitäisikö olla oma kortti/haara tämän muutoksille/lisäyksille? Ainakin seuraavat ovat tiedossa (ja lisää jos nousee esiin):

topMenun "nytkähdys" ja useamman näkyminen kerrallaan
menurakenteen refaktorointi ja syvyysrajoituksen poisto
hoverOpen (jos käyttäjät kaipaavat sitä)
openingDirection menukohtaisesti (olisi helpohko lisätä)
matemaattisten kaavojen toiminta menujen sisällä

In GitLab by @Smibu on Aug 7, 2019, 11:20

closed via merge request !34

In GitLab by @vesal on Aug 7, 2019, 18:18

Sitten kun on mergetty, niin menevätkö timMenu-ohjeet TIMin ohjeiden pääsivulle?

Riippuu ohjeen pituudesta. JOs enempi kuin pari kappaletta, niin sitte pääohjeeseen miten tehdään kaikkine yksinkertaisin menu ja menuohje omaksi tiedostokseen, johon linkki siitä ykisnkertaisesta ohjeesta ja lopun ohjeluettelosta. Se yksinkertainen ei tarvitse värejä tms, korkeintaan sen topmenu.maininnan ja muuten viite siihen pidempään dokuun.

Ja pitäisikö olla oma kortti/haara tämän muutoksille/lisäyksille? Ainakin seuraavat ovat tiedossa (ja lisää jos nousee esiin):

Varmaan oma kortti "puutteista".

Vesa

TIM-JYU / TIM

Menu-plugin #1419