glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

right click styling

Browse source
This commit is contained in:
Connor Turland 2014-09-22 23:42:26 -04:00
parent ff6eef7807
commit aaf2e4c521
5 changed files with 191 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
app/assets/javascripts/src/Metamaps.JIT.js
View file

@ -1140,23 +1140,23 @@ Metamaps.JIT = {
// add the proper options to the menu // add the proper options to the menu
var menustring = '<ul>'; var menustring = '<ul>';
if (Metamaps.Active.Mapper) menustring += '<li class="rc-delete">Delete</li>'; if (Metamaps.Active.Mapper) menustring += '<li class="rc-delete"><div class="rc-icon"></div>Delete</li>';
if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-remove">Remove from map</li>'; if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-remove"><div class="rc-icon"></div>Remove from map</li>';
menustring += '<li class="rc-hide">Hide until refresh</li>'; menustring += '<li class="rc-hide"><div class="rc-icon"></div>Hide until refresh</li>';
if (!Metamaps.Active.Map) menustring += '<li class="rc-center">Center this topic</li>'; if (!Metamaps.Active.Map) menustring += '<li class="rc-center"><div class="rc-icon"></div>Center this topic</li>';
menustring += '<li class="rc-popout">Open in new tab</li>'; menustring += '<li class="rc-popout"><div class="rc-icon"></div>Open in new tab</li>';
if (Metamaps.Active.Mapper) { if (Metamaps.Active.Mapper) {
var options = '<ul><li class="changeP toCommons">commons</li> \ var options = '<ul><li class="changeP toCommons"><div class="rc-perm-icon"></div>commons</li> \
<li class="changeP toPublic">public</li> \ <li class="changeP toPublic"><div class="rc-perm-icon"></div>public</li> \
<li class="changeP toPrivate">private</li> \ <li class="changeP toPrivate"><div class="rc-perm-icon"></div>private</li> \
</ul>'; </ul>';
menustring += '<li class="rc-permission">Change permissions' + options + '</li>'; menustring += '<li class="rc-permission"><div class="rc-icon"></div>Change permissions' + options + '<div class="expandLi"></div></li>';
var metacodeOptions = $('#metacodeOptions').html(); var metacodeOptions = $('#metacodeOptions').html();
menustring += '<li class="rc-metacode">Change metacode' + metacodeOptions + '</li>'; menustring += '<li class="rc-metacode"><div class="rc-icon"></div>Change metacode' + metacodeOptions + '<div class="expandLi"></div></li>';
} }
menustring += '</ul>'; menustring += '</ul>';
@ -1288,18 +1288,19 @@ Metamaps.JIT = {
// add the proper options to the menu // add the proper options to the menu
var menustring = '<ul>'; var menustring = '<ul>';
if (Metamaps.Active.Mapper) menustring += '<li class="rc-delete">Delete</li>'; if (Metamaps.Active.Mapper) menustring += '<li class="rc-delete"><div class="rc-icon"></div>Delete</li>';
if (Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)) { if (Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)) {
menustring += '<li class="rc-remove">Remove from map</li>'; menustring += '<li class="rc-remove"><div class="rc-icon"></div>Remove from map</li>';
} }
menustring += '<li class="rc-hide">Hide until refresh</li>'; menustring += '<li class="rc-hide"><div class="rc-icon"></div>Hide until refresh</li>';
if (Metamaps.Active.Mapper) { if (Metamaps.Active.Mapper) {
var permOptions = '<ul><li class="changeP toCommons">commons</li> \ var permOptions = '<ul><li class="changeP toCommons"><div class="rc-perm-icon"></div>commons</li> \
<li class="changeP toPublic">public</li> \ <li class="changeP toPublic"><div class="rc-perm-icon"></div>public</li> \
<li class="changeP toPrivate">private</li> \ <li class="changeP toPrivate"><div class="rc-perm-icon"></div>private</li> \
</ul>'; </ul>';
menustring += '<li class="rc-permission">Change permissions' + permOptions + '</li>'; menustring += '<li class="rc-permission"><div class="rc-icon"></div>Change permissions' + permOptions + '<div class="expandLi"></div></li>';
} }
menustring += '</ul>'; menustring += '</ul>';

19
app/assets/javascripts/src/Metamaps.js
View file

@ -492,10 +492,7 @@ Metamaps.Create = {
}, },
newTopic: { newTopic: {
init: function () { init: function () {
$('#new_topic').bind('contextmenu', function (e) {
return false;
});
$('#topic_name').keyup(function () { $('#topic_name').keyup(function () {
Metamaps.Create.newTopic.name = $(this).val(); Metamaps.Create.newTopic.name = $(this).val();
}); });
@ -554,11 +551,6 @@ Metamaps.Create = {
init: function () { init: function () {
var self = Metamaps.Create.newSynapse; var self = Metamaps.Create.newSynapse;
// keep the right click menu from opening
$('#new_synapse').bind('contextmenu', function (e) {
return false;
});
$('#synapse_desc').keyup(function () { $('#synapse_desc').keyup(function () {
Metamaps.Create.newSynapse.description = $(this).val(); Metamaps.Create.newSynapse.description = $(this).val();
}); });
@ -567,7 +559,7 @@ Metamaps.Create = {
$('#synapse_desc').typeahead([ $('#synapse_desc').typeahead([
{ {
name: 'synapse_autocomplete', name: 'synapse_autocomplete',
template: "<div>{{label}}</div>", template: "<div class='genericSynapseDesc'>{{label}}</div>",
remote: { remote: {
url: '/search/synapses?term=%QUERY' url: '/search/synapses?term=%QUERY'
}, },
@ -2900,7 +2892,7 @@ Metamaps.Topic = {
}); });
Metamaps.Mappings.add(mapping); Metamaps.Mappings.add(mapping);
self.renderTopic(mapping, topic, false); self.renderTopic(mapping, topic, true);
} }
}; // end Metamaps.Topic }; // end Metamaps.Topic
@ -3025,8 +3017,6 @@ Metamaps.Synapse = {
node1, node1,
node2; node2;
Metamaps.Create.newSynapse.hide();
var synapse = self.get(id); var synapse = self.get(id);
var mapping = new Metamaps.Backbone.Mapping({ var mapping = new Metamaps.Backbone.Mapping({
@ -3037,8 +3027,9 @@ Metamaps.Synapse = {
node1 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic1id); node1 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic1id);
node2 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic2id); node2 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic2id);
Metamaps.Create.newSynapse.hide();
self.renderSynapse(mapping, synapse, node1, node2, false); self.renderSynapse(mapping, synapse, node1, node2, true);
} }
}; // end Metamaps.Synapse }; // end Metamaps.Synapse

270
app/assets/stylesheets/application.css
View file

@ -318,6 +318,9 @@ input[type="submit"]:active {
color: #424242; color: #424242;
font-family: 'din-medium', helvetica, sans-serif; font-family: 'din-medium', helvetica, sans-serif;
} }
.new_synapse .tt-hint {
color: #BDBDBD;
}
label, label,
select, select,
input, input,
@ -819,57 +822,67 @@ h3.realtimeBoxTitle {
.rightclickmenu { .rightclickmenu {
position: absolute; position: absolute;
background: white; width: 300px;
background: #FFFFFF;
z-index: 20; z-index: 20;
border-radius: 2px; border-radius: 2px;
color: black; color: black;
box-shadow: 0px 3px 3px rgba(0,0,0,0.12), 0 3px 3px rgba(0,0,0,0.24);
} }
.rightclickmenu ul { .rightclickmenu > ul {
padding: 2px;
} }
.rightclickmenu ul li { .rightclickmenu li {
list-style: none; list-style: none;
padding: 3px 10px 3px 30px; padding: 6px 10px 6px 32px;
font-family: arial, sans-serif; font-family: helvetica, sans-serif;
font-size: 17px; font-size: 12px;
line-height: 17px; line-height: 12px;
background-repeat: no-repeat; position: relative;
background-size: 20px 20px;
background-position: 5px 2px;
} }
.rightclickmenu ul li:nth-child(odd) { .rightclickmenu li:hover {
background-color: #FFF; background-color: #E0E0E0;
}
.rightclickmenu ul li:nth-child(even) {
background-color: #EEE;
}
.rightclickmenu ul li:hover {
background-color: #BBB;
background-position: 7px 2px;
cursor: pointer; cursor: pointer;
} }
.rightclickmenu .rc-delete { .rightclickmenu > ul > li .rc-icon {
background-image: url(MMCCicon_delete_black.png); position: absolute;
top: 0;
left: 4px;
background-image: url(context_sprite.png);
background-repeat: no-repeat;
width: 24px;
height: 24px;
} }
.rightclickmenu .rc-remove { .rightclickmenu .rc-delete .rc-icon {
background-image: url(MMCCicon_remove_from_map_black.png); background-position: 0 -48px;
} }
.rightclickmenu .rc-hide { .rightclickmenu .rc-remove .rc-icon {
background-image: url(MMCCicon_hide.png); background-position: 0 -24px;
} }
.rightclickmenu .rc-center { .rightclickmenu .rc-hide .rc-icon {
background-image: url(MMCCicon_center.png); background-position: 0 0;
} }
.rightclickmenu .rc-popout { .rightclickmenu .rc-center .rc-icon {
background-image: url(MMCCicon_pop-out_black.png);
} }
.rightclickmenu .rc-permission { .rightclickmenu .rc-popout .rc-icon {
background-image: url(MMCCicon_edit_permission_black.png); background-position: 0 -72px;
position: relative;
} }
.rightclickmenu .rc-metacode { .rightclickmenu .rc-permission .rc-icon {
background-image: url(blank.png); background-position: 0 -96px;
position: relative; }
.rightclickmenu .rc-metacode .rc-icon {
background-position: 0 -120px;
}
.rightclickmenu .expandLi {
position: absolute;
top: 4px;
right: 8px;
width: 16px;
height: 16px;
background-image: url(arrowright_sprite.png);
background-repeat: no-repeat;
background-position: 0 -32px;
} }
.rc-metacode li img { .rc-metacode li img {
float: left; float: left;
@ -883,22 +896,81 @@ float: left;
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
border-top-right-radius: 2px; border-top-right-radius: 2px;
box-shadow: 0px 3px 3px rgba(0,0,0,0.12), 0 3px 3px rgba(0,0,0,0.24);
} }
.rightclickmenu .rc-permission:hover ul, .rightclickmenu .rc-metacode:hover ul { .rightclickmenu .rc-permission:hover > ul, .rightclickmenu .rc-metacode:hover > ul {
display: block; display: block;
} }
.rightclickmenu p { .rightclickmenu p {
padding: 7px; padding: 7px;
} }
.rightclickmenu li.changeP {
}
.rightclickmenu li.changeP .rc-perm-icon {
position: absolute;
top: 0;
left: 4px;
background-image: url(permissions32_sprite.png);
background-size: 72px 48px;
background-repeat: no-repeat;
width: 24px;
height: 24px;
}
.rightclickmenu li.toCommons .rc-perm-icon {
background-position: 0 0;
}
.rightclickmenu li.toPublic .rc-perm-icon {
background-position: -48px 0;
}
.rightclickmenu li.toPrivate .rc-perm-icon {
background-position: -24px 0;
}
.rightclickmenu .rc-metacode > ul > li {
padding: 6px 10px 6px 8px;
width: 100px;
}
.rightclickmenu .rc-metacode ul ul {
display: none;
max-height: 270px;
overflow-y: auto;
overflow-x: hidden;
}
.rightclickmenu .rc-metacode li:hover ul {
display: block;
}
.rightclickmenu .rc-metacode ul ul li {
padding: 4px 10px 4px 8px;
width: 120px;
}
.rightclickmenu .expandMetacodeSet {
position: absolute;
top: 4px;
right: 4px;
width: 16px;
height: 16px;
background-image: url(arrowright_sprite.png);
background-repeat: no-repeat;
background-position: 0 -32px;
}
.rightclickmenu .rc-metacode .mSelectName {
padding: 6px 0 0 32px;
display: block;
}
/* end right click menu */ /* end right click menu */
/* topic autocomplete */ /* topic and synapse autocomplete */
#new_topic .tt-suggestion.tt-is-under-cursor, #new_topic .tt-suggestion.tt-is-under-cursor,
#new_topic .tt-suggestion.tt-is-under-mouse-cursor { #new_topic .tt-suggestion.tt-is-under-mouse-cursor,
#new_synapse .tt-suggestion.tt-is-under-cursor,
#new_synapse .tt-suggestion.tt-is-under-mouse-cursor {
background: #E0E0E0; background: #E0E0E0;
} }
#new_topic .tt-suggestion { #new_topic .tt-suggestion,
#new_synapse .tt-suggestion {
background: #F5F5F5; background: #F5F5F5;
width: 270px; width: 270px;
position: relative; position: relative;
@ -915,7 +987,15 @@ float: left;
font-size: 14px; font-size: 14px;
padding: 9px 0 9px 4px; padding: 9px 0 9px 4px;
} }
#new_topic .expandTopicMetadata { #new_synapse .synapseDesc,
#new_synapse .genericSynapseDesc {
width: 190px;
line-height: 14px;
font-size: 14px;
padding: 9px 0 9px 8px;
}
#new_topic .expandTopicMetadata,
#new_synapse .expandSynapseMetadata {
display:none; display:none;
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -927,14 +1007,19 @@ float: left;
background-position: 0 -32px; background-position: 0 -32px;
} }
#new_topic .tt-suggestion.tt-is-under-cursor .expandTopicMetadata, #new_topic .tt-suggestion.tt-is-under-cursor .expandTopicMetadata,
#new_topic .tt-suggestion.tt-is-under-mouse-cursor .expandTopicMetadata { #new_topic .tt-suggestion.tt-is-under-mouse-cursor .expandTopicMetadata,
#new_synapse .tt-suggestion.tt-is-under-cursor .expandSynapseMetadata,
#new_synapse .tt-suggestion.tt-is-under-mouse-cursor .expandSynapseMetadata {
display: block; display: block;
} }
#new_topic .tt-suggestion.tt-is-under-cursor .topicMetadata, #new_topic .tt-suggestion.tt-is-under-cursor .topicMetadata,
#new_topic .tt-suggestion.tt-is-under-mouse-cursor .topicMetadata { #new_topic .tt-suggestion.tt-is-under-mouse-cursor .topicMetadata,
#new_synapse .tt-suggestion.tt-is-under-cursor .synapseMetadata,
#new_synapse .tt-suggestion.tt-is-under-mouse-cursor .synapseMetadata {
display: block; display: block;
} }
#new_topic .topicMetadata { #new_topic .topicMetadata,
#new_synapse .synapseMetadata {
position: absolute; position: absolute;
display: none; display: none;
top: -18px; top: -18px;
@ -945,7 +1030,8 @@ float: left;
font-family: 'din-regular', helvetica, sans-serif; font-family: 'din-regular', helvetica, sans-serif;
font-size: 14px; font-size: 14px;
} }
#new_topic .topicPermission { #new_topic .topicPermission,
#new_synapse .synapsePermission {
width: 32px; width: 32px;
height: 32px; height: 32px;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -954,16 +1040,20 @@ float: left;
bottom: 4px; bottom: 4px;
right: 4px; right: 4px;
} }
#new_topic .topicPermission.commons { #new_topic .topicPermission.commons,
#new_synapse .synapsePermission.commons {
background-position: 0 0; background-position: 0 0;
} }
#new_topic .topicPermission.public { #new_topic .topicPermission.public,
#new_synapse .synapsePermission.public {
background-position: -64px 0; background-position: -64px 0;
} }
#new_topic .topicPermission.private { #new_topic .topicPermission.private,
#new_synapse .synapsePermission.private {
background-position: -32px 0; background-position: -32px 0;
} }
#new_topic .topicNumMaps { #new_topic .topicNumMaps,
#new_synapse .synapseNumMaps {
height: 14px; height: 14px;
padding: 1px 0 1px 32px; padding: 1px 0 1px 32px;
background-image: url(metamap16.png); background-image: url(metamap16.png);
@ -981,79 +1071,21 @@ float: left;
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
} }
#new_topic .topicOriginatorIcon { #new_topic .topicOriginatorIcon,
#new_synapse .synapseOriginatorIcon {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
} }
#new_topic .topicOriginatorIcon img { #new_topic .topicOriginatorIcon img,
#new_synapse .synapseOriginatorIcon img {
border-radius: 12px; border-radius: 12px;
} }
#new_topic .topicOriginatorIcon:hover .tip { #new_topic .topicOriginatorIcon:hover .tip,
display: block;
}
#new_topic .tip {
display: none;
position: absolute;
background: white;
width: auto;
top: 0;
left: 23px;
color: black;
white-space: nowrap;
border-radius: 4px;
font-size: 15px !important;
line-height: 15px;
padding: 2px 5px 2px;
z-index: 100;
}
/* synapse autocomplete */
#new_synapse .tt-dropdown-menu {
width: 212px;
background: #2A343C;
}
#new_synapse .tt-dropdown-menu h3 {
font-family: 'vinyl', helvetica, sans-serif;
text-transform: uppercase;
font-style: italic;
font-size: 14pxpx;
line-height: 16px;
margin: 3px;
}
#new_synapse .tt-suggestion.tt-is-under-cursor,
#new_synapse .tt-suggestion.tt-is-under-mouse-cursor {
background: #0E161D;
}
#new_synapse .tt-suggestion {
padding: 5px;
}
#new_synapse .autocompleteSection {
float: left;
}
#new_synapse .synapseDesc {
width: 162px;
line-height: 22px;
}
#new_synapse .synapsePermission {
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center center;
background-size: 16px 16px;
}
#new_synapse .synapseOriginatorIcon {
position: relative;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center center;
background-size: 16px 16px;
background-image: url(MMCCicon_mapper.png);
}
#new_synapse .synapseOriginatorIcon:hover .tip { #new_synapse .synapseOriginatorIcon:hover .tip {
display: block; display: block;
} }
#new_topic .tip,
#new_synapse .tip { #new_synapse .tip {
display: none; display: none;
position: absolute; position: absolute;
@ -1069,6 +1101,18 @@ float: left;
padding: 2px 5px 2px; padding: 2px 5px 2px;
z-index: 100; z-index: 100;
} }
#new_synapse .tt-dropdown-menu {
background: #F5F5F5;
}
#new_synapse .tt-dropdown-menu h3 {
font-family: 'vinyl', helvetica, sans-serif;
text-transform: uppercase;
font-style: italic;
font-size: 14pxpx;
line-height: 16px;
margin: 3px;
}
#new_synapse .tt-suggestion .resultnoresult .synapsePermission, #new_synapse .tt-suggestion .resultnoresult .synapsePermission,
#new_synapse .tt-suggestion .resultnoresult .synapseOriginatorIcon { #new_synapse .tt-suggestion .resultnoresult .synapseOriginatorIcon {
display: none; display: none;

1
app/helpers/synapses_helper.rb
View file

@ -25,6 +25,7 @@ module SynapsesHelper
synapse['permission'] = s.permission synapse['permission'] = s.permission
synapse['mapCount'] = s.maps.count synapse['mapCount'] = s.maps.count
synapse['originator'] = s.user.name synapse['originator'] = s.user.name
synapse['originatorImage'] = s.user.image
synapse['rtype'] = "synapse" synapse['rtype'] = "synapse"
temp.push synapse temp.push synapse

15
app/views/layouts/_templates.html.erb
View file

@ -158,11 +158,16 @@
<script type="text/template" id="synapseAutocompleteTemplate"> <script type="text/template" id="synapseAutocompleteTemplate">
<div class="result{{rtype}}"> <div class="result{{rtype}}">
<p class="autocompleteSection synapseDesc">{{label}}</p> <p class="autocompleteSection synapseDesc">{{label}}</p>
<div class="autocompleteSection synapsePermission {{permission}}"></div> <div class="expandSynapseMetadata"></div>
<div class="autocompleteSection synapseOriginatorIcon hoverForTip"> <div class="synapseMetadata">
<span class="tip synapseOriginator">{{originator}}</span> <div class="synapseNumMaps">{{mapCount}}</div>
</div> <div class="synapseOriginatorIcon hoverForTip">
<div class="clearfloat"></div> <img width="24" height="24" src="{{originatorImage}}" />
<span class="tip synapseOriginator">{{originator}}</span>
</div>
<div class="synapsePermission {{permission}}"></div>
</div>
<div class="clearfloat"></div>
</div> </div>
</script> </script>