Permalink
Browse files

implemented document properties window

  • Loading branch information...
1 parent be9fb8a commit 468192b2620190aa868ace198d0fb7cb28bfb8dd @fatiherikli committed Nov 19, 2012
Showing with 127 additions and 18 deletions.
  1. +29 −7 index.html
  2. +41 −4 media/css/screen.css
  3. +3 −1 media/js/models/document.js
  4. +1 −0 media/js/routers/document.js
  5. +53 −6 media/js/views/document.js
View
@@ -13,14 +13,36 @@
<!-- layout -->
<nav>
- <a class="menu">Select a Document</a>
+ <a class="documents">Select a Document</a>
+ <a class="properties">Properties</a>
<a class="export">Export</a>
- <section>
+ <section id="documents">
<h3>Documents</h3>
<ul></ul>
<h3>Create a new document</h3>
<form>
- <input type="text" name="title" id="title" />
+ <input type="text" name="title" id="id_title" />
+ </form>
+ </section>
+
+ <section id="document-properties">
+ <h3>Document Properties</h3>
+ <form>
+ <label for="id_title">Title</label>
+ <input type="text" name="title" id="id_title" />
+
+ <div class="width">
+ <label for="id_width">Width</label>
+ <input type="text" name="width" id="id_width" />
+ </div>
+
+ <div class="height">
+ <label for="id_height">Height</label>
+ <input type="text" name="height" id="id_height" />
+ </div>
+
+ <input type="submit" value="Save" id="save">
+
</form>
</section>
</nav>
@@ -40,10 +62,10 @@ <h2>Properties</h2>
</footer>
<div id="social">
- <iframe src="http://ghbtns.com/github-btn.html?user=fatiherikli&repo=mockup-designer&type=fork"
- allowtransparency="true" frameborder="0" scrolling="0" width="63" height="20"></iframe>
- <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fatiherikli.github.com/mockup-designer/" data-via="fthrkl" data-count="none">Tweet</a>
- <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+ <!--<iframe src="http://ghbtns.com/github-btn.html?user=fatiherikli&repo=mockup-designer&type=fork"-->
+ <!--allowtransparency="true" frameborder="0" scrolling="0" width="63" height="20"></iframe>-->
+ <!--<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fatiherikli.github.com/mockup-designer/" data-via="fthrkl" data-count="none">Tweet</a>-->
+ <!--<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>-->
</div>
<!-- templates -->
View
@@ -107,7 +107,7 @@ nav {
top: 28px;
right: 120px;
z-index: 1;
- width: 350px;
+ width: 450px;
}
nav > a {
@@ -128,9 +128,12 @@ nav {
}
nav section {
+ position: fixed;
+ width: 500px;
display: none;
- background-color: #ededed;
- margin-top: 34px;
+ background-color: #e8e8e8;
+ margin-top: 33px;
+ border: 3px solid #505050;
}
nav section h3 {
@@ -169,15 +172,49 @@ nav {
padding: 15px;
}
+ nav form label {
+ display: block;
+ padding: 5px 2px;
+ font-size: 17px;
+ font-weight: bold;
+ }
+
nav form input {
- width: 90%;
+ width: 92%;
+ padding: 5px;
}
nav .export {
width: 90px;
margin-right: 10px;
}
+ nav .properties {
+ width: 120px;
+ margin-right: 10px;
+ }
+
+ nav #document-properties {
+ overflow: hidden;
+ }
+
+ nav .width, nav .height {
+ width: 48%;
+ float: left;
+ margin-top: 20px;
+ }
+
+ nav #save {
+ font-size: 20px;
+ padding: 5px;
+ margin-top: 30px;
+ cursor: pointer;
+ background-color: #494949;
+ color: white;
+ border: none;
+ width: 100px;
+ }
+
@@ -1,7 +1,9 @@
usemockups.models.Document = Backbone.Model.extend({
localStorage: new Backbone.LocalStorage('documents'),
defaults: {
- "mockups": []
+ "mockups": [],
+ "width": 600,
+ "height": 600
},
initialize: function () {
this.mockups = new usemockups.collections.Mockups;
@@ -17,6 +17,7 @@ usemockups.routers.Document = Backbone.Router.extend({
if (usemockups.active_document_view) {
usemockups.active_document_view.undelegateEvents();
usemockups.active_document_view.article.undelegateEvents();
+ usemockups.active_document_view.edit_form.undelegateEvents();
}
if (usemockups.active_property_dialog) {
View
@@ -6,6 +6,7 @@ usemockups.views.Page = Backbone.View.extend({
initialize: function () {
this.model.mockups.on("add", this.add_mockup, this);
this.model.mockups.on("reset", this.render_mockups, this);
+ this.model.on("change:width change:height", this.resize_document, this);
this.render_mockups();
this.footer = $("footer");
},
@@ -38,8 +39,16 @@ usemockups.views.Page = Backbone.View.extend({
this.model.mockups.off("reset");
},
+ resize_document: function () {
+ this.$el
+ .width(this.model.get("width"))
+ .height(this.model.get("height"));
+ },
+
render: function () {
+ this.resize_document();
+
this.$el.droppable({
accept: ".toolbox li",
drop: function (event, ui) {
@@ -97,6 +106,12 @@ usemockups.views.Document = Backbone.View.extend({
}));
this.article.render();
+ this.edit_form = new usemockups.views.DocumentEditForm({
+ model: this.model
+ });
+
+ this.edit_form.render();
+
this.render_title();
},
@@ -150,12 +165,12 @@ usemockups.views.NavigationItem = Backbone.View.extend({
});
usemockups.views.NewDocumentForm = Backbone.View.extend({
- el: "nav form",
+ el: "nav #documents form",
events: {
"submit": "submit_form"
},
submit_form: function () {
- var title = this.$el.find("#title");
+ var title = this.$el.find("#id_title");
if (title) {
(new usemockups.models.Document()).save({ title: title.val() },{
success: function (model) {
@@ -168,10 +183,36 @@ usemockups.views.NewDocumentForm = Backbone.View.extend({
}
});
+usemockups.views.DocumentEditForm = Backbone.View.extend({
+ el: "nav #document-properties form",
+ events: {
+ "submit": "submit_form"
+ },
+ render: function () {
+ this.$el.find("#id_title").val(this.model.get("title"));
+ this.$el.find("#id_width").val(this.model.get("width"));
+ this.$el.find("#id_height").val(this.model.get("height"));
+ },
+ submit_form: function () {
+ this.model.set({
+ "title": this.$el.find("#id_title").val(),
+ "width": this.$el.find("#id_width").val(),
+ "height": this.$el.find("#id_height").val()
+ });
+ this.model.save();
+ this.hide();
+ return false;
+ },
+ hide: function () {
+ this.$el.parent().hide();
+ }
+});
+
usemockups.views.Navigation = Backbone.View.extend({
el: "nav",
events: {
- "click a.menu": "toggle_navigation"
+ "click a.documents": "toggle_documents",
+ "click a.properties": "toggle_document_properties"
},
initialize: function () {
this.model.on("reset", this.render, this);
@@ -191,11 +232,17 @@ usemockups.views.Navigation = Backbone.View.extend({
new usemockups.views.NewDocumentForm({
model: this.model
- });
+ }).render();
},
- toggle_navigation: function () {
- this.$el.find("section").toggle();
+ toggle_documents: function () {
+ this.$el.find("#document-properties").hide();
+ this.$el.find("#documents").toggle();
+ return false;
+ },
+ toggle_document_properties: function () {
+ this.$el.find("#documents").hide();
+ this.$el.find("#document-properties").toggle();
return false;
}
});

0 comments on commit 468192b

Please sign in to comment.