mirror of
/repos/Prototyper.git
synced 2025-12-30 06:31:32 +01:00
added links to navigaton
This commit is contained in:
Aiko Mastboom
parent
5e223f27b5
commit
971e10f242
10
installit
10
installit
@ -90,9 +90,15 @@ cd ${current_dir}
|
||||
# //netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css
|
||||
mkdir -p ./public/lib/font-awesome
|
||||
cd ./public/lib/font-awesome
|
||||
if [ ! -f ./modernizr.min.js ]; then
|
||||
if [ ! -f ./font-awesome.css ]; then
|
||||
curl -O http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css
|
||||
fi
|
||||
cd ${current_dir}
|
||||
|
||||
|
||||
# https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.min.js
|
||||
mkdir -p ./public/lib/lessjs
|
||||
cd ./public/lib/lessjs
|
||||
if [ ! -f ./less-1.3.3.min.js ]; then
|
||||
curl -O https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.min.js
|
||||
fi
|
||||
cd ${current_dir}
|
||||
|
||||
@ -49,7 +49,9 @@
|
||||
<!-- @@style__app_main_style -->
|
||||
<!-- @@_end_remove -->
|
||||
<!-- @@remove_ -->
|
||||
<link href="/style.css" rel="stylesheet" type="text/css">
|
||||
<!--<link href="/style.css" rel="stylesheet" type="text/css">-->
|
||||
<link rel="stylesheet/less" type="text/css" href="./style.css" />
|
||||
<script src="/lib/lessjs/less-1.3.3.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<!-- @@_end_remove -->
|
||||
</head>
|
||||
|
||||
@ -67,39 +69,30 @@
|
||||
<select data-bind="options: _availableModes(), optionsText: 'name', value: _selectedMode"></select>
|
||||
</div>
|
||||
<!-- ko stopBinding: true --><!-- isolate navigation viewmodel, prevent main from interfering -->
|
||||
<div id="navigation" class="navbar">
|
||||
<div id="navigation" class="navbar navbar-inverse">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="#">Navigation</a>
|
||||
<div class="dropdown" data-bind="template: {name: 'links_nav', foreach: links }"></div>
|
||||
<script type="text/html" id="links_nav_sub">
|
||||
<li>
|
||||
<!-- ko ifnot: $data.hasOwnProperty('links') -->
|
||||
<a href="#" data-bind="attr: { href: $data.url(), title: $data.title()}, click: $root._openLink">
|
||||
<span data-bind="text: $data.title()"></span>
|
||||
</a>
|
||||
<!-- /ko -->
|
||||
<!-- ko if: $data.hasOwnProperty('links') -->
|
||||
<a href="#">
|
||||
<span data-bind="text: $data.title()"></span>
|
||||
<span data-bind="text: $root._getDepth($data)"></span>
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<!--<ul data-bind="attr: { 'class': 'dropdown-menu ' + ($root._getDepth($data) ? 'sub-menu-'+$root._getDepth($data) : '')}">-->
|
||||
<ul data-bind="attr: { 'class': 'dropdown-menu sub-menu' }, template: {name: 'links_nav_sub', foreach: links }">
|
||||
</ul>
|
||||
<!-- /ko -->
|
||||
<li data-bind="css: { 'dropdown-submenu': $data.hasOwnProperty('links')}">
|
||||
<!-- ko ifnot: $data.hasOwnProperty('links') -->
|
||||
<a href="#" data-bind="attr: { href: $data.url(), title: $data.title() }, click: $root._openLink, text: $data.title()"></a>
|
||||
<!-- /ko --><!-- ko if: $data.hasOwnProperty('links') -->
|
||||
<a href="#" data-bind="text: $data.title()"></a>
|
||||
<ul data-bind="attr: { 'class': 'dropdown-menu' }, template: {name: 'links_nav_sub', foreach: links }"></ul>
|
||||
<!-- /ko -->
|
||||
</li>
|
||||
</script>
|
||||
<script type="text/html" id="links_nav">
|
||||
<div class="btn-group">
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<span data-bind="text: $data.title()"></span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<!-- ko if: $data.hasOwnProperty('links') -->
|
||||
<ul class="dropdown-menu" data-bind="template: {name: 'links_nav_sub', foreach: links, }"></ul>
|
||||
<!-- /ko -->
|
||||
<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<span data-bind="text: $data.title()"></span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<!-- ko if: $data.hasOwnProperty('links') -->
|
||||
<ul class="dropdown-menu" data-bind="template: {name: 'links_nav_sub', foreach: links, }"></ul>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
@ -133,7 +126,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="content">
|
||||
<div id="tree">
|
||||
<div id="tree" class="">
|
||||
<ul>
|
||||
<li>
|
||||
<span data-bind="text: name"></span>
|
||||
@ -141,7 +134,45 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="editor"></div>
|
||||
<div id="main" class="">
|
||||
<div id="tabs">
|
||||
<ul class="nav nav-pills">
|
||||
<li>
|
||||
<a class="btn" title="preview" data-bind="enable: _chosenAttributeId, click: _previewAttribute"><i class="icon-eye-open"></i></a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="btn dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
href="#"><span data-bind="text: _selectedMode().name()">
|
||||
Dropdown
|
||||
</span>
|
||||
<b class="caret"></b>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<!-- ko foreach: _availableModes() -->
|
||||
<li><a data-bind="click: $root._selectedMode, text: $data.name"></a></li>
|
||||
<!-- /ko -->
|
||||
</ul>
|
||||
</li>
|
||||
<li class="divider-vertical"></li>
|
||||
<!-- ko foreach: _keys() -->
|
||||
<li data-bind="css: { active: $data == $root._chosenAttributeId() }">
|
||||
<a data-bind="text: $data,
|
||||
click: $root._goToAttribute,
|
||||
css: { active: $data == $root._chosenAttributeId() }"></a>
|
||||
</li>
|
||||
<!-- /ko -->
|
||||
<li>
|
||||
<div class="nav navbar-form pull-right">
|
||||
<input type="text" class="span2"
|
||||
data-bind="value: _newAttribute"/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="editor"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- @@import_file__templates/scripts.html__into__app_templates_scripts -->
|
||||
<!-- @@template__app_templates_scripts__context__app_main -->
|
||||
@ -352,7 +383,7 @@ function initViewModelMain(app, doc, vm_config) {
|
||||
var id = viewModel._chosenAttributeId();
|
||||
if (id) {
|
||||
var ext = app.fn.main.getExtensionForAttribute(id);
|
||||
var url = '/page/app/main.' + id + ext;
|
||||
var url = '/page/app/main.' + id + ext + '#!watch';
|
||||
open_in_new_tab(url);
|
||||
}
|
||||
|
||||
|
||||
@ -13,11 +13,13 @@ body {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@header-height: 200px;
|
||||
|
||||
#header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 200px;
|
||||
height: @header-height;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
}
|
||||
@ -32,42 +34,45 @@ body {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@content-divider: 150px;
|
||||
|
||||
#content {
|
||||
position: fixed;
|
||||
top:200px;
|
||||
top: @header-height;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#editor {
|
||||
#main {
|
||||
left: @content-divider;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@tabs-height: 38px;
|
||||
#tabs {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: @tabs-height;
|
||||
left: @content-divider;
|
||||
right: 0;
|
||||
/*background-color: lightpink;*/
|
||||
}
|
||||
#editor {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: @tabs-height;
|
||||
bottom: 0;
|
||||
left: 370px;
|
||||
left: @content-divider;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#tree {
|
||||
left:0;
|
||||
right:370px;
|
||||
right:@content-divider;
|
||||
/*bottom: 0px;*/
|
||||
}
|
||||
#htext a {
|
||||
color: #aaf;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* MULTI-LEVEL DROPDOWNS FOR BOOTSTRAP */
|
||||
.dropdown-menu .sub-menu {
|
||||
left: 100%;
|
||||
position: relative;
|
||||
top: -31px;
|
||||
visibility: hidden;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.dropdown-menu li:hover > .sub-menu {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
}
|
||||
/* END MULTI-LEVEL DROPDOWNS FOR BOOTSTRAP */
|
||||
|
||||
@ -2,4 +2,9 @@
|
||||
<!--<script src="/lib/modernizr/modernizr.min.js"></script>-->
|
||||
<link href="/lib/bootstrap/bootstrap-combined.min.css" rel="stylesheet" type="text/css">
|
||||
<!--<link href="/lib/font-awesome/font-awesome.css" rel="stylesheet" type="text/css">-->
|
||||
{{#if debug }}
|
||||
<!-- @@less__app_main_style -->
|
||||
<script src="/lib/lessjs/less-1.3.3.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
{{else}}
|
||||
<!-- @@style__app_main_style -->
|
||||
{{/if}}
|
||||
|
||||
@ -71,6 +71,10 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "LessCSS",
|
||||
"url": "http://lesscss.org/"
|
||||
},
|
||||
{
|
||||
"title": "ShareJS",
|
||||
"url": "https://github.com/josephg/ShareJS/wiki"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user