Úprava zobrazování dialogových oken

vojir commented 10 years ago

"Dialogová okna" (obsah otevíraný nad overlayerem - nastavení atp.) by se měla chovat tímto způsobem:

pokud je zobrazený obsah výškově menší, než plocha monitoru, měl by se zobrazit vycentrovaně a být zafixován proti skrolování oknem
pokud je zobrazený obsah výškově větší, než plocha monitoru, měl by se zobrazit cca 10px pod začátkem viditelného obsahu a být skrolovatelný společně s celým oknem
- bylo by hezké, aby bylo možné skrolovat jen výšku, kterou zabírá daný obsah, ale není to úplně nutné

PreVaDu commented 10 years ago

bod 2 je v podstatě nynější stav, že? narazil jsem na divnou chybu - v IE11 se okno settings nezobrazí (Win 8.1), stalo se to i Vám?

vojir commented 10 years ago

Potvrzuji, že se okno nastavení v IE opravdu nezobrazuje.

vojir commented 9 years ago

styly pro vycentrování modálního okna (bez JS)

background: white; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 40px;

PreVaDu commented 9 years ago

Snažím se to pojmout tak, jak je myšleno, ale ztratil jsem se v tom. Momentální stav je takový, jaký skoro odpovídá druhé možnosti - okno větší než plocha. Jen je problém s tím, že ho nejde skrolovat. Nově má přibýt v případě menšího okna než plocha monitoru vycentrování na střed nejen horizontálně, ale i vertikálně. Je to tak?

Dosáhnout toho lze pouze za pomoci JS, který musí spočítat výšku obsahu, porovnat s výškou monitoru a pokud bude poměr dle zadání, tak se třeba přidá třída, která upraví pozicování. Bez JS nevidím řešení. Navíc se musí vykreslování všech prvků změnit, momentálně je to tak, že se všude zavolá fce na zobrazení boxu a potom se do něho dodává obsah, nově to musí být obráceně, aby bylo dle čeho počítat. Pokud se může stát, že se výška boxu během práce s ním změní, budeme to znovu přepočítávat?

Když si však vezmu svůj velký monitor, tak se při zarovnání na 50% třeba přidání atributu dostávám s boxem na úroveň patičky a to mi připadá docela nepřirozeně nízko, nynější stav mi přijde lepší.

PreVaDu commented 9 years ago

Aby nedošlo k nedorozumění, udělal jsem raději testovací soubor. http://tester.rts-game.com/overlay-flexible.html Box se umístí při načtení tak, jak by měl být, je tedy potřeba reloadovat stránku při každé změně výšky prohlížeče.

Prosím o potvrzení, zda se zobrazuje box dle očekávání, neboli při menší obrazovce umístěn skoro nahoře a skroluje se, při větší vždy uprostřed.

Děkuji.

vojir commented 9 years ago

Nevím, jestli jste mi poslal správný soubor, ale u uvedeného souboru je obsah zobrazován vždy zafixovaně - bez ohledu na velikost okna.

Ohledně zadání - je to tak, jak píšete:

dialogové okno, které se nevejde na výšku či na šířku na obrazovku, by mělo být pozicováno absolutně kousek pod horním okrajem, cca s margin: 10px auto;
dialogové okno, které je na výšku menší, než obrazovka, by se mělo zobrazovat vycentrované i vertikálně.

Ohledně vykreslování prvků - jako nejrozumnější variantu bych viděl zjištění po dovykreslení obsahu daného dialogu zjistit jeho výšku a případně přidat třídu pro změnu pozicování - ok, vím, že to bude znamenat přidat zavolání příslušné funkce po vykreslení všech dialogů. Daná funkce pro určení velikosti by se měla volat také při změně velikosti okna.

Ohledně stylů bych to viděl cca takhle (jen příklad - nutné doladit):

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
      div.dialog{
        background: white;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 40px;
      }
      div.dialog.big{
        position: static;
        top: 0;
        left: 0;
        transform: none;      
        margin: 10px auto;
      }

      body{
        position: relative;
      }
      div.overlay{
        position: fixed;
        z-index:100;
        top: 0;
        left: 0;
        height:100%;
        width:100%;
        background-color:#000;
        background-color:rgba(0,0,0,0.5);
        overflow:auto;
      }
    </style>
  </head>
  <body>

    <div class="overlay">
      <div class="dialog" style="width:300px;border:5px solid blue;height:400px;background:white;"></div>
      <!-- <div class="dialog big" style="width:500px;border:5px solid blue;height:800px;background:yellow;"></div>  -->
    </div>
  </body>
</html>

PreVaDu commented 9 years ago

Soubor je v pořádku, v momentě, kdy zmenším okno tak, že je bílý box menší než window.innerHeight a reloadnu, je to pozicované absolutně. Zkoušel jsem všechny prohlížeče. Posílám screenshoty z Chrome.

overlay-bigger overlay-smaller

Styly mám jen ukázkové, reálně mám zachovat design takový, jaký je nyní, že? Zkoušel jsem si jen pozicovaní prvku s JS, abych věděl, co to obnáší.

S tím voláním při změně velikosti okna mi to nepřipadá optimální. Při každém zobrazení boxu se bude řešit způsob pozicování. Jaká je pravděpodobnost, že někdo změní okno během práce s editorem, natožpak zrovna v momentě, kdy má otevřený konkrétní nějaký overlay box? Listener na změnu velikosti může zbytečně zatěžovat prohlížeč a snahou je přesný opak, nebo ne?

vojir commented 9 years ago

Nyní již mi daný ukázkový soubor funguje (nevím, proč předtím nefungoval).

Co se týče události při změně velikosti okna - tento event pravděpodobně stejně budeme muset odchytávat - viděl bych to tak, že k němu pravděpodobně připojíme funkci na reload uživatelského rozhraní (postupně bychom se měli dopracovat k tomu, aby byly přizpůsobené i výšky boxů na pravé straně okna).

PreVaDu commented 9 years ago

Pokud je funkčně ukázka dle představ, udělám tedy odchyt změny okna a implementuji.

PreVaDu commented 9 years ago

Nasazeno na serveru. Při změně umístění proběhne drobný odskok napravo, nemyslím, že to jakkoliv omezuje funkčnost. Resize se již odchytával, přidal jsem volání funkce na rozhodnutí umístění. Volání stejné fce jsem musel přidat pro každý render okna, není to ale moc elegantní. Stejným způsobem se volá zobrazení overlay okna.

Snad jsem nepřehlédnul chybu. Testoval jsem IE11, Chrome, FF, Opera.

vojir commented 9 years ago

Upravte prosím stejným způsobem také zobrazování dialogů s iframem. (např. zobrazení histogramů)

PreVaDu commented 9 years ago

Upravil jsem pozicování boxu, nyní je bez odskoku. Jelikož však nastavuji overlay na 100%, při menším okně a použití horizontálního posuvníku může uživatel vidět "nešedivou" plochu. Řešením je přidat další div mezi overlay a boxem, ale nevím, zda je to vůbec potřeba...

Iframy fungují stejně jako boxy normální, bavíme-li se o pozicování. U showHistogram jsem přidal tlačítko close, je-li jeho funkčnost v pořádku, přidám ho ke všem iframům.

Obecně se mi nezdá moc optimální to, že se velmi často opakují stejné pokyny pro podobné boxy, rozdíl je třeba jen obsah. Většina close event handlerů by mohla být jednotná, stačilo by je registrovat pro celý web a v momentě, kdy uživatel klikně na close, se okno zavře. Vyjímkou by samozřejmě bylo takové okno, kde se při zavření ještě něco navíc děje.

Jedna ukázka: "closeIMWindow", "closeRenameTaskWindow", "closeAddCoefficientWindow", "closeEditCoefficientWindow" a "closeEditConnectiveWindow" jsou všechno fce v ARManager.js, které mají jen jeden obsah - this.UIPainter.hideOverlay();. Proč to nesjednotit do jedné funkce pro všechny? Otázkou další potom je nutnost volat funkci v ARManageru, když lze s UIPainterem pracovat už v UIListeneru a zavolat tak hideOverlay rovnou. Nepřipadá mi to více objektové.

vojir commented 9 years ago

Je nutné, aby overlay překrýval celý obsah okna (blokuje tím užívání jiných prvků - takhle to může vést k nekonzistentnímu chování).

U histogramů tlačítko "close" odstraňte - iframy mají vlastní tlačítko pro zavření (volají javascriptovou funkci parent.close(); ) U některých iframů tam je místo zavíracího tlačítka tlačítko "zpět". Až se potkáme online, domluvíme se na stylech těchto tlačítek.

U zavíracích tlačítek jsem určitě pro sjednocení, otázkou je, jestli je mapovat an funkci this.UIPainter.hideOverlay(), nebo na obecnou funkci close(); [na vysvětlenou - funkce hideOverlay není s ohledem na objektovou strukturu adresovatelná z iframu]

PreVaDu commented 9 years ago

Dohodnuté změny provedeny. IFramy mají navíc close, původní funkce close pro parent volána zevnitř iframe je stále funkční, je u ní poznámka, že se s ní dá dále pracovat. U settings se prováděly změny fixování overlay, předpokládám, že to bylo kvůli velikost daného okna - zapoznámkoval jsem to, časem to zrušíme. Nově nepoužívané funkce jsou zapoznámkované a na všech místech nahrazeny sjednocenou fcí, sjednocené jsou i odkazy, tedy jejich id.

vojir commented 9 years ago

Nefunguje odkaz "close" u editace měr zajímavosti.

PreVaDu commented 9 years ago

Opraveno, děkuji za upozornění.

KIZI / EasyMiner-MiningUI

Úprava zobrazování dialogových oken #12