search

oulan / iui

Automatically exported from code.google.com/p/iui
MIT License
0 stars 0 forks source link

backButton max-width should be dynamic #245

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1.Go to Music demo on iUI intro page
2.click Artist -> Crowded House -> Woodface

What is the expected output? What do you see instead?
Since the tbTitle "Songs" doesn't use all of the toolbar space availible, 
backButton max-width 
should increase to take advantage of this open space.

Please provide any additional information below.
I'm working on a patch that measures the offsetWidth of the title and changes 
the 
backButton max-width accordingly.

Code example coming soon, thought or comments?

Original issue reported on code.google.com by lictor4@gmail.com on 4 May 2010 at 6:07

GoogleCodeExporter commented 9 years ago 
There is at least one other issue related to this in the Issues DB:  Issue #233
So there is definitely room for improvement.  I wonder what else can be or 
needs to be fixed in the .toolbar 
(navigation bar) CSS?

Original comment by msgilli...@gmail.com on 5 May 2010 at 11:39

GoogleCodeExporter commented 9 years ago 
Ya I wondered if there was a similar issue one already, but hadn't seen #233 
before.
This is what I have so far, a replacement for the updatePage function(starting 
at
line 471, dev2)

function updatePage(page, fromPage)
{
    if (!page.id)
        page.id = "__" + (++newPageCount) + "__";

    location.hash = currentHash = hashPrefix + page.id;
    pageHistory.push(page.id);

    var pageTitle = $("pageTitle");

if (page.title)
//////////////////////////////////////////
pageTitle.innerHTML = '<span id="ruler" style="white-space:nowrap;">' + 
page.title +
'</span>';
TextW = $("ruler").offsetWidth;
//////////////////////////////////////////
        pageTitle.innerHTML = page.title;
    var ttlClass = page.getAttribute("ttlclass");
    pageTitle.className = ttlClass ? ttlClass : "";

    if (page.localName.toLowerCase() == "form" && !page.target)
        showForm(page);

    var backButton = $("backButton");
    if (backButton)
    {
        var prevPage = $(pageHistory[pageHistory.length-2]);
        if (prevPage && !page.getAttribute("hideBackButton"))
        {
            backButton.style.display = "inline";
            backButton.innerHTML = prevPage.title ? prevPage.title : "Back";
//////////////////////////////////////////
if (currentWidth > currentHeight){
BtnW = 305 - TextW;
MargW = -125 + (250 - TextW);
titleW = 250;
}else{
BtnW = 205 - TextW;
MargW = -75 + (70 - TextW);
titleW = 150;
}
if(TextW < titleW){
backButton.style.maxWidth= BtnW +  "px";
pageTitle.style.marginLeft= MargW +  "px";
pageTitle.style.width= TextW +  "px";
}
//////////////////////////////////////////
            var bbClass = prevPage.getAttribute("bbclass");
            backButton.className = (bbClass) ? 'button ' + bbClass : 'button';
        }
        else
            backButton.style.display = "none";
    }

}

Pretty hacky and incomplete but feedback is appreciated :-)

Original comment by lictor4@gmail.com on 6 May 2010 at 12:35

GoogleCodeExporter commented 9 years ago 
Here's that code with some comments

//change values for landscape; I guess this will need to have an eventListener, 
so that orientation changes don't break it
if (currentWidth > currentHeight){
//TextW is the px width of the page.title, BtnW will set the max width 
available for the left toolbar button
BtnW = 305 - TextW;
MargW = -125 + (250 - TextW);
//titleW is the default width in iui.css for .toolbar > H1
titleW = 250;
}else{
BtnW = 205 - TextW;
MargW = -75 + (70 - TextW);
titleW = 150;
}
// if we have available space in the toolbar, adjust styles to allow a bigger 
button
if(TextW < titleW){
backButton.style.maxWidth= BtnW +  "px";
// move the toolbar title over... Hopefully centered in the space between tb 
buttons
pageTitle.style.marginLeft= MargW +  "px";
pageTitle.style.width= TextW +  "px";
}
MargW = -125 + (250 - TextW);
titleW = 250;
}else{
BtnW = 205 - TextW;
MargW = -75 + (70 - TextW);
titleW = 150;
}
if(TextW < titleW){
backButton.style.maxWidth= BtnW +  "px";
pageTitle.style.marginLeft= MargW +  "px";
pageTitle.style.width= TextW +  "px";
}

This work *ok* in the music example, as long as you stay in portrait!
I didn't get into the orientation change part of this code idea, hope someone 
could provide some guidance on a solid way to do that.

Original comment by lictor4@gmail.com on 6 May 2010 at 1:09