From 7f48b3a6923412a9feed2d60f9594748cc3abe9c Mon Sep 17 00:00:00 2001 From: David Huynh Date: Sun, 17 Oct 2010 05:30:03 +0000 Subject: [PATCH] Added padding to "working" popup. Use background colors to explain undo/redo better, hopefully. git-svn-id: http://google-refine.googlecode.com/svn/trunk@1584 7d457c2a-affb-35e4-300a-418c747d4874 --- .../core/scripts/widgets/history-widget.js | 38 ++++++--- .../modules/core/styles/project/sidebar.less | 81 +++++++++++-------- .../modules/core/styles/util/dialog.less | 3 +- 3 files changed, 77 insertions(+), 45 deletions(-) diff --git a/main/webapp/modules/core/scripts/widgets/history-widget.js b/main/webapp/modules/core/scripts/widgets/history-widget.js index 946f17670..bb2f572f4 100644 --- a/main/webapp/modules/core/scripts/widgets/history-widget.js +++ b/main/webapp/modules/core/scripts/widgets/history-widget.js @@ -51,21 +51,41 @@ HistoryWidget.prototype._render = function() { '

Learn more »

' + '' + '
' + - '
' + + '
' + '
done upto here
' + - '
' + + '
' + '
' ); var elmts = DOM.bind(this._div); - var renderEntry = function(container, index, entry, lastDoneID, title) { + var renderEntry = function(container, index, entry, lastDoneID, past) { var a = $('').appendTo(container); - a.addClass("history-entry").text(entry.description).attr("title", title).click(function(evt) { - return self._onClickHistoryEntry(evt, entry, lastDoneID); - }); + a.addClass("history-entry") + .text(entry.description) + .attr("title", past ? "Undo to here" : "Redo to here") + .click(function(evt) { + return self._onClickHistoryEntry(evt, entry, lastDoneID); + }) + .mouseover(function() { + if (past) { + elmts.pastHighlightDiv.show().height(elmts.pastDiv.height() - this.offsetTop); + } else { + elmts.futureHighlightDiv.show().height(this.offsetTop + this.offsetHeight); + } + }) + .mouseout(function() { + if (past) { + elmts.pastHighlightDiv.hide(); + } else { + elmts.futureHighlightDiv.hide(); + } + }); - $('').addClass("history-entry-index").text((index + 1) + ".").prependTo(a); + $('') + .addClass("history-entry-index") + .text((index + 1) + ".") + .prependTo(a); return a; }; @@ -76,7 +96,7 @@ HistoryWidget.prototype._render = function() { } else { for (var i = 0; i < this._data.past.length; i++) { var entry = this._data.past[i]; - renderEntry(elmts.pastDiv, i, entry, i === 0 ? 0 : this._data.past[i - 1].id, "Undo to here"); + renderEntry(elmts.pastDiv, i, entry, i === 0 ? 0 : this._data.past[i - 1].id, true); } } @@ -85,7 +105,7 @@ HistoryWidget.prototype._render = function() { } else { for (var i = 0; i < this._data.future.length; i++) { var entry = this._data.future[i]; - renderEntry(elmts.futureDiv, this._data.past.length + i, entry, entry.id, "Redo to here"); + renderEntry(elmts.futureDiv, this._data.past.length + i, entry, entry.id, false); } } diff --git a/main/webapp/modules/core/styles/project/sidebar.less b/main/webapp/modules/core/styles/project/sidebar.less index 43780dee7..f62b6fd4d 100644 --- a/main/webapp/modules/core/styles/project/sidebar.less +++ b/main/webapp/modules/core/styles/project/sidebar.less @@ -60,26 +60,32 @@ line-height: 1.3; } +@history_done_background: white; +@history_undone_background: #f2f2ff; /* #a9e9fb; */ +@history_now_background: @chrome_primary; +@history_entry_vpadding: 7px; +@history_entry_hpadding: 5px; +@history_entry_index_width: 30px; + .history-panel-body { - background: #fff; + background: @history_undone_background; overflow: auto; border-top: 1px solid @chrome_primary; } .history-panel-message { text-align: center; - color: #aaa; + font-style: italic; + padding: @padding_loose; } .history-past { - padding-bottom: 3px; + position: relative; + background: @history_done_background; } - -@history_now_color: #a9e9fb; - .history-now { padding: 3px 0; - background: @history_now_color; + background: @history_now_background; color: white; font-size: 80%; text-transform: uppercase; @@ -88,49 +94,54 @@ font-weight: bold; } .history-future { - padding-top: 3px; - padding-bottom: 3px; -} -a.history-entry { - display: block; position: relative; - padding: 7px 5px 7px 36px; - text-decoration: none; - color: black; - border-top: 1px dotted #ddd; } -a.history-entry:first-child { - border-top: none; + +.history-highlight { + position: absolute; + left: 0px; + width: 100%; + display: none; } -a.history-entry:hover { - background: #ddd; +.history-past .history-highlight { + background: @history_undone_background; + bottom: 0px; } +.history-future .history-highlight { + background: @history_done_background; + top: 0px; +} + .history-entry-index { position: absolute; left: 0px; top: 0px; - width: 30px; + width: @history_entry_index_width; text-align: right; font-size: 80%; - padding: 2px; - color: @history_now_color; + padding: 2px 0px; +} + +a.history-entry { + display: block; + position: relative; + padding: @history_entry_vpadding @history_entry_hpadding; + padding-left: @history_entry_hpadding + @history_entry_index_width; + text-decoration: none; + color: black; + border-top: 1px dotted #ddd; +} +.history-future a.history-entry { + color: @near_black; } .history-past a.history-entry:hover{ - padding-top: 11px; - padding-bottom: 2px; - border-top: 2px solid @history_now_color; - background: url(../../images/up-arrow.png) top center no-repeat; + padding-top: @history_entry_vpadding - 2px; + border-top: 2px solid @history_now_background; } .history-future a.history-entry:hover{ - padding-top: 2px; - padding-bottom: 11px; - border-bottom: 2px solid @history_now_color; - background: url(../../images/down-arrow.png) bottom center no-repeat; -} - -.history-future a.history-entry { - color: #888; + padding-bottom: @history_entry_vpadding - 2px; + border-bottom: 2px solid @history_now_background; } .history-panel-controls { diff --git a/main/webapp/modules/core/styles/util/dialog.less b/main/webapp/modules/core/styles/util/dialog.less index 5603a6de8..4735d4c11 100644 --- a/main/webapp/modules/core/styles/util/dialog.less +++ b/main/webapp/modules/core/styles/util/dialog.less @@ -54,7 +54,8 @@ .dialog-busy-frame { width: 300px; border: none; - -moz-border-radiust: 15px; + padding: @padding_loose; + -moz-border-radius: 15px; -webkit-border-radius: 15px; } .dialog-busy-body {