Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Edit tab #43

Closed
wants to merge 17 commits into from

2 participants

@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.

tmcw added some commits
@tmcw tmcw Add GPLv2 license file and mention in README 8dbd1cf
@tmcw tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 397703c
@tmcw tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 72b0722
@tmcw tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 3f5ba94
@tmcw tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… feae8f2
@tmcw tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… a35053c
@tmcw tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 8abf910
@tmcw tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 19e75c2
@tmcw tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 3e5cafc
@tmcw tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 5316998
@tmcw tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 5554885
@tmcw tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 67471ef
@tmcw tmcw Merge branch 'master' of https://github.com/openstreetmap/openstreetm… 0573b88
@tmcw 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
@tmcw 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;
+}
@tomhughes 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
@tmcw

Any other modifications needed here?

@tomhughes
Owner

Merged and deployed.

@tomhughes 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. @tmcw
Commits on Feb 17, 2012
  1. @tmcw
Commits on Feb 20, 2012
  1. @tmcw
Commits on Feb 21, 2012
  1. @tmcw
Commits on Feb 24, 2012
  1. @tmcw
Commits on Feb 26, 2012
  1. @tmcw
Commits on Feb 29, 2012
  1. @tmcw
Commits on Mar 3, 2012
  1. @tmcw
Commits on Mar 4, 2012
  1. @tmcw
Commits on Mar 6, 2012
  1. @tmcw
Commits on Mar 29, 2012
  1. @tmcw
Commits on Mar 30, 2012
  1. @tmcw
Commits on Apr 11, 2012
  1. @tmcw
  2. @tmcw

    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. @tmcw
  4. @tmcw

    Properly rtl edit tag redesign

    tmcw authored
Commits on Apr 12, 2012
  1. @tmcw

    Remove border for arrow

    tmcw authored
This page is out of date. Refresh to see the latest.
View
78 app/assets/javascripts/menu.js
@@ -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);
+ }
+ });
}
View
18 app/assets/stylesheets/common.css.scss
@@ -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;
}
View
7 app/assets/stylesheets/ltr.css.scss
@@ -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
View
7 app/assets/stylesheets/rtl.css.scss
@@ -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
View
8 app/views/browse/_map.html.erb
@@ -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;
View
4 app/views/layouts/site.html.erb
@@ -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.