caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upgrade to Bootstrap 3

Browse Source
This commit is contained in:
benweet 2013-08-05 02:31:14 +01:00
parent be3150f18e
commit e115a78989
6 changed files with 82 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/extensions/buttonShare.js
View File

@ -19,8 +19,8 @@ define([
return; return;
} }
var linkList = $("#link-container .link-list").empty(); var linkList = $(".link-container .link-list").empty();
$("#link-container .no-link").show(); $(".link-container .no-link").show();
var attributesList = _.values(fileDesc.publishLocations); var attributesList = _.values(fileDesc.publishLocations);
_.each(attributesList, function(attributes) { _.each(attributesList, function(attributes) {
@ -29,7 +29,7 @@ define([
link: attributes.sharingLink link: attributes.sharingLink
})); }));
linkList.append(lineElement); linkList.append(lineElement);
$("#link-container .no-link").hide(); $(".link-container .no-link").hide();
} }
}); });
}; };

48
js/html/bodyIndex.html
View File

@ -4,7 +4,7 @@
<ul class="nav"> <ul class="nav">
<li><div id="wmd-button-bar"></div></li> <li><div id="wmd-button-bar"></div></li>
</ul> </ul>
<ul class="nav pull-right" id="menu-bar"> <ul class="nav pull-right">
<li id="extension-buttons"></li> <li id="extension-buttons"></li>
<li class="btn-group"><button class="btn btn-default action-create-file" <li class="btn-group"><button class="btn btn-default action-create-file"
title="New local document"> title="New local document">
@ -91,7 +91,7 @@
</ul> </ul>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li><i class="working-indicator icon-none"></i></li> <li><i class="working-indicator icon-none"></i></li>
<li><a class="brand" id="file-title" href="#" <li><a class="btn btn-default" id="file-title" href="#"
title="Rename current document"> </a></li> title="Rename current document"> </a></li>
<li class="navbar-form"><input id="file-title-input" type="text" <li class="navbar-form"><input id="file-title-input" type="text"
class="col-lg-3 form-control hide" placeholder="Document title" /></li> class="col-lg-3 form-control hide" placeholder="Document title" /></li>
@ -447,7 +447,7 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form-horizontal"> <div class="form-horizontal">
<div class="control-group modal-publish-ssh"> <div class="form-group modal-publish-ssh">
<label class="col-lg-4 control-label" for="input-publish-ssh-host">Host</label> <label class="col-lg-4 control-label" for="input-publish-ssh-host">Host</label>
<div class="col-lg-7"> <div class="col-lg-7">
<input type="text" id="input-publish-ssh-host" <input type="text" id="input-publish-ssh-host"
@ -459,15 +459,15 @@
</span> </span>
</div> </div>
</div> </div>
<div class="control-group modal-publish-ssh"> <div class="form-group modal-publish-ssh">
<label class="col-lg-4 control-label" for="input-publish-ssh-port">Port <label class="col-lg-4 control-label" for="input-publish-ssh-port">Port
(optional)</label> (optional)</label>
<div class="col-lg-7"> <div class="col-lg-2">
<input type="text" id="input-publish-ssh-port" placeholder="22" <input type="text" id="input-publish-ssh-port" placeholder="22"
class="form-control"> class="form-control">
</div> </div>
</div> </div>
<div class="control-group modal-publish-ssh"> <div class="form-group modal-publish-ssh">
<label class="col-lg-4 control-label" <label class="col-lg-4 control-label"
for="input-publish-ssh-username">Username</label> for="input-publish-ssh-username">Username</label>
<div class="col-lg-7"> <div class="col-lg-7">
@ -475,7 +475,7 @@
placeholder="username" class="form-control"> placeholder="username" class="form-control">
</div> </div>
</div> </div>
<div class="control-group modal-publish-ssh"> <div class="form-group modal-publish-ssh">
<label class="col-lg-4 control-label" <label class="col-lg-4 control-label"
for="input-publish-ssh-password">Password</label> for="input-publish-ssh-password">Password</label>
<div class="col-lg-7"> <div class="col-lg-7">
@ -488,7 +488,7 @@
</span> </span>
</div> </div>
</div> </div>
<div class="control-group modal-publish-github"> <div class="form-group modal-publish-github">
<label class="col-lg-4 control-label" <label class="col-lg-4 control-label"
for="input-publish-github-reponame">Repository</label> for="input-publish-github-reponame">Repository</label>
<div class="col-lg-7"> <div class="col-lg-7">
@ -496,7 +496,7 @@
placeholder="repository-name" class="form-control"> placeholder="repository-name" class="form-control">
</div> </div>
</div> </div>
<div class="control-group modal-publish-github"> <div class="form-group modal-publish-github">
<label class="col-lg-4 control-label" <label class="col-lg-4 control-label"
for="input-publish-github-username">Username (optional)</label> for="input-publish-github-username">Username (optional)</label>
<div class="col-lg-7"> <div class="col-lg-7">
@ -504,7 +504,7 @@
placeholder="username" class="form-control"> placeholder="username" class="form-control">
</div> </div>
</div> </div>
<div class="control-group modal-publish-github"> <div class="form-group modal-publish-github">
<label class="col-lg-4 control-label" <label class="col-lg-4 control-label"
for="input-publish-github-branch">Branch</label> for="input-publish-github-branch">Branch</label>
<div class="col-lg-7"> <div class="col-lg-7">
@ -512,7 +512,7 @@
placeholder="branch-name" class="form-control"> placeholder="branch-name" class="form-control">
</div> </div>
</div> </div>
<div class="control-group modal-publish-ssh modal-publish-github"> <div class="form-group modal-publish-ssh modal-publish-github">
<label class="col-lg-4 control-label" <label class="col-lg-4 control-label"
for="input-publish-file-path">File path</label> for="input-publish-file-path">File path</label>
<div class="col-lg-7"> <div class="col-lg-7">
@ -520,14 +520,14 @@
placeholder="path/to/file.md" class="form-control"> placeholder="path/to/file.md" class="form-control">
</div> </div>
</div> </div>
<div class="control-group modal-publish-gist"> <div class="form-group modal-publish-gist">
<label class="col-lg-4 control-label" for="input-publish-filename">Filename</label> <label class="col-lg-4 control-label" for="input-publish-filename">Filename</label>
<div class="col-lg-7"> <div class="col-lg-7">
<input type="text" id="input-publish-filename" <input type="text" id="input-publish-filename"
placeholder="filename" class="form-control"> placeholder="filename" class="form-control">
</div> </div>
</div> </div>
<div class="control-group modal-publish-gist"> <div class="form-group modal-publish-gist">
<label class="col-lg-4 control-label" for="input-publish-gist-id">Existing <label class="col-lg-4 control-label" for="input-publish-gist-id">Existing
ID (optional)</label> ID (optional)</label>
<div class="col-lg-7"> <div class="col-lg-7">
@ -535,7 +535,7 @@
placeholder="GistID" class="form-control"> placeholder="GistID" class="form-control">
</div> </div>
</div> </div>
<div class="control-group modal-publish-gist"> <div class="form-group modal-publish-gist">
<label class="col-lg-4 control-label" <label class="col-lg-4 control-label"
for="input-publish-gist-public">Public</label> for="input-publish-gist-public">Public</label>
<div class="col-lg-7"> <div class="col-lg-7">
@ -545,7 +545,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="control-group modal-publish-blogger"> <div class="form-group modal-publish-blogger">
<label class="col-lg-4 control-label" <label class="col-lg-4 control-label"
for="input-publish-blogger-url">Blog URL</label> for="input-publish-blogger-url">Blog URL</label>
<div class="col-lg-7"> <div class="col-lg-7">
@ -553,7 +553,7 @@
placeholder="http://exemple.blogger.com/" class="form-control"> placeholder="http://exemple.blogger.com/" class="form-control">
</div> </div>
</div> </div>
<div class="control-group modal-publish-tumblr"> <div class="form-group modal-publish-tumblr">
<label class="col-lg-4 control-label" <label class="col-lg-4 control-label"
for="input-publish-tumblr-hostname">Blog hostname</label> for="input-publish-tumblr-hostname">Blog hostname</label>
<div class="col-lg-7"> <div class="col-lg-7">
@ -561,7 +561,7 @@
placeholder="exemple.tumblr.com" class="form-control"> placeholder="exemple.tumblr.com" class="form-control">
</div> </div>
</div> </div>
<div class="control-group modal-publish-wordpress"> <div class="form-group modal-publish-wordpress">
<label class="col-lg-4 control-label" <label class="col-lg-4 control-label"
for="input-publish-tumblr-hostname">WordPress site</label> for="input-publish-tumblr-hostname">WordPress site</label>
<div class="col-lg-7"> <div class="col-lg-7">
@ -574,7 +574,7 @@
</div> </div>
</div> </div>
<div <div
class="control-group modal-publish-blogger modal-publish-tumblr modal-publish-wordpress"> class="form-group modal-publish-blogger modal-publish-tumblr modal-publish-wordpress">
<label class="col-lg-4 control-label" for="input-publish-postid">Update <label class="col-lg-4 control-label" for="input-publish-postid">Update
existing post ID (optional)</label> existing post ID (optional)</label>
<div class="col-lg-7"> <div class="col-lg-7">
@ -582,7 +582,7 @@
class="form-control"> class="form-control">
</div> </div>
</div> </div>
<div class="control-group modal-publish-blogger"> <div class="form-group modal-publish-blogger">
<label class="col-lg-4 control-label" for="input-publish-labels">Labels <label class="col-lg-4 control-label" for="input-publish-labels">Labels
(comma separated)</label> (comma separated)</label>
<div class="col-lg-7"> <div class="col-lg-7">
@ -591,7 +591,7 @@
</div> </div>
</div> </div>
<div <div
class="control-group modal-publish-tumblr modal-publish-wordpress"> class="form-group modal-publish-tumblr modal-publish-wordpress">
<label class="col-lg-4 control-label" for="input-publish-tags">Tags <label class="col-lg-4 control-label" for="input-publish-tags">Tags
(comma separated)</label> (comma separated)</label>
<div class="col-lg-7"> <div class="col-lg-7">
@ -599,7 +599,7 @@
placeholder="Tag1, Tag2" class="form-control"> placeholder="Tag1, Tag2" class="form-control">
</div> </div>
</div> </div>
<div class="control-group modal-publish-dropbox"> <div class="form-group modal-publish-dropbox">
<label class="col-lg-4 control-label" <label class="col-lg-4 control-label"
for="input-publish-dropbox-path">File path</label> for="input-publish-dropbox-path">File path</label>
<div class="col-lg-7"> <div class="col-lg-7">
@ -607,7 +607,7 @@
placeholder="/path/to/My Document.html" class="form-control"> placeholder="/path/to/My Document.html" class="form-control">
</div> </div>
</div> </div>
<div class="control-group modal-publish-gdrive"> <div class="form-group modal-publish-gdrive">
<label class="col-lg-4 control-label" <label class="col-lg-4 control-label"
for="input-publish-gdrive-fileid">File ID (optional)</label> for="input-publish-gdrive-fileid">File ID (optional)</label>
<div class="col-lg-7"> <div class="col-lg-7">
@ -618,7 +618,7 @@
the file afterwards within Google Drive.</span> the file afterwards within Google Drive.</span>
</div> </div>
</div> </div>
<div class="control-group modal-publish-gdrive"> <div class="form-group modal-publish-gdrive">
<label class="col-lg-4 control-label" <label class="col-lg-4 control-label"
for="input-publish-gdrive-filename">Force filename for="input-publish-gdrive-filename">Force filename
(optional)</label> (optional)</label>
@ -631,7 +631,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="col-lg-4 control-label">Format</div> <label class="col-lg-4 control-label">Format</label>
<div class="col-lg-7"> <div class="col-lg-7">
<div class="radio"> <div class="radio">
<label> <input type="radio" name="radio-publish-format" <label> <input type="radio" name="radio-publish-format"

2
js/html/bodyViewer.html
View File

@ -2,7 +2,7 @@
<div class="navbar navbar-fixed-top ui-layout-north"> <div class="navbar navbar-fixed-top ui-layout-north">
<div class="navbar-inner"> <div class="navbar-inner">
<ul class="nav pull-right hide" id="menu-bar"> <ul class="nav pull-right hide">
<li class="btn-group"> <li class="btn-group">
<button class="btn btn-default action-edit-document hide" <button class="btn btn-default action-edit-document hide"
title="Edit this document"> title="Edit this document">

2
js/html/buttonShare.html
View File

@ -2,7 +2,7 @@
title="Share this document"> title="Share this document">
<i class="icon-link"></i> <i class="icon-link"></i>
</button> </button>
<div id="link-container" class="dropdown-menu pull-right"> <div class="dropdown-menu pull-right link-container">
<h3 class="muted">Sharing</h3> <h3 class="muted">Sharing</h3>
<div class="link-list"></div> <div class="link-list"></div>
<p class="no-link">To share this document you need first to <a <p class="no-link">To share this document you need first to <a

6
js/html/buttonShareLocation.html
View File

@ -1,5 +1,5 @@
<div class="input-prepend"> <div class="input-group">
<a href="<%= link %>" class="add-on" title="Sharing location"><i <div class="input-group-btn"><a href="<%= link %>" class="btn btn-info" title="Sharing location"><i
class="icon-link"></i></a> <input class="span2" type="text" class="icon-link"></i></a></div> <input class="col-lg-5 form-control" type="text"
value="<%= link %>" readonly /> value="<%= link %>" readonly />
</div> </div>

111
js/styles/default.less
View File

@ -122,11 +122,15 @@ Override Bootstrap
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 134, 97, 0.6)"); .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 134, 97, 0.6)");
} }
// Fix add-on support // Fix add-on support in Bootstrap v3
.input-group-btn .btn { .input-group-btn .btn {
border: 1px solid @input-border; border: 1px solid @input-border;
} }
.input-group-btn:first-child .btn {
border-right: 0;
}
.input-group-btn:last-child .btn { .input-group-btn:last-child .btn {
border-left: 0; border-left: 0;
} }
@ -162,7 +166,8 @@ Override Bootstrap
} }
} }
} }
.btn { .btn-group > .btn,
#file-title {
background-color: @navbar-bg; background-color: @navbar-bg;
border-color: @navbar-bg; border-color: @navbar-bg;
&:hover, &:hover,
@ -221,6 +226,36 @@ Override Bootstrap
content: " "; content: " ";
} }
} }
#file-selector {
max-height: 500px;
overflow-y: auto;
.stick {
padding: 10px 20px 0;
}
}
#file-title {
padding: 4px 15px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: #666;
i {
margin-right: 10px;
}
}
.working-indicator {
background-image: none !important;
width: 43px;
height: 11px;
background-position: 0 0;
margin-right: 30px;
&.show {
background-image: url("../../img/ajax-loader.gif") !important;
}
}
} }
@ -233,7 +268,18 @@ Override Bootstrap
.btn-group { .btn-group {
margin: 0; margin: 0;
} }
.link-container {
min-width: 280px;
white-space: normal;
.link-list {
margin-top: 20px;
margin-bottom: 20px;
& > * {
margin-bottom: 10px;
}
}
}
} }
// Hack for nested btn-group // Hack for nested btn-group
@ -323,17 +369,6 @@ Override Bootstrap
} }
} }
/*
input[disabled],select[disabled],textarea[disabled],.input-prepend .add-on
{
background-color: @body-bg;
}
input[readonly],select[readonly],textarea[readonly] {
background-color: transparent;
cursor: text;
}
*/
/********************* /*********************
* Markdown * Markdown
@ -341,6 +376,7 @@ input[readonly],select[readonly],textarea[readonly] {
code { code {
color: #333333; color: #333333;
background-color: fade(#000, 5%);
} }
a code { a code {
@ -366,38 +402,11 @@ hr {
margin: 30px 0; margin: 30px 0;
} }
#file-selector {
max-height: 500px;
overflow-y: auto;
}
#file-selector .stick {
padding: 10px 20px 0;
}
#file-title {
padding: 4px 15px;
display: block;
float: left;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: #666;
}
#file-title i {
margin-right: 10px;
}
.dropdown-menu i { .dropdown-menu i {
margin-right: 5px; margin-right: 5px;
} }
#menu-bar {
margin-left: 15px;
}
#wmd-input { #wmd-input {
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
-moz-box-shadow: none !important; -moz-box-shadow: none !important;
@ -487,15 +496,6 @@ div.dropdown-menu textarea {
resize: none; resize: none;
} }
#link-container {
min-width: 280px;
white-space: normal;
}
#link-container .link-list {
margin-top: 10px;
}
.footnote { .footnote {
vertical-align: top; vertical-align: top;
position: relative; position: relative;
@ -606,17 +606,6 @@ div.dropdown-menu textarea {
background-position: -145px 0; background-position: -145px 0;
} }
.working-indicator {
background-image: none !important;
width: 43px;
height: 11px;
background-position: 0 0;
margin: 0 30px 12px;
&.show {
background-image: url("../../img/ajax-loader.gif") !important;
}
}
.ui-layout-toggler-north .caret,.ui-layout-toggler-south .caret { .ui-layout-toggler-north .caret,.ui-layout-toggler-south .caret {
margin-top: 5px; margin-top: 5px;
} }