changeset 125:64f73525503b

Use button toolbar instead of nav.
author Edho Arief <edho@myconan.net>
date Mon, 12 Nov 2012 16:22:03 +0700
parents 4a8cefa814f1
children bf214f66874d
files app/assets/javascripts/application.js app/assets/javascripts/init.tabs.js app/views/pastes/show.html.erb
diffstat 3 files changed, 26 insertions(+), 24 deletions(-) [+]
line wrap: on
line diff
--- a/app/assets/javascripts/application.js	Mon Nov 12 15:33:11 2012 +0700
+++ b/app/assets/javascripts/application.js	Mon Nov 12 16:22:03 2012 +0700
@@ -13,6 +13,7 @@
 //= require jquery
 //= require jquery_ujs
 //= require twitter/bootstrap/tab
+//= require twitter/bootstrap/button
 //= require twitter/bootstrap/dropdown
 //= require prettify
 //= require marked
--- a/app/assets/javascripts/init.tabs.js	Mon Nov 12 15:33:11 2012 +0700
+++ b/app/assets/javascripts/init.tabs.js	Mon Nov 12 16:22:03 2012 +0700
@@ -1,5 +1,5 @@
 $(document).ready(function() {
-  if ($('#paste-tabs').length == 1) {
+  if ($('#paste-show').length == 1) {
     raw = $('#plain pre').text();
 
     marked.setOptions({
@@ -31,7 +31,7 @@
 
     paste_resize = function(size) {
       var paste = $('#paste'),
-        title = $('#tab-resize a.btn');
+        title = $('#paste-resize a.btn');
       title.html(title.html().replace(/(auto|\d+px)/, size));
       if (size == 'auto') {
         paste.css('width', '');
@@ -43,11 +43,11 @@
       update_state();
     }
 
-    $('#paste-tabs > li > a').click(function() {
+    $('#paste-mode a').click(function() {
       $('#paste').data('mode', $(this).prop('href').split('#')[1]);
       update_state();
     });
-    $('#tab-resize ul a').click(function() {
+    $('#paste-resize ul a').click(function() {
       paste_resize($(this).data('size'));
       $('.open').removeClass('open');
       return false;
--- a/app/views/pastes/show.html.erb	Mon Nov 12 15:33:11 2012 +0700
+++ b/app/views/pastes/show.html.erb	Mon Nov 12 16:22:03 2012 +0700
@@ -4,26 +4,27 @@
   <h1><%= content_for :title %></h1>
 </div>
 
-<div class="tabbable">
-  <ul id="paste-tabs" class="nav nav-tabs">
-    <li class="active"><%= link_to 'Plain', '#plain', :data => { :toggle => 'tab' } %></li>
-    <li><%= link_to 'Highlight', '#highlight', :data => { :toggle => 'tab' } %></li>
-    <li><%= link_to 'Markdown', '#markdown', :data => { :toggle => 'tab' } %></li>
-    <li class="pull-right">
-      <div class="btn-group" id="tab-resize">
-        <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">
-          Width: auto
-          <span class="caret"></span>
-        </a>
-        <ul class="dropdown-menu">
-          <li><a href="#" data-size="auto">auto</a></li>
-          <li><a href="#" data-size="560px">560px</a></li>
-          <li><a href="#" data-size="760px">760px</a></li>
-          <li><a href="#" data-size="960px">960px</a></li>
-        </ul>
-      </div>
-    </li>
-  </ul>
+
+<div id="paste-show" class="tabbable">
+  <div class="btn-toolbar">
+    <div id="paste-mode" class="btn-group" data-toggle="buttons-radio">
+      <%= link_to 'Plain', '#plain', :data => { :toggle => 'tab' }, :class => 'btn active' %>
+      <%= link_to 'Highlight', '#highlight', :data => { :toggle => 'tab' }, :class => 'btn' %>
+      <%= link_to 'Markdown', '#markdown', :data => { :toggle => 'tab' }, :class => 'btn' %>
+    </div>
+    <div class="btn-group" id="paste-resize">
+      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+        Width: auto
+        <span class="caret"></span>
+      </a>
+      <ul class="dropdown-menu">
+        <li><a href="#" data-size="auto">auto</a></li>
+        <li><a href="#" data-size="560px">560px</a></li>
+        <li><a href="#" data-size="760px">760px</a></li>
+        <li><a href="#" data-size="960px">960px</a></li>
+      </ul>
+    </div>
+  </div>
   <div id="paste" data-mode="plain" data-width="auto" class="tab-content">
     <div class="tab-pane active" id="plain">
       <pre><%= @paste.paste %></pre>