Item12481: using "::contents" logic in templates

also: - improved password generator in user registration and change passwd - hide password tools when passwords can't be changed anyway - css improvements for textboxlist, tables, disabled form elements, legend - css improvements in login screen, i.e. to make it responsive - using livequery init'ing the skin wherever there was an each before - use perl instead of javascript to fix the revinfo position on the screen Most of these changes are a consequence of the different mode of operation running Foswiki as a single-page-app using Angular.JS
foswiki · Nov 3, 2014 · ab72a66 · ab72a66
1 parent f523d93
commit ab72a66
Show file tree

Hide file tree

Showing 37 changed files with 342 additions and 186 deletions.
diff --git a/.gitignore b/.gitignore
@@ -20,6 +20,7 @@ pub/System/NatSkin/history.js
 pub/System/JazzyNoteTheme/JazzyNoteStyle.css
 pub/System/CustomatoTheme/customato.js
 pub/System/NatSkin/login.js
+pub/System/NatSkin/angular.js
 NatSkin.md5
 NatSkin.sha1
 NatSkin.tgz

diff --git a/data/System/MySideBar.txt b/data/System/MySideBar.txt
@@ -81,7 +81,7 @@
 %ADDTOZONE{
   "script"
   id="sidebarform"
-  text="<script>
+  text="<script type='text/javascript'>
     (function($) {
       $(function() {
         $('#sidebarform').validate();

diff --git a/data/System/NatSkinChangeEmailAddressViewTemplate.txt b/data/System/NatSkinChangeEmailAddressViewTemplate.txt
@@ -158,8 +158,9 @@
 %JQREQUIRE{"validate"}%<!-- -->
 %ADDTOZONE{"script" 
   requires="JQUERYPLUGIN::VALIDATE"
+  id="NATSKIN::VALIDATE::CHANGEEMAIL"
   text="<literal>
-<script>
+<script type='text/javascript'>
 jQuery(function($) { 
   $('form[name=changeEmailAddressForm]').validate();
 });

diff --git a/data/System/NatSkinChangePasswordViewTemplate.txt b/data/System/NatSkinChangePasswordViewTemplate.txt
@@ -10,7 +10,7 @@
 %{</verbatim>}%
 
 %{<verbatim class="tml">}%
-%TMPL:DEF{"DIScontentheader_container"}%%TMPL:END%
+%TMPL:DEF{"DIScontentheader"}%%TMPL:END%
 %TMPL:DEF{"topicactions"}%%TMPL:END%
 %TMPL:DEF{"revinfo"}%%TMPL:END%
 %TMPL:DEF{"newtopictitle"}%%URLPARAM{"newtopictitle"}%%TMPL:END%
@@ -26,9 +26,9 @@
 %{</verbatim>}%
 
 %{<verbatim class="tml">}%
-%TMPL:DEF{"nochangepassword"}%<!-- -->
-<strong>%MAKETEXT{"Sorry, the password system is currently read only, please contact [_1]" args="%WIKIWEBMASTER%"}%</strong>
-<!-- -->%TMPL:END%
+%TMPL:DEF{"nochangepassword"}%<div class="foswikiErrorMessage">
+%MAKETEXT{"Sorry, passwords can't be changed."}%
+</div>%TMPL:END%
 %{</verbatim>}%
 
 %{<verbatim class="tml">}%
@@ -126,7 +126,7 @@
 <div class="foswikiFormStep">
   <h3 >%MAKETEXT{"New password"}%:</h3>
   <input type="password" name="password" id="password" size="40" class="foswikiInputField" /> 
-  <a href="#" class="jqGeneratePassword" data-length="15" data-specials="true" data-target="#password">%JQICON{"key"}% %MAKETEXT{"Random password"}%</a>
+  <a href="#" class="jqGeneratePassword" %TMPL:P{"password::params"}% data-target="#password">%JQICON{"key"}% %MAKETEXT{"Random password"}%</a>
   <div class="foswikiFormDescription">
     %MAKETEXT{"Enter a new password. Please don't use a trivial password that could easily be guessed."}%
   </div>
@@ -138,19 +138,25 @@
 <!-- -->%TMPL:END%
 %{</verbatim>}%
 
+%{<verbatim class="tml">}%
+%TMPL:DEF{"password::params"}%data-length="15" data-capitals="true" data-numbers="true" data-duplicates="true"%TMPL:END%
+%{</verbatim>}%
+
+
 %{<verbatim>}%
 %TMPL:DEF{"formvalidation"}%<!-- -->
 %JQREQUIRE{"validate"}%<!-- -->
 %ADDTOZONE{"script"
   requires="JQUERYPLUGIN"
   id="NATSKIN:PASSWORD"
-  text="<script src='%PUBURLPATH%/%SYSTEMWEB%/NatSkin/password.js'></script>"
+  text="<script type='text/javascript' src='%PUBURLPATH%/%SYSTEMWEB%/NatSkin/password.js'></script>"
 }%<!-- -->
 <style>.jqGeneratePassword { text-decoration:none; padding-left:1em; }</style>
 %ADDTOZONE{"script" 
   requires="JQUERYPLUGIN::VALIDATE"
+  id="NATSKIN::VALIDATE::CHANGEPASSWORD"
   text="<literal>
-<script>
+<script type='text/javascript'>
 jQuery(function($) {
   var $form = $('#changePasswordForm')
     .bind('invalid-form.validate', function(e, validator) {

diff --git a/data/System/NatSkinResetPasswordViewTemplate.txt b/data/System/NatSkinResetPasswordViewTemplate.txt
@@ -22,7 +22,9 @@
 %{</verbatim>}%
 
 %{<verbatim class="tml">}%
-%TMPL:DEF{"noresetpassword"}%%CHANGEPASSWORDDISABLEDMESSAGE%%TMPL:END%
+%TMPL:DEF{"noresetpassword"}%<div class="foswikiErrorMessage">
+%CHANGEPASSWORDDISABLEDMESSAGE%
+</div>%TMPL:END%
 %{</verbatim>}%
 
 %{<verbatim class="tml">}%
@@ -113,8 +115,9 @@
 %JQREQUIRE{"validate"}%
 %ADDTOZONE{"script" 
   requires="JQUERYPLUGIN::VALIDATE"
+  id="NATSKIN::VALIDATE::RESETPASSWD"
   text="<literal>
-<script>
+<script type='text/javascript'>
 jQuery(function($) { 
   $('form[name=resetPasswordForm]').validate();
 });

diff --git a/data/System/NatSkinStyleBrowser.txt b/data/System/NatSkinStyleBrowser.txt
@@ -63,7 +63,7 @@ in. If you select different style options they have precedence over those.
 <!-- -->%STOPINCLUDE%
 <verbatim style="display:none">
 %STARTSECTION{"javascript"}%<literal>
-<style>
+<style class='$id'>
 .natSkinStyleBrowser ul {
   list-style:none;
   margin:1em 0;

diff --git a/data/System/NatSkinWebTopicListViewTemplate.txt b/data/System/NatSkinWebTopicListViewTemplate.txt
@@ -14,14 +14,18 @@
 <noautolink>
 %MAKEINDEX{
   "%TOPICLIST{
-    "($percntGETTOPICTITLE{\"$name\" encode=\"encode\"}$percnt);$name"
+    "($percntSUBST{
+        text=\"$percntGETTOPICTITLE{\"$name\" encode=\"entity\"}$percnt\" 
+        pattern=\"(&#\d+;)|[$]\" 
+        format=\"\"
+      }$percnt);$percntGETTOPICTITLE{\"$name\" encode=\"entity\"}$percnt;$name"
     separator="$n"
   }%"
-  pattern="\((.*)\);(.*)"
+  pattern="\((.*)\);(.*);(.*)"
   split="\n"
   cols="%IF{"defined WEBTOPICLIST_COLS" then="%WEBTOPICLIST_COLS%" else="3"}%"
   header="$anchors"
-  format="[[%BASEWEB%.$2][$1]]"
+  format="[[%BASEWEB%.$3][$2]]"
   sort="nocase"
   footer="$n$n$percntMAKETEXT{\"[_1] topics found\" args=\"<span class='foswikiAlert'>$count</span>\"}$percnt"
 }%

diff --git a/data/System/NatSkinWikiGroupsViewTemplate.txt b/data/System/NatSkinWikiGroupsViewTemplate.txt
@@ -8,10 +8,10 @@
 %{</verbatim>}%
 
 %{<verbatim class="tml">}%
-%TMPL:DEF{"title"}%%HTMLTITLE{
+%TMPL:DEF{"title"}%<noautolink>%HTMLTITLE{
   separator=" %TMPL:P{"titlesep"}% "
   format="%URLPARAM{"group" default="%TOPIC%"}%$sep$webtitle$wikitoolname"
-}%%TMPL:END%
+}%</noautolink>%TMPL:END%
 %{</verbatim>}%
 
 %{<verbatim class="tml">}%
@@ -147,7 +147,7 @@ jQuery(function($) {
 %ADDTOZONE{"script"
   id="WIKIGROUPS::JAVASCRIPT"
   requires="JQUERYPLUGIN::FORM, JQUERYPLUGIN::BLOCKUI"
-  text="<script>
+  text="<script class='$id'>
 jQuery(function($) {
   $('.editGroupForm').each(function() {
     var $this = $(this);

diff --git a/data/System/SiteMenu.txt b/data/System/SiteMenu.txt
@@ -44,8 +44,8 @@ Definition of site wide horizontal menu
     <li>[[%SYSTEMWEB%.ReferenceManual][%JQICON{"book_open"}% %MAKETEXT{"Reference manual"}%]]</li>
     <li>[[%SYSTEMWEB%.InstalledPlugins][%JQICON{"plugin"}% %MAKETEXT{"Installed plugins"}%]]</li>
     <li><hr /></li>
-    <li>[[Sandbox.%HOMETOPIC%][%JQICON{"briefcase"}% %MAKETEXT{"Sandbox"}%]]</li>
-    <li>[[%SYSTEMWEB%.ResetPassword][%JQICON{"key"}% %MAKETEXT{"Password forgotten"}%]]</li>
+    <li>[[Sandbox.%HOMETOPIC%][%JQICON{"briefcase"}% %MAKETEXT{"Sandbox"}%]]</li>%IF{"context passwords_modifyable" then="
+    <li>[[%SYSTEMWEB%.ResetPassword][%JQICON{"key"}% %MAKETEXT{"Password forgotten"}%]]</li>"}%
     <li><hr /></li>
     <li>[[http://foswiki.org/Support][%JQICON{"user_comment"}% %MAKETEXT{"Online support forum"}%]]</li>
     <li>[[http://foswiki.org/Support/FAQ][%JQICON{"help"}% %MAKETEXT{"Foswiki FAQ"}%]]</li>

diff --git a/data/System/UserRegistrationViewTemplate.txt b/data/System/UserRegistrationViewTemplate.txt
@@ -59,7 +59,8 @@
 %TMPL:DEF{"formstart"}%<!-- -->
 <literal>
 <style>
-.jqGeneratePassword {
+.jqGeneratePassword,
+.jqGeneratePassword:hover {
   text-decoration:none;
   padding-left:1em;
 }
@@ -152,7 +153,7 @@
 <div class="foswikiFormStep">
   <h3>%MAKETEXT{"Choose a password"}%: <span class="foswikiAlert">**</span></h3>
   <input type="password" id="Fwk1Password" name="Fwk1Password" class="foswikiInputField" size="40" autocomplete="off" />
-  <a href="#" class="jqGeneratePassword" data-length="15" data-capital="true" data-numbers="true" data-target="#Fwk1Password">%JQICON{"key"}% %MAKETEXT{"Random password"}%</a>
+  <a class="jqGeneratePassword" %TMPL:P{"password::params"}% data-target="#Fwk1Password">%JQICON{"key"}% %MAKETEXT{"Random password"}%</a>
   <div class="foswikiFormDescription">
     %MAKETEXT{"Make sure you remember your password, even more when generating one automatically."}%
   </div>
@@ -164,6 +165,10 @@
 <!-- -->%TMPL:END%
 %{</verbatim>}%
 
+%{<verbatim class="tml">}%
+%TMPL:DEF{"password::params"}%data-length="15" data-capitals="true" data-numbers="true" data-duplicates="true"%TMPL:END%
+%{</verbatim>}%
+
 %{<verbatim class="tml">}%
 %TMPL:DEF{"firstname"}%<!-- -->
 <div class="foswikiFormStep">
@@ -272,8 +277,8 @@
   format="<p>
     <label><input type='%IF{"'%REGISTRATIONGROUPTYPE%' = 'one'" then="radio" else="checkbox"}%' name='Fwk0AddToGroups' class='foswikiInputField' value='$1'> <nop>$1</label>
     $percntADDTOZONE{\"head\" 
-      tag=\"showCollaborationDetails\" 
-      text=\"<style>#groupDetails {display:block}</style>\"
+      id=\"showCollaborationDetails\" 
+      text=\"<style class='$id'>#groupDetails {display:block}</style>\"
     }$percnt</p>"
   separator="$n"
   sort="on"
@@ -290,13 +295,14 @@
 %JQREQUIRE{"validate, wikiword"}%
 %ADDTOZONE{"script"
   requires="JQUERYPLUGIN"
-  id="NATSKIN:PASSWORD"
-  text="<script src='%PUBURLPATH%/%SYSTEMWEB%/NatSkin/password.js'></script>"
+  id="NATSKIN::PASSWORD"
+  text="<script type='text/javascript' src='%PUBURLPATH%/%SYSTEMWEB%/NatSkin/password.js'></script>"
 }%<!-- -->
 %ADDTOZONE{"script" 
   requires="JQUERYPLUGIN::VALIDATE, JQUERYPLUGIN::WIKIWORD"
+  id="NATSKIN::VALIDATE::USERREGISTATION"
   text="<literal>
-<script>
+<script type='text/javascript'>
 jQuery(function($) {
   $('#Fwk1WikiName').wikiword('#Fwk1FirstName, #Fwk1LastName');
   var $form = $('#registrationForm')

diff --git a/lib/Foswiki/Contrib/NatSkin/MANIFEST b/lib/Foswiki/Contrib/NatSkin/MANIFEST
@@ -79,6 +79,9 @@ pub/System/JazzyNoteTheme/RedVariation.css 0644
 pub/System/JazzyNoteTheme/RedVariation.css.gz 0644
 pub/System/JazzyNoteTheme/RedVariation.uncompressed.css 0644
 pub/System/JazzyNoteTheme/search_button.png 0644
+pub/System/NatSkin/angular.js 0644
+pub/System/NatSkin/angular.js.gz 0644
+pub/System/NatSkin/angular.uncompressed.js 0644
 pub/System/NatSkin/BaseStyle.css 0644
 pub/System/NatSkin/BaseStyle.css.gz 0644
 pub/System/NatSkin/BaseStyle.uncompressed.css 0644

diff --git a/pub/System/CustomatoTheme/customato-base.uncompressed.css b/pub/System/CustomatoTheme/customato-base.uncompressed.css
@@ -58,8 +58,8 @@ h2,
   font-size:1.5em; /* 21px */
   line-height:1em; /* 21px */
   margin:1em 0;
-  font-weight:normal;
   border-bottom:1px solid #D5D6DD;
+  font-weight:normal;
 }
 .foswikiGrid h2 {
   border-bottom:0;
@@ -94,6 +94,8 @@ h6,
 .foswikiNormal h6 {
   font-size: 1em; /* 14px */
   line-height: 1.5em; /* 21px */
+  margin-top: 1.5em;
+  margin-bottom: 0;
   font-weight:normal;
 }
 blockquote {
@@ -267,12 +269,8 @@ a.jqButton:link {
 }
 
 /* form elements */
-.jqTextboxListValue {
-  background-color:#ebebeb;
-  border:1px solid #cfcfcf;
-}
-
 .select2-container .select2-choice:hover,
+.select2-container-multi .select2-choices,
 .select2-container .select2-choice {
   border-color:#ccc;
 }

diff --git a/pub/System/CustomatoTheme/customato-colors.uncompressed.css b/pub/System/CustomatoTheme/customato-colors.uncompressed.css
@@ -257,8 +257,12 @@ pre {
 
 .jqTextboxListValue {
   background-color:#f4f4f4;
+  background-color:#f7f7f7;
   border:1px solid #cfcfcf;
   border-radius:4px;
+  -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
+  -moz-box-shadow   : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
+  box-shadow        : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
 }
 
 .natBottomBar {

diff --git a/pub/System/CustomatoTheme/customato.uncompressed.css b/pub/System/CustomatoTheme/customato.uncompressed.css
@@ -59,8 +59,8 @@ h2,
   font-size:1.5em; /* 21px */
   line-height:1em; /* 21px */
   margin:1em 0;
-  font-weight:normal;
   border-bottom:1px solid #D5D6DD;
+  font-weight:normal;
 }
 .foswikiGrid h2 {
   border-bottom:0;
@@ -95,6 +95,8 @@ h6,
 .foswikiNormal h6 {
   font-size: 1em; /* 14px */
   line-height: 1.5em; /* 21px */
+  margin-top: 1.5em;
+  margin-bottom: 0;
   font-weight:normal;
 }
 blockquote {
@@ -268,12 +270,8 @@ a.jqButton:link {
 }
 
 /* form elements */
-.jqTextboxListValue {
-  background-color:#ebebeb;
-  border:1px solid #cfcfcf;
-}
-
 .select2-container .select2-choice:hover,
+.select2-container-multi .select2-choices,
 .select2-container .select2-choice {
   border-color:#ccc;
 }
@@ -1026,8 +1024,12 @@ pre {
 
 .jqTextboxListValue {
   background-color:#f4f4f4;
+  background-color:#f7f7f7;
   border:1px solid #cfcfcf;
   border-radius:4px;
+  -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
+  -moz-box-shadow   : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
+  box-shadow        : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
 }
 
 .natBottomBar {