Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Edit tab #43

Closed
wants to merge 17 commits into from

2 participants

Tom MacWright Tom Hughes
Tom MacWright

This changes the behavior of the editing tabs in three
places. Instead of the current hovering behavior, you
can click on the arrow and get the drop-down menu.
Any click outside that on the page will deactivate
the menu, following the UI paradigm of most desktop
environments. Also simplifies the javascript code
significantly.

tmcw added some commits
Tom MacWright tmcw Add GPLv2 license file and mention in README 8dbd1cf
Tom MacWright tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 397703c
Tom MacWright tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 72b0722
Tom MacWright tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 3f5ba94
Tom MacWright tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… feae8f2
Tom MacWright tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… a35053c
Tom MacWright tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 8abf910
Tom MacWright tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 19e75c2
Tom MacWright tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 3e5cafc
Tom MacWright tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 5316998
Tom MacWright tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 5554885
Tom MacWright tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 67471ef
Tom MacWright tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 0573b88
Tom MacWright tmcw This changes the behavior of the editing tabs in three
places. Instead of the current hovering behavior, you
can click on the arrow and get the drop-down menu.
Any click outside that on the page will deactivate
the menu, following the UI paradigm of most desktop
environments. Also simplifies the javascript code
significantly.
9336dd4
Tom MacWright tmcw Remove delay parameter from createMenu, that is now deprecated 50e5257
app/assets/stylesheets/common.css.scss
@@ -366,23 +366,36 @@ h2 {
/* Rules for edit menu */
+.arrow {
+ margin-left: 10px;
+ padding: 5px;
+ border-left: 1px solid #eee;
+}
Tom Hughes Owner

The margin-left and border-left bits of this will need to go in ltr.css with reversed versions in rtl.css.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Tom MacWright

Any other modifications needed here?

Tom Hughes
Owner

Merged and deployed.

Tom Hughes tomhughes closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 14, 2012
  1. Tom MacWright
Commits on Feb 17, 2012
  1. Tom MacWright
Commits on Feb 20, 2012
  1. Tom MacWright
Commits on Feb 21, 2012
  1. Tom MacWright
Commits on Feb 24, 2012
  1. Tom MacWright
Commits on Feb 26, 2012
  1. Tom MacWright
Commits on Feb 29, 2012
  1. Tom MacWright
Commits on Mar 3, 2012
  1. Tom MacWright
Commits on Mar 4, 2012
  1. Tom MacWright
Commits on Mar 6, 2012
  1. Tom MacWright
Commits on Mar 29, 2012
  1. Tom MacWright
Commits on Mar 30, 2012
  1. Tom MacWright
Commits on Apr 11, 2012
  1. Tom MacWright
  2. Tom MacWright

    This changes the behavior of the editing tabs in three

    tmcw authored
    places. Instead of the current hovering behavior, you
    can click on the arrow and get the drop-down menu.
    Any click outside that on the page will deactivate
    the menu, following the UI paradigm of most desktop
    environments. Also simplifies the javascript code
    significantly.
  3. Tom MacWright
  4. Tom MacWright

    Properly rtl edit tag redesign

    tmcw authored
Commits on Apr 12, 2012
  1. Tom MacWright

    Remove border for arrow

    tmcw authored
This page is out of date. Refresh to see the latest.
78 app/assets/javascripts/menu.js
View
@@ -20,64 +20,28 @@ function openMenu(anchor, menu, align) {
}
/*
- * Close a menu.
- */
-function closeMenu(menu) {
- clearTimeout(menu.timer);
- menu.hide();
-}
-
-/*
- * Callback called when the mouse enters a menu anchor.
- */
-function enterMenuAnchor(event, anchor, menu, delay, align) {
- if (!anchor.hasClass("disabled")) {
- clearTimeout(menu.timer);
-
- if (delay > 0) {
- menu.timer = setTimeout(function () { openMenu(anchor, menu, align); }, delay);
- } else {
- openMenu(event, menu, align);
- }
- }
-}
-
-/*
- * Callback called when the mouse leaves a menu anchor.
- */
-function leaveMenuAnchor(event, anchor, menu) {
- var to = event.relatedTarget;
-
- if (!menu.is(to) && menu.has(to).length === 0) {
- menu.hide();
- }
-
- clearTimeout(menu.timer);
-}
-
-/*
- * Callback called when the mouse leaves a menu.
- */
-function leaveMenu(event, anchor, menu) {
- var to = event.relatedTarget;
-
- if (!anchor.is(to) && menu.has(to).length === 0) {
- menu.hide();
- }
-
- clearTimeout(menu.timer);
-}
-
-/*
* Setup a menu, triggered by hovering over an anchor for a given time.
*/
-function createMenu(anchorid, menuid, delay, align) {
- var anchor = $("#" + anchorid);
- var menu = $("#" + menuid);
+function createMenu(anchorid, menuid, align) {
+ var $anchor = $("#" + anchorid),
+ $arrow = $("#" + anchorid + ' .arrow'),
+ $menu = $("#" + menuid),
+ $page = $(':not(#' + menuid + ', #' + anchorid + ')');
+
+ function hide() {
+ $menu.hide();
+ $page.unbind('click', hide);
+ }
- anchor.mouseup(function (event) { closeMenu(menu); });
- anchor.mouseover(function (event) { enterMenuAnchor(anchor, anchor, menu, delay, align); });
- anchor.mouseout(function (event) { leaveMenuAnchor(event, anchor, menu); });
- menu.mouseup(function (event) { closeMenu(menu); });
- menu.mouseout(function (event) { leaveMenu(event, anchor, menu); });
+ $arrow.click(function(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ if ($menu.is(':visible')) {
+ $menu.hide();
+ $page.unbind('click', hide);
+ } else {
+ openMenu($anchor, $menu.show(), 'left');
+ $page.bind('click', hide);
+ }
+ });
}
18 app/assets/stylesheets/common.css.scss
View
@@ -366,23 +366,31 @@ h2 {
/* Rules for edit menu */
+
+a:hover .arrow {
+ background:#eee;
+ text-decoration:none !important;
+}
+
.menu {
display: none;
z-index: 10000;
position: absolute;
background-color: #ffffff;
- border: 1px solid black;
+ border: 1px solid #cccccc;
+ border-top: 0;
}
.menu ul {
- margin-top: 10px;
- margin-bottom: 10px;
- padding-left: 10px;
- padding-right: 10px;
+ margin: 0;
+ padding: 0;
}
.menu li {
+ padding: 2px 5px;
+ margin: 0;
list-style-type: none;
+ border-top: 1px solid #eee;
white-space: nowrap;
}
7 app/assets/stylesheets/ltr.css.scss
View
@@ -29,6 +29,13 @@ html body {
margin: 2px 8px 0px 0px;
}
+/* Rules for edit menu */
+
+.arrow {
+ margin-left: 10px;
+ padding: 5px;
+}
+
/*
* Rules for "optional boxes" which appear in the left sidebar on
* certain pages. Current users are the seach box on the main page
7 app/assets/stylesheets/rtl.css.scss
View
@@ -29,6 +29,13 @@ html body {
margin: 2px 0px 0px 8px;
}
+/* Rules for edit menu */
+
+.arrow {
+ margin-right: 10px;
+ padding: 5px;
+}
+
/*
* Rules for "optional boxes" which appear in the left sidebar on
* certain pages. Current users are the seach box on the main page
8 app/views/browse/_map.html.erb
View
@@ -11,12 +11,12 @@
<span id="loading"><%= t 'browse.map.loading' %></span>
<%= link_to(t("browse.map.larger.area"), { :controller => :site, :action => :index, :box => "yes" }, { :id => "area_larger_map", :class => "geolink bbox" }) %>
<br />
- <%= link_to(t("browse.map.edit.area"), { :controller => :site, :action => :edit }, { :id => "area_edit", :class => "geolink bbox" }) %>
+ <%= link_to(h(t("browse.map.edit.area")) + '<span class="arrow">&#x25be;</span>'.html_safe, { :controller => :site, :action => :edit }, { :id => "area_edit", :class => "geolink bbox" }) %>
<% unless map.instance_of? Changeset %>
<br />
<%= link_to("", { :controller => :site, :action => :index }, { :id => "object_larger_map", :class => "geolink object" }) %>
<br />
- <%= link_to("", { :controller => :site, :action => :edit }, { :id => "object_edit", :class => "geolink object" }) %>
+ <%= link_to(h("") + '<span class="arrow">&#x25be;</span>'.html_safe, { :controller => :site, :action => :edit }, { :id => "object_edit", :class => "geolink object" }) %>
<% end %>
<% else %>
<%= t 'browse.map.deleted' %>
@@ -151,8 +151,8 @@
});
<% end -%>
- createMenu("area_edit", "area_edit_menu", 1000, "right");
- createMenu("object_edit", "object_edit_menu", 1000, "right");
+ createMenu("area_edit", "area_edit_menu", "right");
+ createMenu("object_edit", "object_edit_menu", "right");
}
window.onload = init;
4 app/views/layouts/site.html.erb
View
@@ -39,7 +39,7 @@
traceclass += ' active' if params['controller'] == 'trace'
%>
<li><%= link_to t('layouts.view'), {:controller => 'site', :action => 'index'}, {:id => 'viewanchor', :title => t('layouts.view_tooltip'), :class => viewclass} %></li>
- <li><%= link_to h(t('layouts.edit')) + '&nbsp;&#x25be;'.html_safe, {:controller => 'site', :action => 'edit'}, {:id => 'editanchor', :title => t('javascripts.site.edit_tooltip'), :class => editclass} %></li>
+ <li><%= link_to h(t('layouts.edit')) + '<span class="arrow">&#x25be;</span>'.html_safe, {:controller => 'site', :action => 'edit'}, {:id => 'editanchor', :title => t('javascripts.site.edit_tooltip'), :class => editclass} %></li>
<li><%= link_to t('layouts.history'), {:controller => 'changeset', :action => 'list' }, {:id => 'historyanchor', :title => t('javascripts.site.history_tooltip'), :class => historyclass} %></li>
<li><%= link_to t('layouts.export'), {:controller => 'site', :action => 'export'}, {:id => 'exportanchor', :title => t('layouts.export_tooltip'), :class => exportclass} %></li>
<li><%= link_to t('layouts.gps_traces'), {:controller => 'trace', :action => 'list', :display_name => nil, :tag => nil, :page => nil}, {:id => 'traceanchor', :title => t('layouts.gps_traces_tooltip'), :class => traceclass} %></li>
@@ -58,7 +58,7 @@
</div>
<script type="text/javascript">
- createMenu("editanchor", "editmenu", 1000, "left");
+ createMenu("editanchor", "editmenu", "left");
</script>
<div id="left">
Something went wrong with that request. Please try again.