diff --git a/app/assets/javascripts/librariesForAllPages/jquery.textillate.js b/app/assets/javascripts/librariesForAllPages/jquery.textillate.js deleted file mode 100644 index dc7f441d..00000000 --- a/app/assets/javascripts/librariesForAllPages/jquery.textillate.js +++ /dev/null @@ -1,262 +0,0 @@ -/* - * textillate.js - * http://jschr.github.com/textillate - * MIT licensed - * - * Copyright (C) 2012-2013 Jordan Schroter - */ - -(function ($) { - "use strict"; - - function isInEffect (effect) { - return /In/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.inEffects) >= 0; - }; - - function isOutEffect (effect) { - return /Out/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.outEffects) >= 0; - }; - - // custom get data api method - function getData (node) { - var attrs = node.attributes || [] - , data = {}; - - if (!attrs.length) return data; - - $.each(attrs, function (i, attr) { - if (/^data-in-*/.test(attr.nodeName)) { - data.in = data.in || {}; - data.in[attr.nodeName.replace(/data-in-/, '')] = attr.nodeValue; - } else if (/^data-out-*/.test(attr.nodeName)) { - data.out = data.out || {}; - data.out[attr.nodeName.replace(/data-out-/, '')] = attr.nodeValue; - } else if (/^data-*/.test(attr.nodeName)) { - data[attr.nodeName] = attr.nodeValue; - } - }) - - return data; - } - - function shuffle (o) { - for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); - return o; - } - - function animate ($c, effect, cb) { - $c.addClass('animated ' + effect) - .css('visibility', 'visible') - .show(); - - $c.one('animationend webkitAnimationEnd oAnimationEnd', function () { - $c.removeClass('animated ' + effect); - cb && cb(); - }); - } - - function animateChars ($chars, options, cb) { - var that = this - , count = $chars.length; - - if (!count) { - cb && cb(); - return; - } - - if (options.shuffle) $chars = shuffle($chars); - if (options.reverse) $chars = $chars.toArray().reverse(); - - $.each($chars, function (i, c) { - var $char = $(c); - - function complete () { - if (isInEffect(options.effect)) { - $char.css('visibility', 'visible'); - } else if (isOutEffect(options.effect)) { - $char.css('visibility', 'hidden'); - } - count -= 1; - if (!count && cb) cb(); - } - - var delay = options.sync ? options.delay : options.delay * i * options.delayScale; - - $char.text() ? - setTimeout(function () { animate($char, options.effect, complete) }, delay) : - complete(); - }); - }; - - var Textillate = function (element, options) { - var base = this - , $element = $(element); - - base.init = function () { - base.$texts = $element.find(options.selector); - - if (!base.$texts.length) { - base.$texts = $(''); - $element.html(base.$texts); - } - - base.$texts.hide(); - - base.$current = $('') - .text(base.$texts.find(':first-child').html()) - .prependTo($element); - - if (isInEffect(options.effect)) { - base.$current.css('visibility', 'hidden'); - } else if (isOutEffect(options.effect)) { - base.$current.css('visibility', 'visible'); - } - - base.setOptions(options); - - setTimeout(function () { - base.options.autoStart && base.start(); - }, base.options.initialDelay) - }; - - base.setOptions = function (options) { - base.options = options; - }; - - base.triggerEvent = function (name) { - var e = $.Event(name + '.tlt', { data: base }); - $element.trigger(e); - return e; - }; - - base.in = function (index, cb) { - index = index || 0; - - var $elem = base.$texts.find(':nth-child(' + (index + 1) + ')') - , options = $.extend({}, base.options, getData($elem)) - , $chars; - - base.triggerEvent('inAnimationBegin'); - - base.$current - .text($elem.html()) - .lettering('words'); - - base.$current.find('[class^="word"]') - .css({ - 'display': 'inline-block', - // fix for poor ios performance - '-webkit-transform': 'translate3d(0,0,0)', - '-moz-transform': 'translate3d(0,0,0)', - '-o-transform': 'translate3d(0,0,0)', - 'transform': 'translate3d(0,0,0)' - }) - .each(function () { $(this).lettering() }); - - $chars = base.$current - .find('[class^="char"]') - .css('display', 'inline-block'); - - if (isInEffect(options.in.effect)) { - $chars.css('visibility', 'hidden'); - } else if (isOutEffect(options.in.effect)) { - $chars.css('visibility', 'visible'); - } - - base.currentIndex = index; - - animateChars($chars, options.in, function () { - base.triggerEvent('inAnimationEnd'); - if (options.in.callback) options.in.callback(); - if (cb) cb(base); - }); - }; - - base.out = function (cb) { - var $elem = base.$texts.find(':nth-child(' + (base.currentIndex + 1) + ')') - , $chars = base.$current.find('[class^="char"]') - , options = $.extend({}, base.options, getData($elem)); - - base.triggerEvent('outAnimationBegin'); - - animateChars($chars, options.out, function () { - base.triggerEvent('outAnimationEnd'); - if (options.out.callback) options.out.callback(); - if (cb) cb(base); - }); - }; - - base.start = function (index) { - base.triggerEvent('start'); - - (function run (index) { - base.in(index, function () { - var length = base.$texts.children().length; - - index += 1; - - if (!base.options.loop && index >= length) { - if (base.options.callback) base.options.callback(); - base.triggerEvent('end'); - } else { - index = index % length; - - setTimeout(function () { - base.out(function () { - run(index) - }); - }, base.options.minDisplayTime); - } - }); - }(index || 0)); - }; - - base.init(); - } - - $.fn.textillate = function (settings, args) { - return this.each(function () { - var $this = $(this) - , data = $this.data('textillate') - , options = $.extend(true, {}, $.fn.textillate.defaults, getData(this), typeof settings == 'object' && settings); - - if (!data) { - $this.data('textillate', (data = new Textillate(this, options))); - } else if (typeof settings == 'string') { - data[settings].apply(data, [].concat(args)); - } else { - data.setOptions.call(data, options); - } - }) - }; - - $.fn.textillate.defaults = { - selector: '.texts', - loop: false, - minDisplayTime: 2000, - initialDelay: 0, - in: { - effect: 'fadeInLeftBig', - delayScale: 1.5, - delay: 50, - sync: false, - reverse: false, - shuffle: false, - callback: function () {} - }, - out: { - effect: 'hinge', - delayScale: 1.5, - delay: 50, - sync: false, - reverse: false, - shuffle: false, - callback: function () {} - }, - autoStart: true, - inEffects: [], - outEffects: [ 'hinge' ], - callback: function () {} - }; - -}(jQuery)); diff --git a/app/assets/javascripts/metamaps/Metamaps.Backbone.js b/app/assets/javascripts/metamaps/Metamaps.Backbone.js index ed6077e7..edc87d12 100644 --- a/app/assets/javascripts/metamaps/Metamaps.Backbone.js +++ b/app/assets/javascripts/metamaps/Metamaps.Backbone.js @@ -9,6 +9,10 @@ Metamaps.Backbone.Map = Backbone.Model.extend({ if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true; else return false; }, + authorizePermissionChange: function (mapper) { + if (mapper && this.get('user_id') === mapper.get('id')) return true; + else return false; + }, getUser: function () { return Metamaps.Mapper.get(this.get('user_id')); }, @@ -133,7 +137,7 @@ Metamaps.Backbone.Mapper = Backbone.Model.extend({ prepareLiForFilter: function () { var li = ''; li += '
  • ';       - li += '';       li += '

    ' + this.get('name') + '

    • '; return li; diff --git a/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js b/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js index 5f03e7b7..6c82c862 100644 --- a/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js +++ b/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js @@ -78,7 +78,6 @@ Metamaps.GlobalUI = { // initialize global backbone models and collections if (Metamaps.Active.Mapper) Metamaps.Active.Mapper = new Metamaps.Backbone.Mapper(Metamaps.Active.Mapper); - Metamaps.Mappers = new Metamaps.Backbone.MapperCollection([Metamaps.Active.Mapper]); var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : []; var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : []; @@ -437,9 +436,9 @@ Metamaps.GlobalUI.Search = { startTypeahead: function () { var self = Metamaps.GlobalUI.Search; - var mapheader = Metamaps.Active.Mapper ? '

    Maps

    ' : '

    Maps

    '; - var topicheader = Metamaps.Active.Mapper ? '

    Topics

    ' : '

    Topics

    '; - var mapperheader = '

    Mappers

    '; + var mapheader = Metamaps.Active.Mapper ? '

    Maps

    ' : '

    Maps

    '; + var topicheader = Metamaps.Active.Mapper ? '

    Topics

    ' : '

    Topics

    '; + var mapperheader = '

    Mappers

    '; var topics = { name: 'topics', @@ -516,6 +515,7 @@ Metamaps.GlobalUI.Search = { filter: function (dataset) { if (dataset.length == 0) { dataset.push({ + profile: "/assets/user.png", value: "No results", label: "No results", rtype: "noresult" diff --git a/app/assets/javascripts/metamaps/Metamaps.js b/app/assets/javascripts/metamaps/Metamaps.js index a6892369..9d20ce34 100644 --- a/app/assets/javascripts/metamaps/Metamaps.js +++ b/app/assets/javascripts/metamaps/Metamaps.js @@ -196,7 +196,7 @@ Metamaps.Backbone.init = function () { prepareLiForFilter: function () { var li = ''; li += '
  • ';       - li += '
    • '; return li; @@ -306,31 +306,44 @@ Metamaps.Backbone.init = function () { Metamaps.Metacodes = Metamaps.Metacodes ? new self.MetacodeCollection(Metamaps.Metacodes) : new self.MetacodeCollection(); Metamaps.Topics = Metamaps.Topics ? new self.TopicCollection(Metamaps.Topics) : new self.TopicCollection(); - Metamaps.Topics.on("add remove", function(topic){ - Metamaps.Filter.checkMetacodes(); - Metamaps.Filter.checkMappers(); - }); Metamaps.Synapses = Metamaps.Synapses ? new self.SynapseCollection(Metamaps.Synapses) : new self.SynapseCollection(); - Metamaps.Synapses.on("add remove", function(synapse){ - Metamaps.Filter.checkSynapses(); - Metamaps.Filter.checkMappers(); - }); Metamaps.Mappers = Metamaps.Mappers ? new self.MapperCollection(Metamaps.Mappers) : new self.MapperCollection(); if (Metamaps.Active.Map) { Metamaps.Mappings = Metamaps.Mappings ? new self.MappingCollection(Metamaps.Mappings) : new self.MappingCollection(); - Metamaps.Mappings.on("add remove", function(synapse){ - Metamaps.Filter.checkMetacodes(); - Metamaps.Filter.checkMappers(); - }); - Metamaps.Active.Map = new self.Map(Metamaps.Active.Map); } if (Metamaps.Active.Topic) Metamaps.Active.Topic = new self.Topic(Metamaps.Active.Topic); + + //attach collection event listeners + self.attachCollectionEvents = function () { + + Metamaps.Topics.on("add remove", function(topic){ + Metamaps.Map.InfoBox.updateNumbers(); + Metamaps.Filter.checkMetacodes(); + Metamaps.Filter.checkMappers(); + }); + + Metamaps.Synapses.on("add remove", function(synapse){ + Metamaps.Map.InfoBox.updateNumbers(); + Metamaps.Filter.checkSynapses(); + Metamaps.Filter.checkMappers(); + }); + + if (Metamaps.Active.Map) { + Metamaps.Mappings.on("add remove", function(mapping){ + Metamaps.Map.InfoBox.updateNumbers(); + Metamaps.Filter.checkSynapses(); + Metamaps.Filter.checkMetacodes(); + Metamaps.Filter.checkMappers(); + }); + } + } + self.attachCollectionEvents(); }; // end Metamaps.Backbone.init @@ -615,7 +628,6 @@ Metamaps.Create = { Metamaps.TopicCard = { openTopicCard: null, //stores the JIT local ID of the topic with the topic card open linkActionsString: '
    share
    remove
    ', - init: function () { // initialize best_in_place editing @@ -1333,6 +1345,14 @@ Metamaps.Util = { } return b + s; }, + nowDateFormatted: function () { + var date = new Date(Date.now()); + var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1); + var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); + var year = date.getFullYear(); + + return month + '/' + day + '/' + year; + }, decodeEntities: function (desc) { var str, temp = document.createElement('p'); temp.innerHTML = desc; //browser handles the topics @@ -1380,7 +1400,8 @@ Metamaps.Realtime = { init: function () { var self = Metamaps.Realtime; - $(".realtimeOnOff").click(self.toggle); + $(".rtOn").click(self.turnOn); + $(".rtOff").click(self.turnOff); $('.sidebarCollaborateIcon').click(self.toggleBox); $('.sidebarCollaborateBox').click(function(event){ @@ -1391,7 +1412,7 @@ Metamaps.Realtime = { var mapperm = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); if (mapperm) { - self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); + self.socket = io.connect('http://localhost:5001'); self.socket.on('connect', function () { console.log('socket connected'); self.setupSocket(); @@ -1431,20 +1452,25 @@ Metamaps.Realtime = { }); } }, - toggle: function () { + turnOn: function () { var self = Metamaps.Realtime; if (!self.status) { self.sendRealtimeOn(); - $(this).html('ON').removeClass('rtOff').addClass('rtOn'); $(".rtMapperSelf").removeClass('littleRtOff').addClass('littleRtOn'); - } else { - self.sendRealtimeOff(); - $(this).html('OFF').removeClass('rtOn').addClass('rtOff'); - $(".rtMapperSelf").removeClass('littleRtOn').addClass('littleRtOff'); + self.status = true; + $(".sidebarCollaborateIcon").addClass("blue"); + } + }, + turnOff: function () { + var self = Metamaps.Realtime; + + if (self.status) { + self.sendRealtimeOff(); + $(".rtMapperSelf").removeClass('littleRtOn').addClass('littleRtOff'); + self.status = false; + $(".sidebarCollaborateIcon").removeClass("blue"); } - self.status = !self.status; - $(".sidebarCollaborateIcon").toggleClass("blue"); }, setupSocket: function () { var self = Metamaps.Realtime; @@ -1454,6 +1480,7 @@ Metamaps.Realtime = { socket.emit('newMapperNotify', { userid: myId, username: Metamaps.Active.Mapper.get("name"), + userimage: Metamaps.Active.Mapper.get("image"), mapid: Metamaps.Active.Map.id }); @@ -1504,6 +1531,7 @@ Metamaps.Realtime = { // data.userid // data.username + // data.userimage // data.userrealtime self.mappersOnMap[data.userid] = { @@ -1516,7 +1544,11 @@ Metamaps.Realtime = { mapperListItem += data.userid; mapperListItem += '" class="rtMapper littleRt'; mapperListItem += onOff; - mapperListItem += '">' + data.username + ''; + mapperListItem += '">'; + mapperListItem += ''; + mapperListItem += data.username; + mapperListItem += '
    '; + mapperListItem += ''; $('#mapper' + data.userid).remove(); $('.realtimeMapperList ul').append(mapperListItem); @@ -1527,13 +1559,19 @@ Metamaps.Realtime = { // data.userid // data.username + // data.userimage self.mappersOnMap[data.userid] = { name: data.username, realtime: true }; - var mapperListItem = '
  • ' + data.username + '
    • '; + var mapperListItem = '
  • '; + mapperListItem += ''; + mapperListItem += data.username; + mapperListItem += '
    '; + mapperListItem += '
    • '; + $('#mapper' + data.userid).remove(); $('.realtimeMapperList ul').append(mapperListItem); @@ -1543,6 +1581,7 @@ Metamaps.Realtime = { var update = { userToNotify: data.userid, username: Metamaps.Active.Mapper.get("name"), + userimage: Metamaps.Active.Mapper.get("image"), userid: Metamaps.Active.Mapper.id, userrealtime: self.status, mapid: Metamaps.Active.Map.id @@ -2070,7 +2109,8 @@ Metamaps.Filter = { if (!self.isOpen && !self.changing) { self.changing = true; - $('.sidebarFilterBox').fadeIn(200, function () { + var height = $(document).height() - 108; + $('.sidebarFilterBox').css('max-height', height + 'px').fadeIn(200, function () { self.changing = false; self.isOpen = true; }); @@ -2177,6 +2217,8 @@ Metamaps.Filter = { $('#filter_by_' + listToModify + ' li[data-id="' + identifier + '"]').fadeOut('fast',function(){ $(this).remove(); }); + index = self.visible[filtersToUser].indexOf(identifier); + self.visible[filtersToUse].splice(index, 1); }); var model, li, jQueryLi; @@ -2192,7 +2234,8 @@ Metamaps.Filter = { li = model.prepareLiForFilter(); jQueryLi = $(li).hide(); $('li', '#filter_by_' + listToModify + ' ul').add(jQueryLi.fadeIn("fast")) - .sort(sortAlpha).appendTo('#filter_by_' + listToModify + ' ul'); + .sort(sortAlpha).appendTo('#filter_by_' + listToModify + ' ul'); + self.visible[filtersToUse].push(identifier); }); // update the list of filters with the new list we just generated @@ -2272,12 +2315,10 @@ Metamaps.Filter = { }, toggleMapper: function () { var self = Metamaps.Filter; - self.toggleLi.call(this, 'mappers'); }, toggleSynapse: function () { var self = Metamaps.Filter; - self.toggleLi.call(this, 'synapses'); }, passFilters: function () { @@ -2313,6 +2354,7 @@ Metamaps.Filter = { } else { if (n) { + // TODO quick deselect node n.setData('alpha', 0, 'end'); } else console.log(topic); @@ -2334,12 +2376,13 @@ Metamaps.Filter = { if (passesSynapse && passesMapper) { if (e) { - e.setData('alpha', 1, 'end'); + e.setData('alpha', 0.4, 'end'); } else console.log(synapse); } else { if (e) { + // TODO quick deselect edge e.setData('alpha', 0, 'end'); } else console.log(synapse); @@ -2350,7 +2393,7 @@ Metamaps.Filter = { Metamaps.Visualize.mGraph.fx.animate({ modes: ['node-property:alpha', 'edge-property:alpha'], - duration: 500 + duration: 200 }); } }; // end Metamaps.Filter @@ -2553,6 +2596,7 @@ Metamaps.Topic = { Metamaps.Active.Topic = new bb.Topic(data.topic); Metamaps.Topics = new bb.TopicCollection([data.topic].concat(data.relatives)); Metamaps.Synapses = new bb.SynapseCollection(data.synapses); + Metamaps.Backbone.attachCollectionEvents(); // build and render the visualization Metamaps.Visualize.type = "RGraph"; @@ -2884,6 +2928,7 @@ Metamaps.Map = { Metamaps.Topics = new bb.TopicCollection(data.topics); Metamaps.Synapses = new bb.SynapseCollection(data.synapses); Metamaps.Mappings = new bb.MappingCollection(data.mappings); + Metamaps.Backbone.attachCollectionEvents(); // build and render the visualization Metamaps.Visualize.type = "ForceDirected"; @@ -2893,6 +2938,9 @@ Metamaps.Map = { Metamaps.Filter.reset(); Metamaps.Filter.initializeFilterData(); // this sets all the visible filters to true + // set the proper mapinfobox content + Metamaps.Map.InfoBox.load(); + // these three update the actual filter box with the right list items Metamaps.Filter.checkMetacodes(); Metamaps.Filter.checkSynapses(); @@ -2968,23 +3016,22 @@ Metamaps.Map.InfoBox = { isOpen: false, changing: false, selectingPermission: false, + changePermissionText: "
    As the creator, you can change the permission of this map, but the permissions of the topics and synapses on it must be changed independently.
    ", + nameHTML: '{{name}}', + descHTML: '{{desc}}', + deleteHTML: "Delete", init: function () { var self = Metamaps.Map.InfoBox; - // because anyone who can edit the map can change the map title - $('.mapInfoName .best_in_place_name').bind("ajax:success", function () { - var name = $(this).html(); - $('.mapName').html(name); - Metamaps.Active.Map.set('name', name); - }); - - $('.yourMap .mapPermission').click(self.onPermissionClick); - $('.mapInfoIcon').click(self.toggleBox); $('.mapInfoBox').click(function(event){ event.stopPropagation(); }); $('body').click(self.close); + + self.attachEventListeners(); + + self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html()); }, toggleBox: function (event) { var self = Metamaps.Map.InfoBox; @@ -3016,6 +3063,66 @@ Metamaps.Map.InfoBox = { }); } }, + load: function () { + var self = Metamaps.Map.InfoBox; + + var map = Metamaps.Active.Map; + + var obj = map.pick("permission","contributor_count","topic_count","synapse_count","created_at","updated_at"); + + var isCreator = map.authorizePermissionChange(Metamaps.Active.Mapper); + var canEdit = map.authorizeToEdit(Metamaps.Active.Mapper); + + obj["name"] = canEdit ? Hogan.compile(self.nameHTML).render({id: map.id, name: map.get("name")}) : map.get("name"); + obj["desc"] = canEdit ? Hogan.compile(self.descHTML).render({id: map.id, desc: map.get("desc")}) : map.get("desc"); + obj["map_creator_tip"] = isCreator ? self.changePermissionText : ""; + obj["delete"] = isCreator ? Hogan.compile(self.deleteHTML).render({id: map.id}) : ""; + obj["contributor_list"] = self.createContributorList(); + obj["user_name"] = isCreator ? "you" : map.get("user_name"); + + var classes = isCreator ? "yourMap" : ""; + classes += canEdit ? " canEdit" : ""; + $(".mapInfoBox").removeClass("yourMap canEdit") + .addClass(classes) + .html(self.generateBoxHTML.render(obj)); + + self.attachEventListeners(); + }, + attachEventListeners: function () { + var self = Metamaps.Map.InfoBox; + + $('.mapInfoBox .best_in_place').best_in_place(); + + // because anyone who can edit the map can change the map title + $('.mapInfoName .best_in_place_name').unbind("ajax:success").bind("ajax:success", function () { + var name = $(this).html(); + $('.mapName').html(name); + Metamaps.Active.Map.set('name', name); + }); + + $('.yourMap .mapPermission').unbind().click(self.onPermissionClick); + }, + createContributorList: function () { + var self = Metamaps.Map.InfoBox; + + var mapperNames = Metamaps.Mappers.pluck("name"); + + return mapperNames.length > 0 ? mapperNames.join(", ") : "No one has added anything yet."; + }, + updateNumbers: function () { + var self = Metamaps.Map.InfoBox; + var mapper = Metamaps.Active.Mapper; + + if (mapper && Metamaps.Mappers.get(mapper.id) === undefined) { + Metamaps.Mappers.add(mapper); + } + $('.mapContributors').text(Metamaps.Mappers.length) + .append('
    ' + self.createContributorList() + '
    '); + $('.mapTopics').text(Metamaps.Topics.length); + $('.mapSynapses').text(Metamaps.Synapses.length); + + $('.mapEditedAt').html('Last edited ' + Metamaps.Util.nowDateFormatted()); + }, onPermissionClick: function () { var self = Metamaps.Map.InfoBox; diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 7a16d999..035659aa 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -85,8 +85,6 @@ body { font-family: 'din-medium', helvetica, sans-serif; color: #424242; } - - h1, h2, h3, @@ -95,19 +93,6 @@ h5, h6 { font-weight: normal; } -h1 { - display: block; - text-align: left; - font-family: "vinyl", sans-serif; -} -h2 { - display: block; - text-align: center; - font-family: "katarine-web", sans-serif; - background: url('black_bg.png'); - font-size: 24px; - line-height: 35px; -} a { color: #424242; text-decoration: none; @@ -677,10 +662,8 @@ label[for="user_remember_me"] { .sidebarFilterBox { display:none; - height: 400px; - width: 320px; - padding: 10px; - text-align: center; + width: 304px; + padding: 16px 0; overflow-y: auto; } h3.filterBox { @@ -689,53 +672,78 @@ h3.filterBox { } .sidebarFilterBox span { float: right; - background: #15bad4; padding: 1px 4px; border-radius: 2px; - margin-left: 5px; + margin-right: 5px; cursor: pointer; + font-size:12px; +} +.sidebarFilterBox span:hover { + color: #00BCD4; } .sidebarFilterBox ul { list-style: none; } .sidebarFilterBox li { float: left; - width: 61px; - height: 70px; + width: 72px; + height: 72px; cursor: pointer; + text-align: center; } .sidebarFilterBox li:hover { - background: #000; + } -.sidebarFilterBox li img { - background-color: rgba(255, 255, 255, 0.1); - width: 45px; - height: 45px; - margin: 0 auto; +#filter_by_mapper li img { + width: 40px; + height: 40px; + border-radius: 20px; + margin: 8px auto; +} +#filter_by_metacode li img { + width: 40px; + height: 40px; + margin: 8px auto; +} +#filter_by_synapse li img { + width: 16px; + height: 16px; + margin: 8px auto; } .sidebarFilterBox li p { font-size: 11px; line-height: 11px; - font-family: arial, sans-serif; + font-family: 'din-regular', helvetica, sans-serif; } .sidebarFilterBox li.toggledOff { opacity: 0.4; } +.sidebarFilterBox h2 { + font-size: 18px; + margin-left: 16px; + line-height: 18px; +} .sidebarFilterBox h3 { text-align: left; text-transform: uppercase; - font-weight: bold; + font-size:14px; + float:left; +} +.filterBySection { + margin-left:16px; + width: 288px; + border-top: 1px solid #BDBDBD; + padding-top:8px; + margin-top:8px; } #filter_by_metacode { - border-bottom: 1px solid black; - margin: 5px; + } #filter_by_mapper { - margin: 5px auto; + } #filter_by_synapse { - margin: 5px auto; - border-bottom: 1px solid black; + } /* end filter by metacode */ @@ -748,52 +756,66 @@ h3.filterBox { .sidebarCollaborateBox { display: none; height: auto; - width: auto; - padding: 10px; - min-width: 180px; + padding: 16px; + width: 238px; } h3.realtimeBoxTitle { margin-bottom: 10px; text-align: left; float: left; - font-family: 'Lato', helvetica, sans-serif; + font-size:18px; + line-height:18px; } .sidebarCollaborateBox .realtimeOnOff { - float: left; + float: right; padding: 4px; border-radius: 2px; margin-left: 12px; cursor: pointer; - width: 31px; text-align: center; + font-size:12px; +} +.sidebarCollaborateBox .realtimeOnOff:hover { + color: #00bcd4; } .sidebarCollaborateBox .rtOff { - background: white; - color: black; -} -.sidebarCollaborateBox .rtOff:hover { - padding: 3px; - border: 1px solid #15bad4; + } .sidebarCollaborateBox .rtOn { - background: #15bad4; - color: white; + } .realtimeMapperList .rtMapper { list-style-type: none; white-space: nowrap; - padding: 2px 5px 2px 30px; + overflow: hidden; + text-overflow: ellipsis; + padding: 9px 32px; display: block; - background-size: 26px 26px; - background-repeat: no-repeat; - background-position: 4px center; - margin-bottom: 5px; + height: 14px; + font-family: 'din-regular', helvetica, sans-serif; + font-size: 14px; + line-height: 14px; + position: relative; } -.realtimeMapperList .littleRtOff { - background-image: url('junto24.png'); +.rtUserImage { + position: absolute; + top: 4px; + left: 0; + border-radius: 12px; } -.realtimeMapperList .littleRtOn { - background-image: url('junto24.png'); +.littleJuntoIcon { + width: 24px; + height:24px; + position: absolute; + top: 4px; + right: 0; + background-image: url('junto24_sprite.png'); +} +.realtimeMapperList .littleRtOff .littleJuntoIcon { + background-position: 0 0; +} +.realtimeMapperList .littleRtOn .littleJuntoIcon { + background-position: -24px 0; } /* end collaborate */ @@ -1116,7 +1138,7 @@ float: left; background-position: 13px center; } .mapSynapses { - background-image: url(synapse32tmcard.png); + background-image: url(synapse32.png); background-position: 13px center; } .mapInfoBox .mapPermission { @@ -1126,23 +1148,26 @@ float: left; padding: 0; margin: 8px 30px 8px 10px; position: relative; + background-image: url(permissions32_sprite.png); } .mapInfoBox .mapPermission.commons { - background-image: url(CO32.png); + background-position: 0 0; } .mapInfoBox .mapPermission.public { - background-image: url(PU32.png); + background-position: -64px 0; } .mapInfoBox .mapPermission.private { - background-image: url(PR32.png); + background-position: -32px 0; } .yourMap .mapPermission:hover { - background-image: url(arrowexpand.png); + background-image: url(arrowdown_sprite.png); cursor: pointer; + background-position: center -11px; } .yourMap .mapPermission.minimize { - background-image: url(arrowcollapse.png) !important; + background-image: url(arrowdown_sprite.png) !important; cursor: pointer; + background-position: center -11px; } .mapInfoBox .mapPermission .permissionSelect { list-style: none; @@ -1155,25 +1180,25 @@ float: left; width: 32px; height: 32px; background-repeat: no-repeat; - background-position: center center; + background-image: url(permissions32_sprite.png); } .mapInfoBox .mapPermission .permissionSelect .commons { - background-image: url(CO32.png); + background-position: 0 0; } .mapInfoBox .mapPermission .permissionSelect .public { - background-image: url(PU32.png); + background-position: -64px 0; } .mapInfoBox .mapPermission .permissionSelect .private { - background-image: url(PR32.png); + background-position: -32px 0; } .mapInfoBox .mapPermission .permissionSelect .commons:hover { - background-image: url(CO32b.png); + background-position: 0 -32px; } .mapInfoBox .mapPermission .permissionSelect .public:hover { - background-image: url(PU32b.png); + background-position: -64px -32px; } .mapInfoBox .mapPermission .permissionSelect .private:hover { - background-image: url(PR32b.png); + background-position: -32px -32px; } .mapInfoBox .mapInfoDesc { font-family: helvetica, sans-serif; @@ -1182,6 +1207,7 @@ float: left; height: 106px; font-size: 14px; line-height: 16px; + overflow-y: auto; } .mapInfoBox .mapInfoMeta { height: 35px; diff --git a/app/assets/stylesheets/clean.css b/app/assets/stylesheets/clean.css index a06e0103..a19b20ed 100644 --- a/app/assets/stylesheets/clean.css +++ b/app/assets/stylesheets/clean.css @@ -202,19 +202,31 @@ font-family: 'din-medium', helvetica, sans-serif; } .sidebarSearch .tt-dropdown-menu { - left: -35px !important; - background: #0F1519; - min-width: 440px; - width: 440px; - overflow-y: scroll; + top: 40px !important; + background: #FFF; + width: 472px; + overflow-y: auto; overflow-x: hidden; + box-shadow: 0 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24); +} +.searchHeader { + height: 42px; + width: 100%; +} +.searchTopicsHeader { + background: #4fc4a8; +} +.searchMapsHeader { + background: #994fc0; +} +.searchMappersHeader { + background: #c04f4f; } .sidebarSearch .tt-dropdown-menu h3 { - font-family: 'vinyl', helvetica, sans-serif; text-transform: uppercase; - font-style: italic; - font-size: 20px; - line-height: 20px; + color: #F5F5F5; + font-size: 18px; + line-height: 18px; margin: 10px 0 3px 10px; float: left; } @@ -246,15 +258,14 @@ cursor: pointer; } .sidebarSearch .tt-suggestions { - font-family: 'LatoLight', helvetica, sans-serif; overflow: visible; } .sidebarSearch .tt-suggestion { - background: #2A343C; + background: #FFF; } .sidebarSearch .tt-is-under-cursor, .sidebarSearch .tt-is-under-mouse-cursor { - background: #0E161D; + background: #E0E0E0; } .sidebarSearch .tt-dataset-maps .tt-is-under-cursor .resultmap, .sidebarSearch .tt-dataset-maps .tt-is-under-mouse-cursor .resultmap, @@ -264,9 +275,10 @@ } .sidebarSearch .tt-suggestion .icon { float: left; - width: 36px; - height: 36px; + width: 32px; + height: 32px; margin-right: 5px; + border-radius:16px; } .sidebarSearch .topicMetacode { float: left; @@ -274,8 +286,8 @@ max-width: 70px; } .sidebarSearch .tt-dataset-topics .topicIcon { - width: 36px; - height: 36px; + width: 32px; + height: 32px; } .sidebarSearch .tt-dataset-topics .tt-is-under-cursor .topicIcon, .sidebarSearch .tt-dataset-topics .tt-is-under-mouse-cursor .topicIcon { @@ -296,9 +308,7 @@ text-align: center; } .sidebarSearch .tt-dataset-mappers .tt-suggestion .icon { - width: 28px; - height: 28px; - padding: 4px; + margin: 4px 9px 4px 4px; } .sidebarSearch .resultText { width: 225px; @@ -308,14 +318,12 @@ } .sidebarSearch .resultTitle { font-weight: normal; - font-family: 'LatoRegular'; font-size: 18px; line-height: 22px; width: 100%; padding-top: 8px; } .sidebarSearch .resultDesc { - font-family: 'LatoItalic'; font-size: 14px; line-height: 16px; width: 100%; @@ -481,7 +489,7 @@ position: fixed; top: 10px; right: 24px; - z-index:3; + z-index:4; } .upperRightUI .upperRightEl { diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb index 75b06ede..bfd80de2 100644 --- a/app/helpers/users_helper.rb +++ b/app/helpers/users_helper.rb @@ -8,6 +8,7 @@ module UsersHelper user['id'] = u.id user['label'] = u.name user['value'] = u.name + user['profile'] = u.image.url(:thumb) user['mapCount'] = u.maps.count user['rtype'] = "mapper" diff --git a/app/models/user.rb b/app/models/user.rb index bfdf8fae..9ec41cab 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -23,7 +23,8 @@ class User < ActiveRecord::Base :thumb => ['100x100>', :png], :square => ['200x200#', :png], :round => ['200x200#', :png] - } + }, + :default_url => "/assets/user.png" #, :convert_options => {:round => Proc.new{self.convert_options}} diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb index d0761885..8e9ff38f 100644 --- a/app/views/layouts/_templates.html.erb +++ b/app/views/layouts/_templates.html.erb @@ -6,7 +6,7 @@
    @@ -43,15 +43,15 @@
    - {{name}} + {{name}}
    - {{desc}} -
    + {{desc}} +
    @@ -107,7 +107,7 @@