From 3479dca0d09ff90d03a339311bf3132d0644a4fb Mon Sep 17 00:00:00 2001 From: bootstraponline Date: Fri, 18 May 2012 10:28:59 -0600 Subject: [PATCH] Add comment window using Ace that allows user entered commit messages. Use darkness div to dim the background when the comment window is active. Set CSS in batch to avoid unnecessary reflows. Use debouncing to efficiently resize the window. Eliminate previewSetter in favor of redefining the previewSet function. --- .../public/gollum/livepreview/css/custom.css | 35 ++- .../gollum/livepreview/images/cancel_24.png | Bin 0 -> 525 bytes .../public/gollum/livepreview/index.html | 201 +++++++++++++----- 3 files changed, 183 insertions(+), 53 deletions(-) create mode 100644 lib/gollum/frontend/public/gollum/livepreview/images/cancel_24.png diff --git a/lib/gollum/frontend/public/gollum/livepreview/css/custom.css b/lib/gollum/frontend/public/gollum/livepreview/css/custom.css index c043bc25..23c412e0 100644 --- a/lib/gollum/frontend/public/gollum/livepreview/css/custom.css +++ b/lib/gollum/frontend/public/gollum/livepreview/css/custom.css @@ -2,7 +2,22 @@ body { overflow: hidden; } -#editor { +#darkness { + visibility: hidden; + position: absolute; + left: 0px; + top: 0px; + background-color: black; + opacity: 0.8; + z-index: 1001; /* must be > 1000 to overlay ace gutter */ +} + +#commenttoolpanel { + visibility: hidden; + z-index: 1002; /* > 1001 to not be hidden by darkness */ +} + +#comment, #editor { margin: 0; padding: 0; position: absolute; @@ -10,6 +25,16 @@ body { bottom: 0; left: 0; right: 0; + /* Set font size of both ace editors. */ + font-size: 16px; +} + +/* Set comment to have a higher z-index +so editor doesn't display in the background. */ + +#comment { + visibility: hidden; + z-index: 1003; /* > 1002 to not be hidden by toolpanel */ } #contentframe { @@ -30,7 +55,7 @@ body { } /* -- Start from notepag.es -- */ -#toolpanel { +.toolpanel { position: fixed; background: #666; top: 0; @@ -43,7 +68,7 @@ body { text-align: center; } -#toolpanel.edit a.edit { +.toolpanel.edit a.edit { opacity: 0.4; /* Make it appear as a link even though save doesn't have a href attribute. */ @@ -51,7 +76,7 @@ body { display: inline-block; } -#toolpanel a { +.toolpanel a { color: white; text-decoration: none; margin: 0 5px; @@ -60,7 +85,7 @@ body { font-family: sans-serif; } -#toolpanel a img { +.toolpanel a img { vertical-align: middle; margin-left: 5px; margin: 0; diff --git a/lib/gollum/frontend/public/gollum/livepreview/images/cancel_24.png b/lib/gollum/frontend/public/gollum/livepreview/images/cancel_24.png new file mode 100644 index 0000000000000000000000000000000000000000..98fd3024f6612d98db089d73e86802374197f2d6 GIT binary patch literal 525 zcmV+o0`mQdP)XD5e|oKwi~#y|pk#+5v?7M4uIa``D4Zq=P=?gjc}d==1dpaEItB+Pfy7m}NU@9-(f5y$4rAsHv>0iG(%D=gj`1>lSWE|Jju zj7P8(3t|pl$j=?Rua$_oT?mhMyIl$?xZW8_aOz-gfyccGkHjlsRs+EcMdrCz%5gJ5 zmIBQt_vT)Nq5IW+M>hT5pK$q7MzV6v^R6SAC+VuOWw14-~nJOu_3#2ecTY@a(Z@&IV3Uf zkgLlYF#q6~V`bq1tV?*(1AK!w Live Preview - + + @@ -13,27 +14,40 @@ +
- -
- Save + +
+ save Save with comment Toggle left to right
+
+ Confirm save with comment + Cancel save with comment +
+
+
+