From 527a65ca570891ff473dbdac36d41b1be60196f1 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Tue, 14 Oct 2014 19:16:45 -0400 Subject: load more on media drawer and some other stuff --- views/controls/editor/media-drawer.ejs | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) (limited to 'views/controls') diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index d800426..5cc659e 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -1,14 +1,3 @@ - - -
-
- Upload File - -
- ~ or ~
- - -
@@ -16,13 +5,28 @@
X +

Your Media – Found Media


You have no media yet. Upload some!
+ + view more
+ + + +
+
+ Upload File + +
+ ~ or ~
+ +
-
+ +
\ No newline at end of file -- cgit v1.2.3-70-g09d2 From 1b152e66ad8d7aa1c5511152991e648308f8918b Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Tue, 14 Oct 2014 20:00:59 -0400 Subject: fixed-position close box fixed-position close box &c --- public/assets/javascripts/mx/extensions/mx.movements.js | 5 ++++- public/assets/javascripts/ui/editor/MediaViewer.js | 11 +++++++++-- public/assets/javascripts/ui/lib/ModalView.js | 8 ++++++++ public/assets/stylesheets/app.css | 16 +++++++++++++++- server/lib/api/media.js | 1 - views/controls/editor/media-drawer.ejs | 4 ++-- 6 files changed, 38 insertions(+), 7 deletions(-) (limited to 'views/controls') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 268a1c7..5ba5d69 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -127,9 +127,12 @@ MX.Movements = function (cam) { Scenery.nextWallpaper = null app.tube('cancel-wallpaper') } - else if (app.controller && app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) { + else if (app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) { app.controller.mediaViewer.hide() } + else if (app.controller.lightControl.$el.hasClass('active')) { + app.controller.lightControl.hide() + } else { app.controller.toolbar.toggleMap() } diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 2e76bec..10819af 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -6,6 +6,7 @@ var MediaViewer = ModalView.extend({ loaded: false, perPage: 12, offset: 0, + fixedClose: true, events: { 'mousedown': "stopPropagation", @@ -106,6 +107,7 @@ var MediaViewer = ModalView.extend({ }, populate: function(data){ + var scrollTop = this.loaded ? $('.myMedia .container').height() : 0 if (data && data.length) { if (data.length < this.perPage) { this.$viewMore.hide() @@ -122,8 +124,13 @@ var MediaViewer = ModalView.extend({ this.$noMedia.show() this.$deleteMedia.hide() } - this.loaded = true - this.__super__.show.call(this) + if (this.loaded) { + this.$el.delay(300).animate({ scrollTop: scrollTop }, 200) + } + else { + this.loaded = true + this.__super__.show.call(this) + } }, addUploadedMedia: function(media){ diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js index d9b518a..1c41861 100644 --- a/public/assets/javascripts/ui/lib/ModalView.js +++ b/public/assets/javascripts/ui/lib/ModalView.js @@ -18,6 +18,10 @@ var ModalView = View.extend({ if (! this.usesFileUpload) { $(".fileUpload").removeClass("active") } + if (this.fixedClose) { + $("#fixed_close").addClass("active") + $("#fixed_close").bind("click", this.hide.bind(this)) + } this.$el.addClass("active") $("body").addClass("noOverflow") @@ -25,6 +29,10 @@ var ModalView = View.extend({ hide: function(){ // $(".mediaDrawer, .room1").removeClass("active editing"); + if (this.fixedClose) { + $("#fixed_close").removeClass("active") + $("#fixed_close").unbind("click", this.hide.bind(this)) + } this.$el.removeClass("active"); $("body").removeClass("noOverflow"); }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index eec671a..038b0c4 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -2169,7 +2169,21 @@ form li textarea { border: 1px solid black; box-shadow: -3px 4px black; line-height: 75px; - + text-align: center; +} +#fixed_close { + display: none; + transform: translateY(-200px) translateZ(0); +} +#fixed_close.active { + animation: visibility 0.2s; + animation-fill-mode: forwards; + display: block; +} +@keyframes visibility { + 100% { + transform: translateY(0px) translateZ(0); + } } diff --git a/server/lib/api/media.js b/server/lib/api/media.js index 643ba92..4e2fad5 100644 --- a/server/lib/api/media.js +++ b/server/lib/api/media.js @@ -16,7 +16,6 @@ var media = { if (req.query.tag) { query.tag = req.query.tag } - console.log(offset, limit) Media.find(query) .sort({'created_at': -1}) .skip(offset) diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index 5cc659e..7996f84 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -3,9 +3,9 @@ -
- X +X +

Your Media – Found Media


-- cgit v1.2.3-70-g09d2 From c31330242541305147a0f2c699d7cc215bd41cd2 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Tue, 14 Oct 2014 20:59:46 -0400 Subject: color swatches --- .../assets/javascripts/ui/editor/LightControl.js | 1 + public/assets/javascripts/ui/editor/Presets.js | 30 ++++++++++++++++++++++ public/assets/stylesheets/app.css | 19 ++++++++++++++ views/controls/editor/presets.ejs | 4 +++ views/controls/editor/wallpaper.ejs | 2 +- 5 files changed, 55 insertions(+), 1 deletion(-) (limited to 'views/controls') diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 3eb2861..166fc50 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -64,6 +64,7 @@ var LightControl = View.extend({ pick: function(rgb, Lab){ this.labColor = Lab this.setSwatchColor(this.mode, rgb) + console.log(rgb) Walls.setColor[ this.mode ](rgb) }, diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index a7e92b6..1e70aa2 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -2,8 +2,26 @@ var Presets = View.extend({ el: "#presets", events: { + "mousedown": "stopPropagation", "click .presets span": "selectPreset", + "click .swatches span": "selectColor", }, + + colors: [ + [255,94,58], + [255,149,0], + [255,219,76], + [76,217,100], + [52,170,220], + [29,98,240], + [198,68,252], + [0,0,0], + [74,74,74], + [125,126,127], + [209,211,212], + [235,235,235], + [255,255,255], + ], presets: { wireframe: { @@ -34,6 +52,13 @@ var Presets = View.extend({ initialize: function(opt){ this.parent = opt.parent + this.$colors = this.$(".colors") + this.colors.forEach(function(color){ + var $swatch = $("") + $swatch.css("background-color","rgb(" + color + ")") + $swatch.data('color', color) + this.$colors.append($swatch) + }.bind(this)) }, toggle: function(state){ @@ -56,4 +81,9 @@ var Presets = View.extend({ $(e.currentTarget).addClass('active') }, + selectColor: function(e){ + var preset = $(e.currentTarget).data('color') + console.log(preset) + }, + }) \ No newline at end of file diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 038b0c4..731a92b 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -138,10 +138,12 @@ a{ display: none; z-index: 10; pointer-events: none; + background-size: cover; } .floatingSwatch.scissors { background-image: url(/assets/img/scissors.png) !important; background-repeat: no-repeat; + background-size: auto; border: 0; box-shadow: 0 0 transparent; } @@ -1484,6 +1486,23 @@ border-left: 1px solid black; padding-bottom: 6px; } +#presets .colors { + margin-bottom: 5px; +} +#presets .colors span { + display: inline-block; + font-size: 0; + width: 20px; + height: 20px; + border: 1px solid #ddd; + margin: 0px 2px 0 0; + cursor: pointer; + transition: transform 0.2s; +} +#presets .colors span:hover { + transform: translateX(3px) translateY(-3px); +} + .toolButton { border: 1px solid; display: inline-block; diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs index a41c527..70e48e3 100644 --- a/views/controls/editor/presets.ejs +++ b/views/controls/editor/presets.ejs @@ -1,4 +1,8 @@
+

Preset Colors

+
+
+

Preset Styles

diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index ac025b5..5ca0390 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -14,7 +14,7 @@
- +