admin editor: fix theme selector and full screen

This commit is contained in:
ilvalle
2013-06-10 15:22:00 +02:00
parent 5d6b4842ba
commit 9e2bb2c08a
4 changed files with 20 additions and 22 deletions
+7 -11
View File
@@ -3,7 +3,7 @@
.CodeMirror { .CodeMirror {
/* Set height, width, borders, and global font properties here */ /* Set height, width, borders, and global font properties here */
font-family: monospace; font-family: monospace;
height: 300px; height: auto;
} }
.CodeMirror-scroll { .CodeMirror-scroll {
@@ -12,17 +12,13 @@
} }
/* Fullscreen */ /* Fullscreen */
.CodeMirror-fullscreen { .CodeMirror-fullscreen {
display: block; display: block;
position: absolute; position: absolute ! important;
top: 0; left: 0; top: 0; left: 0;
width: 100% ! important;; width: 100% ! important;
z-index: 9999; z-index: 9999;
} }
/* BREAKPOINTS */ /* BREAKPOINTS */
+3 -2
View File
@@ -27,8 +27,9 @@
/* Editor styling */ /* Editor styling */
.cm-s-web2py { .cm-s-web2py {
line-height: 1.40em; line-height: 1.40em;
font-family: Monaco, Menlo,"Andale Mono","lucida console","Courier New",monospace !important; font-family: Monaco, Menlo,"Andale Mono","lucida console","Courier New",monospace !important;
background: white;
} }
+9 -8
View File
@@ -38,13 +38,9 @@
<script src="{{=cm}}/addon/selection/active-line.js"></script> <script src="{{=cm}}/addon/selection/active-line.js"></script>
<script src="{{=cm}}/emmet.min.js"></script> <script src="{{=cm}}/emmet.min.js"></script>
<style type="text/css">
</style>
<script language="Javascript" type="text/javascript" src="{{=URL('static','js/ajax_editor.js')}}"></script> <script language="Javascript" type="text/javascript" src="{{=URL('static','js/ajax_editor.js')}}"></script>
<script language="Javascript" type="text/javascript"> <script language="Javascript" type="text/javascript">
var current_theme = "web2py"; //Default theme
jQuery(document).on('shown click', 'a[data-toggle="tab"]', function (e) { jQuery(document).on('shown click', 'a[data-toggle="tab"]', function (e) {
var tab_id = jQuery(this).attr('href'); var tab_id = jQuery(this).attr('href');
var editor = jQuery(tab_id + " textarea").data('editor'); var editor = jQuery(tab_id + " textarea").data('editor');
@@ -102,6 +98,7 @@ jQuery(document).on('click', '#themes a', function (e) {
editor.setOption("theme", name); editor.setOption("theme", name);
}); });
jQuery('#themeName').html(name); jQuery('#themeName').html(name);
current_theme = name;
//#TODO save on session //#TODO save on session
}); });
@@ -115,10 +112,13 @@ jQuery(document).on('click', '#themes a', function (e) {
var wrap = instance.getWrapperElement(), scroll = instance.getScrollerElement(); var wrap = instance.getWrapperElement(), scroll = instance.getScrollerElement();
if (full) { if (full) {
wrap.className += " CodeMirror-fullscreen"; wrap.className += " CodeMirror-fullscreen";
jQuery(wrap).css('width', "100%");
jQuery(wrap).css('position', "absolute");
scroll.style.height = winHeight() + "px"; scroll.style.height = winHeight() + "px";
document.documentElement.style.overflow = "hidden"; document.documentElement.style.overflow = "hidden";
} else { } else {
wrap.className = wrap.className.replace(" CodeMirror-fullscreen", ""); wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
jQuery(wrap).css('position', "relative");
scroll.style.height = ""; scroll.style.height = "";
document.documentElement.style.overflow = ""; document.documentElement.style.overflow = "";
} }
@@ -140,8 +140,8 @@ jQuery(document).on('click', '#themes a', function (e) {
<div class='row-fluid'> <div class='row-fluid'>
<div class="right controls pull-right"> <div class="right controls btn-toolbar pull-right">
<div class="dropdown pull-left"> <div class="dropdown btn-group pull-left">
<a class="dropdown-toggle button btn" data-target="themes" data-toggle="dropdown" href="#" >Theme: <span id="themeName" style="color: #E8953C">Web2py</span> <span class="caret"></span></a> <a class="dropdown-toggle button btn" data-target="themes" data-toggle="dropdown" href="#" >Theme: <span id="themeName" style="color: #E8953C">Web2py</span> <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" id="themes"> <ul class="dropdown-menu" role="menu" id="themes">
{{for f in listfiles('admin', "static/codemirror/theme", regexp='.*\.css$' ):}} {{for f in listfiles('admin', "static/codemirror/theme", regexp='.*\.css$' ):}}
@@ -149,12 +149,13 @@ jQuery(document).on('click', '#themes a', function (e) {
{{pass}} {{pass}}
</ul> </ul>
</div> </div>
<div class="btn-group">
{{=button(URL('design',args=request.vars.app if request.vars.app else request.args[0], anchor=request.vars.id), T('back'))}} {{=button(URL('design',args=request.vars.app if request.vars.app else request.args[0], anchor=request.vars.id), T('back'))}}
{{#if request.args[1]=='models':}} {{#if request.args[1]=='models':}}
<a class="button btn" href="http://www.web2py.com/sqldesigner" target="_blank"><span>{{=T('online designer')}}</span></a> <a class="button btn" href="http://www.web2py.com/sqldesigner" target="_blank"><span>{{=T('online designer')}}</span></a>
{{#pass}} {{#pass}}
<a class="button btn" href="http://www.web2py.com/examples/static/epydoc/index.html" target="_blank"><span>{{=T('docs')}}</span></a> <a class="button btn" href="http://www.web2py.com/examples/static/epydoc/index.html" target="_blank"><span>{{=T('docs')}}</span></a>
</div>
</div> </div>
</div> </div>
<div id="editor_area" class="row-fluid"> <div id="editor_area" class="row-fluid">
@@ -52,7 +52,7 @@
indentUnit: 4, indentUnit: 4,
styleActiveLine: true, styleActiveLine: true,
autoCloseTags: true, autoCloseTags: true,
theme: "web2py", theme: current_theme,
tabMode: "shift", tabMode: "shift",
lineWrapping: true, lineWrapping: true,
gutters: ["CodeMirror-linenumbers", "breakpoints"], gutters: ["CodeMirror-linenumbers", "breakpoints"],