added ability to change metacode. updated bottom left menu with icon, upper right menu with hover states
This commit is contained in:
Connor Turland
parent
bfdf706f15
commit
ac12c2a9ae
12 changed files with 153 additions and 153 deletions
BIN
app/assets/images/MMCCicon_maximize_arrow_black.png
Normal file
BIN
app/assets/images/MMCCicon_maximize_arrow_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 B |
BIN
app/assets/images/MMCCicon_minimize_arrow_black.png
Normal file
BIN
app/assets/images/MMCCicon_minimize_arrow_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 264 B |
BIN
app/assets/images/beta_gen002.png
Normal file
BIN
app/assets/images/beta_gen002.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -27,11 +27,11 @@ function generateShowcardHTML() {
|
|||
</span> \
|
||||
<div class="links"> \
|
||||
<div \
|
||||
class="linkItem icon" \
|
||||
title="click and drag to move card"> \
|
||||
class="linkItem icon"> \
|
||||
<div class="metacodeTitle">$_metacode_$</div> \
|
||||
<div class="metacodeImage" \
|
||||
style="background-image:url($_imgsrc_$);"></div> \
|
||||
style="background-image:url($_imgsrc_$);" \
|
||||
title="click and drag to move card"></div> \
|
||||
</div> \
|
||||
<div class="linkItem contributor"></div> \
|
||||
<div class="linkItem mapCount">$_map_count_$</div> \
|
||||
|
|
@ -40,6 +40,7 @@ function generateShowcardHTML() {
|
|||
<a href="/topics/$_id_$" class="linkItem topicPopout" title="Open Topic in New Tab" target="_blank"></a>\
|
||||
<div class="clearfloat"></div> \
|
||||
</div> \
|
||||
<div class="metacodeSelect">$_metacode_select_$</div> \
|
||||
<div class="scroll"> \
|
||||
<div class="desc"> \
|
||||
<span class="best_in_place best_in_place_desc" \
|
||||
|
|
@ -84,28 +85,6 @@ function replaceVariables(html, node) {
|
|||
close_a_tag = '';
|
||||
}
|
||||
|
||||
//create metacode_choices array from imgArray
|
||||
var metacodes = new Array();
|
||||
for (var key in imgArray) {
|
||||
if (imgArray.hasOwnProperty(key)) {
|
||||
if (key != node.getData("metacode")) {
|
||||
metacodes.push(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Arrange it how we want it
|
||||
metacodes.sort();
|
||||
metacodes.unshift(node.getData("metacode"));
|
||||
|
||||
var metacode_choices = "'[";
|
||||
for (var i in metacodes) {
|
||||
metacode_choices += '["' + metacodes[i] + '","' + metacodes[i] + '"],';
|
||||
}
|
||||
//remove trailing comma and add ]
|
||||
metacode_choices = metacode_choices.slice(0, -1);
|
||||
metacode_choices += "]'";
|
||||
|
||||
var desc_nil = "<span class='gray'>Click to add description...</span>";
|
||||
var link_nil = "<span class='gray'>Click to add link...</span>";
|
||||
|
||||
|
|
@ -152,7 +131,7 @@ function replaceVariables(html, node) {
|
|||
html = html.replace(/\$_name_\$/g, node.name);
|
||||
html = html.replace(/\$_userid_\$/g, node.getData("userid"));
|
||||
html = html.replace(/\$_username_\$/g, node.getData("username"));
|
||||
html = html.replace(/\$_metacode_choices_\$/g, metacode_choices);
|
||||
html = html.replace(/\$_metacode_select_\$/g, $('#metacodeOptions').html());
|
||||
html = html.replace(/\$_go_link_\$/g, go_link);
|
||||
html = html.replace(/\$_a_tag_\$/g, a_tag);
|
||||
html = html.replace(/\$_close_a_tag_\$/g, close_a_tag);
|
||||
|
|
@ -213,28 +192,42 @@ function populateShowCard(node) {
|
|||
showCard.appendChild(perm);
|
||||
}
|
||||
|
||||
|
||||
var selectingMetacode = false;
|
||||
// attach the listener that shows the metacode title when you hover over the image
|
||||
$('.showcard .metacodeImage').hover(function(){
|
||||
$('.showcard .metacodeImage').mouseenter(function(){
|
||||
$('.showcard .icon').css('z-index','3');
|
||||
$('.showcard .metacodeTitle').show();
|
||||
},
|
||||
function() {
|
||||
});
|
||||
$('.showcard .linkItem.icon').mouseleave(function() {
|
||||
if ( !selectingMetacode ) {
|
||||
$('.showcard .metacodeTitle').hide();
|
||||
$('.showcard .icon').css('z-index','1');
|
||||
}
|
||||
});
|
||||
|
||||
$('.showcard .metacodeTitle').click(function() {
|
||||
if (!selectingMetacode) {
|
||||
selectingMetacode = true;
|
||||
$(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
|
||||
$('.metacodeSelect').show();
|
||||
// add the scroll bar to the list of metacode select options if it isn't already there
|
||||
if ( !$('.metacodeSelect ul').hasClass('mCustomScrollbar') ) {
|
||||
$('.metacodeSelect ul').mCustomScrollbar();
|
||||
|
||||
$('.metacodeSelect li').click(function() {
|
||||
selectingMetacode = false;
|
||||
var metacodeName = $(this).find('.mSelectName').text();
|
||||
updateMetacode(node, metacodeName);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
selectingMetacode = false;
|
||||
$(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
|
||||
$('.metacodeSelect').hide();
|
||||
}
|
||||
});
|
||||
|
||||
//bind best_in_place ajax callbacks
|
||||
$(showCard).find('.best_in_place_metacode').bind("ajax:success", function() {
|
||||
var metacode = $(this).html();
|
||||
//changing img alt, img src for top card (topic view page)
|
||||
//and on-canvas card. Also changing image of node
|
||||
$(showCard).find('img.icon').attr('alt', metacode);
|
||||
$(showCard).find('img.icon').attr('src', imgArray[metacode].src);
|
||||
node.setData("metacode", metacode);
|
||||
Mconsole.plot();
|
||||
});
|
||||
|
||||
$(showCard).find('.best_in_place_name').bind("ajax:success", function() {
|
||||
var name = $(this).html();
|
||||
node.name = name;
|
||||
|
|
|
|||
|
|
@ -482,13 +482,6 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
|
|||
addHoverForSettings();
|
||||
|
||||
//bind best_in_place ajax callbacks
|
||||
$('.best_in_place_metacode').bind("ajax:success", function() {
|
||||
var metacode = $(this).html();
|
||||
//changing img alt, img src for top card (topic view page)
|
||||
//and on-canvas card. Also changing image of node
|
||||
$(this).parents('.CardOnGraph').find('img.icon').attr('alt', metacode);
|
||||
$(this).parents('.CardOnGraph').find('img.icon').attr('src', imgArray[metacode].src);
|
||||
});
|
||||
$('.best_in_place_desc').bind("ajax:success", function() {
|
||||
$(this).parents('.CardOnGraph').find('.scroll').mCustomScrollbar("update");
|
||||
});
|
||||
|
|
@ -678,6 +671,30 @@ function fetchRelatives(node) {
|
|||
});
|
||||
}
|
||||
|
||||
// @param node = JIT node object
|
||||
// @param metacode = STRING like "Idea", "Action", etc.
|
||||
function updateMetacode(node, metacode) {
|
||||
var mdata = { "topic": { "metacode": metacode } };
|
||||
$.ajax({
|
||||
type: "PUT",
|
||||
dataType: 'json',
|
||||
url: "/topics/" + node.id,
|
||||
data: mdata,
|
||||
success: function(data) {
|
||||
$('.CardOnGraph').find('.metacodeTitle').text(metacode);
|
||||
$('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + imgArray[metacode].src + ')');
|
||||
node.setData("metacode", metacode);
|
||||
Mconsole.plot();
|
||||
$('.metacodeTitle').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
|
||||
$('.metacodeSelect').hide();
|
||||
setTimeout(function() { $('.metacodeTitle').hide(); $('.showcard .icon').css('z-index','1'); }, 500);
|
||||
},
|
||||
error: function(){
|
||||
alert('failed to update metacode');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function MconsoleReset() {
|
||||
|
||||
var tX = Mconsole.canvas.translateOffsetX;
|
||||
|
|
|
|||
|
|
@ -642,6 +642,9 @@ background: #0F1519 url('MMCCicon_save_new_map.png') no-repeat center center;
|
|||
background-size: 28px 28px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.sidebarForkIcon:hover {
|
||||
background-color: black;
|
||||
}
|
||||
.sidebarForkBox {
|
||||
position:absolute;
|
||||
display:none;
|
||||
|
|
@ -677,6 +680,9 @@ background: #0F1519 url('MMCCicon_save_layout.png') no-repeat center center;
|
|||
background-size: 22px 22px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.sidebarSaveIcon:hover {
|
||||
background-color: black;
|
||||
}
|
||||
.sidebarSaveBox {
|
||||
position:absolute;
|
||||
display:none;
|
||||
|
|
@ -713,6 +719,9 @@ background: #0F1519 url('MMCCicon_filter2.png') no-repeat center center;
|
|||
background-size: 28px 28px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.sidebarFilterIcon:hover {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
/* we set a few of these params off screen to begin with, so that when we initialize the scroll bar it works, but then
|
||||
we hide the element and position it correctly */
|
||||
|
|
@ -803,6 +812,9 @@ background: #0F1519 url('MMCCicon_realtime_junto.png') no-repeat 0px 1px;
|
|||
background-size: 36px 36px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.sidebarCollaborateIcon:hover, .sidebarCollaborateIcon.blue:hover{
|
||||
background-color: black;
|
||||
}
|
||||
.sidebarCollaborateIcon.blue {
|
||||
background: #0F1519 url('MMCCicon_realtime_blue.png') no-repeat center center;
|
||||
background-size: 26px 25px;
|
||||
|
|
@ -1955,7 +1967,7 @@ background-size: 22px 20px;
|
|||
border:none;
|
||||
bottom:36px;
|
||||
left:-1px;
|
||||
height:124px;
|
||||
height:123px;
|
||||
z-index:12;
|
||||
width:121px;
|
||||
color: white;
|
||||
|
|
@ -1965,7 +1977,7 @@ background-size: 22px 20px;
|
|||
overflow: hidden;
|
||||
padding: 0 0 0 30px;
|
||||
margin: 0;
|
||||
background: #0F1519;/*url('black_bg.png'); */
|
||||
background: #0F1519 url(beta_gen002.png) no-repeat 6px 12px;
|
||||
border-left:1px solid #000;
|
||||
border-right:1px solid #000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -203,8 +203,18 @@ padding-left: 24px;
|
|||
width: 90%;
|
||||
padding-left: 10%;
|
||||
padding-top: 4px;
|
||||
background-color: crimson;
|
||||
background-color: #64BC61;
|
||||
}
|
||||
.permission.canEdit .metacodeTitle {
|
||||
cursor:pointer;
|
||||
background-image: url(MMCCicon_maximize_arrow_black.png);
|
||||
background-repeat:no-repeat;
|
||||
background-position: right center;
|
||||
}
|
||||
.permission.canEdit .metacodeTitle.minimize {
|
||||
background-image: url(MMCCicon_minimize_arrow_black.png);
|
||||
}
|
||||
|
||||
.CardOnGraph .metacodeImage {
|
||||
cursor:move;
|
||||
width:50px;
|
||||
|
|
@ -217,6 +227,47 @@ padding-left: 24px;
|
|||
background-repeat:no-repeat;
|
||||
}
|
||||
|
||||
#metacodeOptions {
|
||||
display:none;
|
||||
}
|
||||
.CardOnGraph .metacodeSelect {
|
||||
display:none;
|
||||
width:100%;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
background: #EAEAEA;
|
||||
height: 150px;
|
||||
}
|
||||
.CardOnGraph .metacodeSelect ul {
|
||||
font-style: italic;
|
||||
font-family: 'vinyl';
|
||||
text-transform: uppercase;
|
||||
position: absolute;
|
||||
line-height: 36px;
|
||||
font-size: 20px;
|
||||
display:block;
|
||||
width: 100%;
|
||||
margin:0;
|
||||
padding: 0;
|
||||
list-style:none;
|
||||
height:150px;
|
||||
overflow:hidden;
|
||||
}
|
||||
.CardOnGraph .metacodeSelect ul li {
|
||||
background-color: #EAEAEA;
|
||||
width:100%;
|
||||
border-bottom:1px solid #AAAAAA;
|
||||
cursor:pointer;
|
||||
}
|
||||
.CardOnGraph .metacodeSelect ul li:hover {
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
.CardOnGraph .metacodeSelect ul li img, .CardOnGraph .metacodeSelect ul li .mSelectName {
|
||||
float:left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.CardOnGraph .link {
|
||||
position:absolute;
|
||||
|
|
|
|||
|
|
@ -2,95 +2,3 @@
|
|||
// They will automatically be included in application.css.
|
||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
||||
|
||||
.nodeOptions {
|
||||
display:none;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -17px;
|
||||
}
|
||||
|
||||
.onCanvas .removeFromMap {
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
.unauthenticated .deleteTopic {
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
.removeFromCanvas {
|
||||
display: block;
|
||||
width: 17px;
|
||||
height: 16px;
|
||||
background: url('removeFromCanvas.png') no-repeat 2px 0;
|
||||
}
|
||||
|
||||
.removeFromMap {
|
||||
display: block;
|
||||
width: 17px;
|
||||
height: 16px;
|
||||
background: url('removeFromMap.png') no-repeat 2px 0;
|
||||
}
|
||||
|
||||
.centerOn {
|
||||
display: block;
|
||||
width: 17px;
|
||||
height: 23px;
|
||||
background: url("centerOn.png") no-repeat 2px 3px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.deleteTopic {
|
||||
display: block;
|
||||
width: 17px;
|
||||
height: 16px;
|
||||
background: url('delete.png') no-repeat 2px 0;
|
||||
}
|
||||
|
||||
.topic {
|
||||
float:left;
|
||||
margin:30px 0 30px 50px;
|
||||
}
|
||||
|
||||
.topic .delete {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
left: 0px;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.topic .scroll {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.topic .type {position: absolute;
|
||||
color: white;
|
||||
top: -22px;
|
||||
right: 0;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
line-height: 24px;}
|
||||
|
||||
.topic .icon { position:absolute; top:135px; left:-25px; }
|
||||
|
||||
.topic .title { font-size:22px; line-height:27px; display:block; border-bottom:2px solid #000; padding-bottom:5px; }
|
||||
|
||||
.topic .desc { font-size:15px; font-family:Arial, Helvetica, sans-serif; }
|
||||
.topic .desc h3 { font-style:normal; margin-top:5px; }
|
||||
|
||||
.topic-go-arrow {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
padding-bottom: 2px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.gray {
|
||||
color: #999999;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -143,7 +143,9 @@ class TopicsController < ApplicationController
|
|||
end
|
||||
end
|
||||
|
||||
respond_with @topic
|
||||
respond_to do |format|
|
||||
format.js { render :json => @topic.self_as_json }
|
||||
end
|
||||
end
|
||||
|
||||
# GET mappings/:map_id/:topic_id/removefrommap
|
||||
|
|
|
|||
16
app/views/main/_metacodeoptions.html.erb
Normal file
16
app/views/main/_metacodeoptions.html.erb
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<%#
|
||||
# @file
|
||||
# this code generates the list of icons that will drop down in the metacode select list on the topic card
|
||||
#%>
|
||||
|
||||
<div id="metacodeOptions">
|
||||
<ul>
|
||||
<% Metacode.order("name").all.each do |m| %>
|
||||
<li>
|
||||
<img width="30" height="30" src="/assets/<%= m.icon %>" alt="<%= m.name %>" />
|
||||
<span class="mSelectName"><%= m.name %></span>
|
||||
<div class="clearfloat"></div>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -53,6 +53,7 @@
|
|||
<% if authenticated? %>
|
||||
<%= render :partial => 'newtopic' %>
|
||||
<%= render :partial => 'newsynapse' %>
|
||||
<%= render :partial => 'main/metacodeoptions' %>
|
||||
|
||||
<% # for saving layouts %>
|
||||
<% if @map.permission == "commons" || @map.user == user %>
|
||||
|
|
|
|||
|
|
@ -46,6 +46,12 @@
|
|||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
|
||||
<% if authenticated? %>
|
||||
<%= render :partial => 'topics/new' %>
|
||||
<%= render :partial => 'synapses/new' %>
|
||||
<%= render :partial => 'main/metacodeoptions' %>
|
||||
<% end %>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
function bindWandHover() {
|
||||
|
|
@ -173,9 +179,3 @@
|
|||
initialize("centered");
|
||||
});
|
||||
</script>
|
||||
|
||||
<% if authenticated? %>
|
||||
<%= render :partial => 'topics/new' %>
|
||||
<%= render :partial => 'synapses/new' %>
|
||||
<% end %>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue