Просмотр исходного кода

HUE-322. CSS Modules

ButtonBar → Bar
Thomas Aylott 15 лет назад
Родитель
Сommit
2cb46da512

+ 10 - 10
apps/jframegallery/src/jframegallery/templates/gallery/OOCSS.ButtonBar.Paginator.html → apps/jframegallery/src/jframegallery/templates/gallery/OOCSS.Bar.Paginator.html

@@ -2,30 +2,30 @@
 <html>
 <head>
 	<meta http-equiv=Content-type content="text/html; charset=utf-8">
-	<title>OOCSS Component: ButtonBar.Paginator </title>
+	<title>OOCSS Component: Bar.Paginator </title>
 
 	<link rel=stylesheet href="/static/css/reset.css">
 	<link rel=stylesheet href="/static/css/shared.css">
 	<link rel=stylesheet href="/static/oocss/Icon.css">
 	<link rel=stylesheet href="/static/oocss/Button.css">
-	<link rel=stylesheet href="/static/oocss/ButtonBar.css">
-	<link rel=stylesheet href="/static/oocss/ButtonBar.Paginator.css">
+	<link rel=stylesheet href="/static/oocss/Bar.css">
+	<link rel=stylesheet href="/static/oocss/Bar.Paginator.css">
 
 	<link rel=stylesheet href="../../../../../../desktop/core/static/css/reset.css">
 	<link rel=stylesheet href="../../../../../../desktop/core/static/css/shared.css">
 	<link rel=stylesheet href="../../../../../../desktop/core/static/oocss/Icon.css">
 	<link rel=stylesheet href="../../../../../../desktop/core/static/oocss/Button.css">
-	<link rel=stylesheet href="../../../../../../desktop/core/static/oocss/ButtonBar.css">
-	<link rel=stylesheet href="../../../../../../desktop/core/static/oocss/ButtonBar.Paginator.css">
+	<link rel=stylesheet href="../../../../../../desktop/core/static/oocss/Bar.css">
+	<link rel=stylesheet href="../../../../../../desktop/core/static/oocss/Bar.Paginator.css">
 
 </head>
 <body>
 <div class="print oocss-gallery" style="padding:2ex">
 
-	<h1>Paginator ButtonBar</h1>
-	<p>ButtonBar subclass. Adds a few special rules for the paginator bar component.</p>
+	<h1>Paginator Bar</h1>
+	<p>Bar subclass. Adds a few special rules for the paginator bar component.</p>
 
-	<div class="ButtonBar Paginator">
+	<div class="Bar Paginator">
 		<a href="" class="Button roundLeft"><i class="Icon iFirst">First</i></a>
 		<a href="" class="Button"><i class="Icon iBack">Back</i></a>
 		<a href="" class="Button"><i class="Icon iRefresh">Refresh</i></a>
@@ -34,7 +34,7 @@
 		<a href="" class="Button roundRight"><i class="Icon iLast">Last</i></a>
 	</div>
 
-	<div class="ButtonBar Paginator">
+	<div class="Bar Paginator">
 		<a href="" class="disabled Button roundLeft"><i class="Icon iFirst">First</i></a>
 		<a href="" class="disabled Button"><i class="Icon iBack">Back</i></a>
 		<a href="" class="disabled Button"><i class="Icon iRefresh">Refresh</i></a>
@@ -47,7 +47,7 @@
 
 	<div class="notFocused">
 
-		<div class="ButtonBar Paginator">
+		<div class="Bar Paginator">
 			<a href="" class="Button roundLeft"><i class="Icon iFirst">First</i></a>
 			<a href="" class=Button><i class="Icon iBack">Back</i></a>
 			<a href="" class=Button><i class="Icon iRefresh">Refresh</i></a>

+ 21 - 21
apps/jframegallery/src/jframegallery/templates/gallery/OOCSS.Bar.html

@@ -2,12 +2,12 @@
 <html>
 <head>
 	<meta http-equiv=Content-type content="text/html; charset=utf-8">
-	<title>OOCSS Component: ButtonBar </title>
+	<title>OOCSS Component: Bar </title>
 
 <link rel=stylesheet href="/static/css/reset.css">
 <link rel=stylesheet href="/static/css/shared.css">
 <link rel=stylesheet href="/static/oocss/Button.css">
-<link rel=stylesheet href="/static/oocss/ButtonBar.css">
+<link rel=stylesheet href="/static/oocss/Bar.css">
 
 <link rel=stylesheet href="../../../../../../desktop/core/static/css/reset.css">
 <link rel=stylesheet href="../../../../../../desktop/core/static/css/shared.css">
@@ -18,20 +18,20 @@
 <body>
 <div class="oocss-gallery" style="padding:2ex">
 
-<h1>ButtonBar</h1>
-<p>The ButtonBar component removes all the space between its children<br>
+<h1>Bar</h1>
+<p>The Bar component removes all the space between its children<br>
 	so that they bump right up against eachother.</p>
 
-<p><strong>Without</strong> the ButtonBar class</p>
+<p><strong>Without</strong> the Bar class</p>
 <p>
 	<a class=Button>Button </a>
 	<a class=Button>Button </a>
 	<a class=Button>Button </a>
 </p>
 
-<p><strong>With</strong> the ButtonBar class</p>
+<p><strong>With</strong> the Bar class</p>
 
-<p class=ButtonBar>
+<p class=Bar>
 	<a class=Button>Button </a>
 	<a class=Button>Button </a>
 	<a class=Button>Button </a>
@@ -41,7 +41,7 @@
 
 <p>It also forces the whole block to behave as a solid block that cannot break or wrap.</p>
 
-<div class=ButtonBar>
+<div class=Bar>
 	<a class="Button">A Button</a>
 	<button class="Button" style="max-width:30ex">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt…</button>
 	<a class="Button">A Button</a>
@@ -55,7 +55,7 @@
 </div>
 
 <p>To force breaks you may use a <code>&lt;BR&gt;</code> tag.</p>
-<div class=ButtonBar>
+<div class=Bar>
 	<a class=Button>Button </a>
 	<a class=Button>Button </a>
 	<a class=Button>Button </a>
@@ -67,10 +67,10 @@
 
 <hr>
 <h2>Vertically align the buttons</h2>
-<p>To vertically align the buttons in a ButtonBar simply add a valign attribute.</p>
-<p>e.g. <code>&lt;p class=ButtonBar valign=<strong>bottom</strong>&gt;</code> or <code>&lt;p class=ButtonBar valign=<strong>top</strong>&gt;</code></p>
+<p>To vertically align the buttons in a Bar simply add a valign attribute.</p>
+<p>e.g. <code>&lt;p class=Bar valign=<strong>bottom</strong>&gt;</code> or <code>&lt;p class=Bar valign=<strong>top</strong>&gt;</code></p>
 
-<p class=ButtonBar valign=bottom>
+<p class=Bar valign=bottom>
 	<a class="Button">A Button</a>
 	<button class="Button" style="max-width:30ex">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt…</button>
 	<a class="Button">A Button</a>
@@ -78,7 +78,7 @@
 	<code>&nbsp;valign=<strong>bottom</strong></code>
 </p>
 
-<p class=ButtonBar>
+<p class=Bar>
 	<a class="Button">A Button</a>
 	<button class="Button" style="max-width:30ex">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt…</button>
 	<a class="Button">A Button</a>
@@ -86,7 +86,7 @@
 	<span><code>&nbsp;valign</code> not set</span>
 </p>
 
-<p class=ButtonBar valign=top>
+<p class=Bar valign=top>
 	<a class="Button">A Button</a>
 	<button class="Button" style="max-width:30ex">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt…</button>
 	<a class="Button">A Button</a>
@@ -97,31 +97,31 @@
 
 <hr>
 <h2>Font Size</h2>
-<p>The font-size for the contents of a ButtonBar is hard-coded at 11px.</p>
+<p>The font-size for the contents of a Bar is hard-coded at 11px.</p>
 
 <h3>Custom CSS</h3>
 
 <p>To override this setting, add the following to your app's custom css file:</p>
 
-<pre><code><strong>.MyApp </strong>.ButtonBar > * {
+<pre><code><strong>.MyApp </strong>.Bar > * {
 	font-size:22px;
 }</code></pre>
 
 <p><em>Note: replace <code>MyApp</code> with the class of your actual app.</em></p>
 
-<h3>Subclass ButtonBar</h3>
+<h3>Subclass Bar</h3>
 
-<p>Alternatively you can subclass ButtonBar itself.</p>
+<p>Alternatively you can subclass Bar itself.</p>
 
 <p>CSS: Create your subclass.</p>
 
-<pre><code>.ButtonBar<strong>.MyCustomButtonBar3</strong> > * {
+<pre><code>.Bar<strong>.MyCustomBar3</strong> > * {
 	font-size:22px;
 }</code></pre>
 
-<p>HTML: Add your new class to a ButtonBar element.</p>
+<p>HTML: Add your new class to a Bar element.</p>
 
-<pre><code>&lt;p class=&quot;ButtonBar MyCustomButtonBar3&quot;&gt;&hellip;</code></pre>
+<pre><code>&lt;p class=&quot;Bar MyCustomBar3&quot;&gt;&hellip;</code></pre>
 
 
 </div>

+ 2 - 2
desktop/core/src/desktop/templates/index.mako

@@ -26,8 +26,8 @@
   <link rel="stylesheet" href="/static/css/desktop.css" type="text/css" media="screen" charset="utf-8">
 
   <link rel="stylesheet" href="/static/oocss/Button.css">
-  <link rel="stylesheet" href="/static/oocss/ButtonBar.css">
-  <link rel="stylesheet" href="/static/oocss/ButtonBar.Paginator.css">
+  <link rel="stylesheet" href="/static/oocss/Bar.css">
+  <link rel="stylesheet" href="/static/oocss/Bar.Paginator.css">
   <link rel="stylesheet" href="/static/oocss/Grid.css">
   <link rel="stylesheet" href="/static/oocss/Icon.css">