Skip to content

Commit

Permalink
design work for toolbar
Browse files Browse the repository at this point in the history
  • Loading branch information
Scott Miles committed Apr 10, 2012
1 parent f0e2bfe commit 15b1fcb
Show file tree
Hide file tree
Showing 5 changed files with 650 additions and 171 deletions.
230 changes: 230 additions & 0 deletions design/inline-controlled.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,230 @@
<!doctype html>
<html>
<head>
<title>controlled inline: onyx toolbar design</title>
<link href="../source/css/onyx.css" rel="stylesheet" type="text/css" />
<style>
/*
the 'inline' class sets up a left-to-right container, with vertically centered children
*/
.inline {
white-space: nowrap;
}
.inline > * {
display: inline-block;
vertical-align: middle;
}
.icon {
width: 32px;
height: 32px;
background-image: url(menu-icon-bookmark.png);
}
.bord {
border: 1px solid lightblue;
}
.big {
font-size: 48px;
}
.pad {
padding: 8px;
}
.bg {
background: orange;
}
/*
We can control line-height so that vertical-align: middle
becomes true center. Otherwise, when line-height is in effect
(i.e. if the actual height is less than line height),
user agents pad the line unevenly.
*/
.lhc {
line-height: 0;
}
/*
Defeat line-height control above for children
*/
.lhc > * {
line-height: normal;
}
/*
Enforce line-height 0 for an inline child of an inline (FIXME: fiddly)
*/
.lhc .lhc {
line-height: 0px;
}
/**/
.h {
height: 64px;
}
/*
It's useful to be able to abut toolbars in an inline context
and not worry about varying heights.
Generally icons are the largest elements in a toolbar, and will
drive the height to this size.
We can't set a min-size directly on the toolbar because it
breaks centering (due to interation with line-height).
For some scenarios a developer may want to override the height value.
*/
.stent {
/*
the point of the stent is to force the box height to some minimum, similar
to line-height, but with proper vertical centering
*/
height: 72px;
/* the width is 0, but it adds some size to the inline because of ? */
width: 0px;
visibility: hidden;
}
.stent-fix {
/* stent imparts mystery width to it's parent */
/* setting font-size doesn't affect the mystery width */
/*font-size: 0px;*/
/* floating the stent prevents it from stenting */
/*float: left;*/
/* on non-mozilla, mystery size can be removed this way, but the actual pixels needed depends on font size */
/*margin-right: -6px;*/
/* on non-mozilla, this gets us within a few pixels for tested fonts */
margin-right: -0.25em;
}
/* */
.stenty > * {
min-height: 56px;
}
</style>
</head>
<body>
<label>"inline" tests</label>
<br /><br />

<div>
<label>combo content: when the text is larger than non-text objects, vertical centering goes wonky</label>
<div class="inline bord big">
<div>Text in Div</div>
<input />
<div class="icon"></div>
</div>
<br />

<label>... it's possible to control line-height in such a way to repair centering</label>
<div class="inline bord big lhc">
<div>Text in Div</div>
<input />
<div class="icon"></div>
</div>
<br />

<hr />

<label>but now setting height or min-height on toolbar breaks centering</label>
<div class="inline bord lhc bg big h">
<div>Text in Div</div>
<input />
<div class="icon"></div>
</div>
<br />

<div class="inline bord big lhc">
<div class="inline bord lhc bg h">
<div>Text in Div</div>
<input />
<div class="icon"></div>
</div>
<div class="inline bord lhc bg h">
<input />
<div class="icon"></div>
</div>
</div>
<br />

<hr />

<label>control height on children instead of toolbar</label>
<div class="inline bord big lhc">
<div class="inline bord lhc bg">
<div>Text in Div</div>
<input />
<div class="icon"></div>
</div>
<div class="inline bord lhc bg">
<input />
<div class="icon"></div>
</div>
</div>
<br />
<div class="inline bord big lhc">
<div class="inline bord lhc bg stenty">
<div>Text in Div</div>
<input />
<div class="icon"></div>
</div>
<div class="inline bord lhc bg stenty">
<input />
<div class="icon"></div>
</div>
</div>
<br />

<hr />

<label>it's possible to use a stent to effect min-height, but for unknown reasons, even a 0-width stent affects parent width</label>
<div class="inline bord big lhc">
<div class="inline bord lhc bg">
<div>Text in Div</div>
<input />
<div class="icon"></div>
</div>
<div class="inline bord lhc bg">
<input />
<div class="icon"></div>
</div>
</div>
<br />
<div class="inline bord big lhc">
<div class="inline bord lhc bg">
<div class="stent"></div>
<div>Text in Div</div>
<input />
<div class="icon"></div>
</div>
<div class="inline bord lhc bg">
<div class="stent"></div>
<input />
<div class="icon"></div>
</div>
</div>
<br />

<label>using img as stent node makes no difference</label>
<div class="inline bord big lhc">
<div class="inline bord lhc bg">
<img class="stent" />
<div>Text in Div</div>
<input />
<div class="icon"></div>
</div>
<div class="inline bord lhc bg">
<img class="stent" />
<input />
<div class="icon"></div>
</div>
</div>
<br />

<label>using negative margin on stent can approximate 0 width</label>
<div class="inline bord big lhc">
<div class="inline bord lhc bg">
<div class="stent stent-fix"></div>
<div>Text in Div</div>
<input />
<div class="icon"></div>
</div>
<div class="inline bord lhc bg">
<div class="stent stent-fix"></div>
<input />
<div class="icon"></div>
</div>
</div>
<br />
</div>
</body>
</html>
102 changes: 102 additions & 0 deletions design/inline.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!doctype html>
<html>
<head>
<title>inline: onyx toolbar design</title>
<link href="../source/css/onyx.css" rel="stylesheet" type="text/css" />
<style>
/*
the 'inline' class sets up a left-to-right container, with vertically centered children
*/
.inline {
white-space: nowrap;
}
.inline > * {
display: inline-block;
vertical-align: middle;
}
.icon {
width: 32px;
height: 32px;
background-image: url(menu-icon-bookmark.png);
}
.bord {
border: 1px solid lightblue;
}
.big {
font-size: 48px;
}
.pad {
padding: 8px;
}
.mh {
min-height: 124px;
}
.lh {
line-height: 86px;
}
</style>
</head>
<body>
<label>"inline" tests</label>
<br /><br />
<div>
<label>no content</label>
<div class="inline bord"></div>
<br />

<label>text only content</label>
<div class="inline bord">Text</div>
<br />

<label>div content</label>
<div class="inline bord">
<div>Text in Div</div>
</div>
<br />

<label>input content</label>
<div class="inline bord">
<input class="" />
</div>
<br />

<label>icon content</label>
<div class="inline bord">
<div class="icon"></div>
</div>
<br />

<label>combo content</label>
<div class="inline bord">
<div>Text in Div</div>
<input class="" />
<div class="icon"></div>
</div>
<br />

<label>combo content: when the text is larger than non-text objects, vertical centering goes wonky</label>
<div class="inline bord big">
<div>Text in Div</div>
<input class="" />
<div class="icon"></div>
</div>
<br />

<label>controlling height</label>
<div class="inline bord big mh">
<div>Text in Div</div>
<input class="" />
<div class="icon"></div>
</div>
<br />

<label>controlling line-height</label>
<div class="inline bord big lh pad">
<div>Text in Div</div>
<input class="" />
<div class="icon"></div>
</div>
<br />
</div>
</body>
</html>
Loading

0 comments on commit 15b1fcb

Please sign in to comment.