mercury-rails 0.6.0 → 0.7.0

data/app/assets/stylesheets/mercury/bootstrap-overrides.css

@@ -0,0 +1,60 @@
+/*
+ * Bootsrap Overrides (overrides what's in bootstrap-ish)
+ *---------------------------------------------------------------------------*/
+.btn-group > .btn {
+  margin-right: 0;
+}
+form {
+  margin-bottom: 0;
+}
+fieldset {
+  margin-bottom: 15px;
+  background: #F6F6F6;
+  border: 1px solid #CCC;
+  border-radius: 7px;
+  padding: 10px;
+}
+legend {
+  display: block;
+  position: relative;
+  margin-left: 10px;
+  font-weight: bold;
+  width: auto;
+  padding: 0;
+  font-size: 12px;
+  color: #333333;
+  border: 0;
+  line-height: 1px;
+}
+select {
+  width: auto;
+}
+.form-actions {
+  margin-top: 0;
+  margin-bottom: 0;
+  background-color: transparent;
+}
+.control-group {
+  margin-bottom: 0;
+}
+legend + .control-group {
+  margin-top: 0;
+  -webkit-margin-top-collapse: separate;
+}
+.form-horizontal .control-group {
+  margin-bottom: 0;
+}
+.form-horizontal .controls {
+  margin-left: 150px;
+}
+.form-horizontal hr {
+  margin-left: 150px;
+  border: 0;
+  border-top: 1px solid #ccc;
+}
+label input[type=radio] {
+  margin-right: 5px;
+}
+.form-actions {
+  padding-bottom: 0;
+}

data/app/assets/stylesheets/mercury/lightview.css

@@ -16,7 +16,7 @@
   position: fixed;
   z-index: 10040;
   top: 20px;
-  background: #EFEFEF;
+  background: rgba(239, 239, 239, .7);
   opacity: 0;
   overflow: hidden;
   display: none;
@@ -70,38 +70,6 @@
   border-top: 1px solid #333;
   text-align: right;
 }
-/*
- * Forms
- *----------------------------------------------------------------------------*/
-.mercury-lightview form fieldset {
-  background: #CCC;
-  border: 1px solid #333;
-}
-.mercury-lightview form fieldset.buttons {
-  background: none;
-  border: none;
-}
-.mercury-lightview form select,
-.mercury-lightview form input[type="text"],
-.mercury-lightview form input[type="password"],
-.mercury-lightview form textarea,
-.mercury-lightview form input.text {
-  background: #CCC;
-  color: #000;
-  border: 2px solid #999;
-  -moz-box-shadow: inset 0 0 3px #000000;
-  -webkit-box-shadow: inset 0 0 3px #000000;
-  box-shadow: inset 0 0 3px #000000;
-}
-.mercury-lightview form input[type="button"] {
-  /*border: 2px solid #555;*/
-  /*border-radius: 4px;*/
-  /*background: #222;*/
-  /*color: #FFF;*/
-}
-.mercury-lightview hr {
-  border-color: #CCC;
-}
 /*
  * Specific Lightviews
  *----------------------------------------------------------------------------*/
@@ -129,23 +97,5 @@
   color: #09F;
 }
 #mercury_about a:hover {
-  color: #FFF;
-}
-/* character */
-.mercury-lightview #mercury_character .character {
-  border: 1px solid #444;
-  background: #222;
-}
-.mercury-lightview #mercury_character .character:hover {
-  background: #555;
-  border: 1px solid #CCC;
-}
-/* table */
-.mercury-lightview #mercury_table #table_display {
-  background: #222;
-  border: 1px solid #444;
-  height: 301px;
-}
-.mercury-lightview #mercury_table #table_display td.selected {
-  background: #09F;
+  color: #333;
 }

data/app/assets/stylesheets/mercury/mercury.css

@@ -1,6 +1,7 @@
 /*
  *= require_self
- *= require ./form
+ *= require ./bootstrap-ish
+ *= require ./bootstrap-overrides
  *= require ./dialog
  *= require ./lightview
  *= require ./modal
@@ -8,7 +9,6 @@
  *= require ./toolbar
  *= require ./tooltip
  *= require ./uploader
- *= require ./buttons
  *= require ./all_images
  */
 

data/app/assets/stylesheets/mercury/modal.css

@@ -98,40 +98,30 @@
 .mercury-modal .mercury-display-pane-container {
   overflow: auto;
   margin: -20px -20px 0;
-  padding: 20px 20px 10px;
+  padding: 20px 20px 0;
 }
 .mercury-modal .mercury-display-pane-container .mercury-display-pane {
   float: left;
 }
 .mercury-modal .mercury-display-controls {
-  padding: 15px 0 0;
+  padding-right: 0;
   border-top: 1px solid #CCC;
   text-align: right;
 }
 /*
- * Forms
+ * Specific Modals (eg. htmlEditor)
  *----------------------------------------------------------------------------*/
-.mercury-modal textarea {
+/* html editor */
+#mercury_html_editor textarea {
   resize: none;
   padding: 0;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
-}
-/*
- * Specific Modals (eg. htmlEditor)
- *----------------------------------------------------------------------------*/
-/* html editor */
-#mercury_html_editor textarea {
   margin: 0 0 -2px 0;
-  padding: 0;
   border: 2px solid #CCC;
   width: 100%;
 }
-#mercury_html_editor .mercury-modal-controls {
-  border: 0;
-  margin-top: -2px;
-}
 /* character */
 #mercury_character .character {
   float: left;
@@ -156,28 +146,20 @@
 }
 /* table */
 #mercury_table #table_display {
-  width: 285px;
-  height: 285px;
   float: left;
+  width: 225px;
+  height: 259px;
   padding: 10px;
-  background: #F6F6F6;
-  border: 1px solid #CCC;
-  border-radius: 7px;
-  -moz-border-radius: 7px;
-  overflow:  auto;
+  margin-right: 13px;
+  overflow: auto;
+}
+#mercury_table #table_display .controls {
+  margin: 0;
 }
 #mercury_table #table_display table {
   width: 100%;
   height: 100%;
 }
-#mercury_table #table_display td.selected {
+#mercury_table #table_display .selected {
   background: #09F;
 }
-#mercury_table #table_options {
-  width: 383px;
-  float: left;
-  margin-left: 10px;
-}
-#mercury_table #table_options .inputs:first-child label {
-  width: 36%
-}

data/app/assets/stylesheets/mercury/uploader.css

@@ -12,7 +12,7 @@
   width: 100%;
   height: 100%;
   opacity: .95;
-  background: rgba(0, 0, 0, .65);
+  background: rgba(255, 255, 255, .8);
 }
 .mercury-uploader {
   position: absolute;
@@ -23,13 +23,13 @@
   height: 150px;
   overflow: hidden;
   padding: 15px;
-  background: rgba(0,0,0, .70);
+  background: rgba(239, 239, 239, .70);
   border-radius: 10px;
   -moz-border-radius: 10px;
   -moz-box-shadow: 0 0 40px rgba(0, 0, 0, .9);
   box-shadow: 0 0 40px rgba(0, 0, 0, .9);
   font: normal normal normal 12px/normal Helvetica, Tahoma, Arial, sans-serif;
-  color: #CCC;
+  color: #000;
 }
 .mercury-uploader .mercury-uploader-preview {
   float: left;

data/app/views/mercury/modals/htmleditor.html

@@ -2,12 +2,8 @@
 
   <textarea class="mercury-display-pane-container" rows="5" style="width:100%"></textarea>
 
-  <div class="mercury-display-controls">
-    <fieldset class="buttons">
-      <ol>
-        <li class="commit button"><input class="submit" name="commit" type="submit" value="Save and Replace"/></li>
-      </ol>
-    </fieldset>
+  <div class="form-actions mercury-display-controls">
+    <input class="btn btn-primary" name="commit" type="submit" value="Save and Replace"/>
   </div>
 
 </form>

data/app/views/mercury/modals/link.html

@@ -1,75 +1,81 @@
-<form id="mercury_link" class="mercury-form" style="width:600px">
+<form id="mercury_link" class="form-horizontal" style="width:615px">
 
-  <div class="mercury-display-pane-container">
-    <div class="mercury-display-pane">
+  <div class="form-inputs mercury-display-pane-container">
 
-      <fieldset class="inputs" id="link_text_container">
-        <ol>
-          <li id="link_text_input" class="string input optional stringish">
-            <label class="label" for="link_text">Link Content</label>
-            <input id="link_text" name="link[text]" type="text"/>
-          </li>
-        </ol>
-      </fieldset>
+    <fieldset id="link_text_container">
+      <div class="control-group string optional">
+        <label class="string optional control-label" for="link_text">Link Content</label>
+        <div class="controls">
+          <input class="span6 string optional" id="link_text" name="link[text]" size="50" type="text">
+        </div>
+      </div>
+    </fieldset>
 
-      <fieldset class="inputs">
-        <legend><span>Standard Links</span></legend>
-        <ol>
-          <li id="link_external_url_input" class="string input optional stringish">
-            <label class="label" for="link_external_url"><input name="link_type" type="radio" value="external_url" checked="checked"/>URL</label>
-            <input class="selectable" id="link_external_url" name="link[external_url]" type="text"/>
-          </li>
-        </ol>
-      </fieldset>
+    <fieldset>
+      <legend>Standard Links</legend>
+      <div class="control-group url optional">
+        <label class="url optional control-label" for="link_external_url">
+          <input name="link_type" type="radio" value="external_url" checked="checked"/>URL
+        </label>
+        <div class="controls">
+          <input class="span6 string url optional" id="link_external_url" name="link[external_url]" size="50" type="text">
+        </div>
+      </div>
+    </fieldset>
 
-      <fieldset class="inputs">
-        <legend><span>Index / Bookmark Links</span></legend>
-        <ol>
-          <li id="link_existing_bookmark_input" class="select input optional">
-            <label class="label" for="link_existing_bookmark"><input name="link_type" type="radio" value="existing_bookmark"/>Existing Links</label>
-            <select class="selectable" id="link_existing_bookmark" name="link[existing_bookmark]"></select>
-          </li>
-          <li id="link_new_bookmark_input" class="string input optional stringish">
-            <label class="label" for="link_new_bookmark"><input name="link_type" type="radio" value="new_bookmark"/>Bookmark</label>
-            <input class="selectable" id="link_new_bookmark" name="link[new_bookmark]" type="text"/>
-          </li>
-        </ol>
-      </fieldset>
+    <fieldset>
+      <legend>Index / Bookmark Links</legend>
+      <div class="control-group select optional">
+        <label class="select optional control-label" for="link_existing_bookmark">
+          <input name="link_type" type="radio" value="existing_bookmark"/>Existing Links
+        </label>
+        <div class="controls">
+          <select class="select optional" id="link_existing_bookmark" name="link[existing_bookmark]"></select>
+        </div>
+      </div>
+      <div class="control-group string optional">
+        <label class="string optional control-label" for="link_new_bookmark">
+          <input name="link_type" type="radio" value="new_bookmark"/>Bookmark
+        </label>
+        <div class="controls">
+          <input class="string optional" id="link_new_bookmark" name="link[new_bookmark]" size="50" type="text">
+        </div>
+      </div>
+    </fieldset>
 
-      <fieldset class="inputs">
-        <legend><span>Options</span></legend>
-        <ol>
-          <li id="link_target_input" class="select input optional">
-            <label class="label" for="link_target">Link Target</label>
-            <select id="link_target" name="link[target]">
-              <option value="">Self (the same window or tab)</option>
-              <option value="_blank">Blank (a new window or tab)</option>
-              <option value="_top">Top (removes any frames)</option>
-              <option value="popup">Popup Window (javascript new window popup)</option>
-            </select>
-          </li>
-          <div id="popup_options" class="link-target-options" style="display:none">
-            <li id="link_popup_width_input" class="string input optional stringish">
-              <label class="label" for="link_popup_width">Popup Width</label>
-              <input id="link_popup_width" name="link[popup_width]" type="text"/>
-            </li>
-            <li id="link_popup_height_input" class="string input optional stringish">
-              <label class="label" for="link_popup_height">Popup Height</label>
-              <input id="link_popup_height" name="link[popup_height]" type="text"/>
-            </li>
+    <fieldset>
+      <legend>Options</legend>
+      <div class="control-group select optional">
+        <label class="select optional control-label" for="link_target">Link Target</label>
+        <div class="controls">
+          <select class="select optional" id="link_target" name="link[target]">
+            <option value="">Self (the same window or tab)</option>
+            <option value="_blank">Blank (a new window or tab)</option>
+            <option value="_top">Top (removes any frames)</option>
+            <option value="popup">Popup Window (javascript new window popup)</option>
+          </select>
+        </div>
+      </div>
+      <div id="popup_options" class="link-target-options" style="display:none">
+        <div class="control-group number optional">
+          <label class="number optional control-label" for="link_popup_width">Popup Width</label>
+          <div class="controls">
+            <input class="span2 number optional" id="link_popup_width" name="link[popup_width]" size="50" type="number" value="960">
           </div>
-        </ol>
-      </fieldset>
+        </div>
+        <div class="control-group number optional">
+          <label class="number optional control-label" for="link_popup_height">Popup Height</label>
+          <div class="controls">
+            <input class="span2 number optional" id="link_popup_height" name="link[popup_height]" size="50" type="number" value="800">
+          </div>
+        </div>
+      </div>
+    </fieldset>
 
-    </div>
   </div>
 
-  <div class="mercury-display-controls">
-    <fieldset class="buttons">
-      <ol>
-        <li class="commit button"><input class="submit" name="commit" type="submit" value="Insert Link"/></li>
-      </ol>
-    </fieldset>
+  <div class="form-actions mercury-display-controls">
+    <input class="btn btn-primary" name="commit" type="submit" value="Insert Link">
   </div>
 
-</form>
+</form>

data/app/views/mercury/modals/media.html

@@ -1,82 +1,91 @@
-<form id="mercury_media" class="mercury-form" style="width:600px">
+<form id="mercury_media" class="form-horizontal" style="width:615px">
 
-  <div class="mercury-display-pane-container">
-    <div class="mercury-display-pane">
+  <div class="form-inputs mercury-display-pane-container">
 
-      <fieldset class="inputs">
-        <legend><span>Images</span></legend>
-        <ol>
-          <li id="media_image_url_input" class="string input optional stringish">
-            <label class="label" for="media_image_url"><input name="media_type" type="radio" value="image_url" checked="checked"/>URL</label>
-            <input class="selectable" id="media_image_url" name="media[image_url]" type="text"/>
-          </li>
-        </ol>
-      </fieldset>
+    <fieldset>
+      <legend>Images</legend>
+      <div class="control-group url optional">
+        <label class="url optional control-label" for="media_image_url">
+          <input name="media_type" type="radio" value="image_url" checked="checked"/>URL
+        </label>
+        <div class="controls">
+          <input class="span6 string url optional" id="media_image_url" name="media[image_url]" size="50" type="text">
+        </div>
+      </div>
+    </fieldset>
 
-      <fieldset class="inputs">
-        <legend><span>Videos</span></legend>
-        <ol>
-          <li id="media_youtube_url_input" class="string input optional stringish">
-            <label class="label" for="media_youtube_url"><input name="media_type" type="radio" value="youtube_url"/>YouTube Share URL</label>
-            <input class="selectable" id="media_youtube_url" name="media[youtube_url]" type="text" placeholder="http://youtu.be/Pny4hoN8eII"/>
-          </li>
-          <li id="media_vimeo_url_input" class="string input optional stringish">
-            <label class="label" for="media_vimeo_url"><input name="media_type" type="radio" value="vimeo_url"/>Vimeo URL</label>
-            <input class="selectable" id="media_vimeo_url" name="media[vimeo_url]" type="text" placeholder="http://vimeo.com/25708134"/>
-          </li>
-        </ol>
-      </fieldset>
+    <fieldset>
+      <legend>Videos</legend>
+      <div class="control-group url optional">
+        <label class="url optional control-label" for="media_youtube_url">
+          <input name="media_type" type="radio" value="youtube_url"/>YouTube URL
+        </label>
+        <div class="controls">
+          <input class="span6 string url optional" id="media_youtube_url" name="media[youtube_url]" size="50" type="text" placeholder="http://youtu.be/Pny4hoN8eII">
+        </div>
+      </div>
+      <div class="control-group url optional">
+        <label class="url optional control-label" for="media_vimeo_url">
+          <input name="media_type" type="radio" value="vimeo_url"/>Vimeo URL
+        </label>
+        <div class="controls">
+          <input class="span6 string url optional" id="media_vimeo_url" name="media[vimeo_url]" size="50" type="text" placeholder="http://vimeo.com/25708134">
+        </div>
+      </div>
+    </fieldset>
 
-      <fieldset class="inputs">
-        <legend><span>Options</span></legend>
-        <ol>
-          <div id="image_url" class="media-options">
-            <li id="media_image_alignment_input" class="select input optional">
-              <label class="label" for="media_image_alignment">Alignment</label>
-              <select id="media_image_alignment" name="media[image_alignment]">
-                <option value="">None</option>
-                <option value="left">Left</option>
-                <option value="right">Right</option>
-                <option value="top">Top</option>
-                <option value="middle">Middle</option>
-                <option value="bottom">Bottom</option>
-                <option value="absmiddle">Absolute Middle</option>
-                <option value="absbottom">Absolute Bottom</option>
-              </select>
-            </li>
+    <fieldset>
+      <legend>Options</legend>
+      <div class="media-options" id="image_url_options">
+        <div class="control-group select optional">
+          <label class="select optional control-label" for="media_image_alignment">Alignment</label>
+          <div class="controls">
+            <select class="select optional" id="media_image_alignment" name="media[image_alignment]">
+              <option value="">None</option>
+              <option value="left">Left</option>
+              <option value="right">Right</option>
+              <option value="top">Top</option>
+              <option value="middle">Middle</option>
+              <option value="bottom">Bottom</option>
+              <option value="absmiddle">Absolute Middle</option>
+              <option value="absbottom">Absolute Bottom</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="media-options" id="youtube_url_options" style="display:none">
+        <div class="control-group number optional">
+          <label class="number optional control-label" for="media_youtube_width">Width</label>
+          <div class="controls">
+            <input class="span2 number optional" id="media_youtube_width" name="media[youtube_width]" size="50" type="number" value="560">
+          </div>
+        </div>
+        <div class="control-group number optional">
+          <label class="number optional control-label" for="media_youtube_height">Height</label>
+          <div class="controls">
+            <input class="span2 number optional" id="media_youtube_height" name="media[youtube_height]" size="50" type="number" value="349">
           </div>
-          <div id="youtube_url" class="media-options" style="display:none">
-            <li id="media_youtube_width_input" class="string input optional stringish">
-              <label class="label" for="media_youtube_width">Width</label>
-              <input id="media_youtube_width" name="media[youtube_width]" type="text" value="560"/>
-            </li>
-            <li id="media_youtube_height_input" class="string input optional stringish">
-              <label class="label" for="media_youtube_height">Height</label>
-              <input id="media_youtube_height" name="media[youtube_height]" type="text" value="349"/>
-            </li>
+        </div>
+      </div>
+      <div class="media-options" id="vimeo_url_options" style="display:none">
+        <div class="control-group number optional">
+          <label class="number optional control-label" for="media_vimeo_width">Width</label>
+          <div class="controls">
+            <input class="span2 number optional" id="media_vimeo_width" name="media[vimeo_width]" size="50" type="number" value="400">
           </div>
-          <div id="vimeo_url" class="media-options" style="display:none">
-            <li id="media_vimeo_width_input" class="string input optional stringish">
-              <label class="label" for="media_vimeo_width">Width</label>
-              <input id="media_vimeo_width" name="media[vimeo_width]" type="text" value="400"/>
-            </li>
-            <li id="media_vimeo_height_input" class="string input optional stringish">
-              <label class="label" for="media_vimeo_height">Height</label>
-              <input id="media_vimeo_height" name="media[vimeo_height]" type="text" value="225"/>
-            </li>
+        </div>
+        <div class="control-group number optional">
+          <label class="number optional control-label" for="media_vimeo_height">Height</label>
+          <div class="controls">
+            <input class="span2 number optional" id="media_vimeo_height" name="media[vimeo_height]" size="50" type="number" value="225">
           </div>
-        </ol>
-      </fieldset>
+        </div>
+      </div>
+    </fieldset>
 
-    </div>
   </div>
-
-  <div class="mercury-display-controls">
-    <fieldset class="buttons">
-      <ol>
-        <li class="commit button"><input class="submit" name="commit" type="submit" value="Insert Media"/></li>
-      </ol>
-    </fieldset>
+  <div class="form-actions mercury-display-controls">
+    <input class="btn btn-primary" name="commit" type="submit" value="Insert Media"/>
   </div>
 
-</form>
+</form>