Repository: roller Updated Branches: refs/heads/bootstrap-ui 7cd8d6f6e -> 77e003d88
ThemeEdit page rewritten for Bootstrap, needs more polish. Note, theme logic in CreateWeblog is incomplete. Project: http://git-wip-us.apache.org/repos/asf/roller/repo Commit: http://git-wip-us.apache.org/repos/asf/roller/commit/77e003d8 Tree: http://git-wip-us.apache.org/repos/asf/roller/tree/77e003d8 Diff: http://git-wip-us.apache.org/repos/asf/roller/diff/77e003d8 Branch: refs/heads/bootstrap-ui Commit: 77e003d88bd3a4043a6e223fa418d59c4fb03795 Parents: 7cd8d6f Author: Dave Johnson <[email protected]> Authored: Sun Aug 19 11:19:01 2018 -0400 Committer: Dave Johnson <[email protected]> Committed: Sun Aug 19 11:19:01 2018 -0400 ---------------------------------------------------------------------- .../ui/struts2/ajax/ThemeDataServlet.java | 3 +- .../resources/ApplicationResources.properties | 32 +++-- .../webapp/WEB-INF/jsps/core/CreateWeblog.jsp | 21 ++-- .../webapp/WEB-INF/jsps/editor/ThemeEdit.jsp | 118 +++++++++++-------- app/src/main/webapp/WEB-INF/tiles.xml | 36 +++--- app/src/main/webapp/roller-ui/styles/roller.css | 10 ++ 6 files changed, 127 insertions(+), 93 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/roller/blob/77e003d8/app/src/main/java/org/apache/roller/weblogger/ui/struts2/ajax/ThemeDataServlet.java ---------------------------------------------------------------------- diff --git a/app/src/main/java/org/apache/roller/weblogger/ui/struts2/ajax/ThemeDataServlet.java b/app/src/main/java/org/apache/roller/weblogger/ui/struts2/ajax/ThemeDataServlet.java index 3c674c9..97bff15 100644 --- a/app/src/main/java/org/apache/roller/weblogger/ui/struts2/ajax/ThemeDataServlet.java +++ b/app/src/main/java/org/apache/roller/weblogger/ui/struts2/ajax/ThemeDataServlet.java @@ -57,8 +57,7 @@ public class ThemeDataServlet extends HttpServlet { themeId = request.getParameter("theme"); - ThemeManager themeMgr = WebloggerFactory.getWeblogger() - .getThemeManager(); + ThemeManager themeMgr = WebloggerFactory.getWeblogger().getThemeManager(); if (themeId == null) { themes = themeMgr.getEnabledThemesList(); } else { http://git-wip-us.apache.org/repos/asf/roller/blob/77e003d8/app/src/main/resources/ApplicationResources.properties ---------------------------------------------------------------------- diff --git a/app/src/main/resources/ApplicationResources.properties b/app/src/main/resources/ApplicationResources.properties index 297ff22..7f4b225 100644 --- a/app/src/main/resources/ApplicationResources.properties +++ b/app/src/main/resources/ApplicationResources.properties @@ -1300,21 +1300,31 @@ Beware though, managing a blog design of your own takes a bit of effort. themeEditor.yourCurrentTheme=Your current theme is themeEditor.yourCustomStylesheet=using <em style="color:red">custom</em> override stylesheet. themeEditor.yourThemeStyleSheet=using the <em>Shared Theme</em> default stylesheet. -themeEditor.selectTheme=Select a new shared theme for your blog + +themeEditor.youAreUsingACustomTheme=This weblog is using a custom theme. + +themeEditor.proposedChangeToShared=You are proposing to switch from a Custom Theme to a new Shared Theme. + +themeEditor.proposedSharedThemeChange=You are proposing to switch to a new Shared Theme. + +themeEditor.proposedSharedChangeToCustom=You are proposing to switch from a Shared Theme to a Custom Theme. + +themeEditor.selectTheme=Select a new shared theme for your blog: themeEditor.preview=Preview Theme themeEditor.save=Update Theme -themeEditor.previewDescription=Prior to changing your theme, the preview option below \ -can be used to see how your blog''s main front page would look with the new theme. - -themeEditor.importWarning=WARNING: Updating your custom theme may overwrite some of your existing templates. -themeEditor.importRequired=Since this is the first time you are going to try a \ -custom theme you must first copy templates from an existing theme. -themeEditor.importAndOverwriteTemplates=Also import a theme into my already existing custom templates, overwriting any with the same name. -themeEditor.importAndOverwriteTemplates.tooltip=This blog already has custom templates defined on the Templates tab. \ - Select this option to import a shared theme's templates, overwriting any of your existing templates that have the same name as the shared theme's \ - templates. Leave this unchecked to just switch to custom with your present templates. +themeEditor.previewDescription=Before you update your theme you can use <b>Preview Theme</b> \ + to launch a new browser window and see what your blog will look like with the new theme. + +themeEditor.importWarning=WARNING: Updating your custom theme <b>will overwrite</b> \ + some of your existing templates. +themeEditor.importRequired=Since this is the first time using a custom theme, \ + Roller will copy the templates from your existing theme so you can edit them. +themeEditor.importAndOverwriteTemplates=Import the Shared Theme selected above and overwrite existing custom theme. +themeEditor.existingTemplatesWarning=<b>This blog already has a custom theme defined so you need to make a choice</b>. \ + Do you want to switch back to using that theme, or do you want to over write that theme with the \ + Shared Theme that is selected above? themeEditor.setTheme.success=Theme set to {0} themeEditor.setCustomTheme.success=Shared theme {0} imported into custom templates themeEditor.setCustomTheme.instructions=Use the Stylesheet and Templates tabs above to edit your custom theme. http://git-wip-us.apache.org/repos/asf/roller/blob/77e003d8/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp ---------------------------------------------------------------------- diff --git a/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp b/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp index 14a3215..9b862a5 100644 --- a/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp +++ b/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp @@ -16,9 +16,6 @@ directory of this distribution. --%> <%@ include file="/WEB-INF/jsps/taglibs-struts2.jsp" %> -<script src="<s:url value="/roller-ui/scripts/jquery-2.1.1.min.js" />"></script> -<script src="<s:url value='/webjars/angular/1.2.29/angular.min.js' />"></script> - <p class="subtitle"><s:text name="createWebsite.prompt"/></p> @@ -89,15 +86,15 @@ document.forms[0].elements[0].focus(); angular.module('themeSelectModule', []) - .controller('themeController', ['$scope', function ($scope) { - $.ajax({ - url: "<s:property value='siteURL' />/roller-ui/authoring/themedata", async: false, - success: function (data) { - $scope.themes = data; - } - }); - $scope.selectedTheme = $scope.themes[0]; - }]); + .controller('themeController', ['$scope', function ($scope) { + $.ajax({ + url: "<s:property value='siteURL' />/roller-ui/authoring/themedata", async: false, + success: function (data) { + $scope.themes = data; + } + }); + $scope.selectedTheme = $scope.themes[0]; + }]); var saveButton; http://git-wip-us.apache.org/repos/asf/roller/blob/77e003d8/app/src/main/webapp/WEB-INF/jsps/editor/ThemeEdit.jsp ---------------------------------------------------------------------- diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/ThemeEdit.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/ThemeEdit.jsp index 38857fa..4a07c3e 100644 --- a/app/src/main/webapp/WEB-INF/jsps/editor/ThemeEdit.jsp +++ b/app/src/main/webapp/WEB-INF/jsps/editor/ThemeEdit.jsp @@ -75,6 +75,10 @@ </s:else> </p> + </div> + + <div id="themeChooser" style="display:none;"> + <%-- theme selector with preview image --%> <p><s:text name="themeEditor.selectTheme"/></p> <p> @@ -87,59 +91,62 @@ </div> - <div id="sharedChangeProposed" style="display:none;"> + <div id="sharedChangeToShared" style="display:none;"> + + <div class="alert-warning" style="margin-top:3em; margin-bottom:2em; padding: 1em"> + <s:text name="themeEditor.proposedSharedThemeChange"/> + </div> + + <%-- Preview and Update buttons --%> + <p> <s:text name="themeEditor.previewDescription"/> </p> + <input type="button" name="themePreview" class="btn" + value="<s:text name='themeEditor.preview' />" + onclick="fullPreview($('#themeSelector').get(0))"/> - <div id="sharedChangeToShared" style="display:none;"> + <s:submit cssClass="btn btn-default" value="%{getText('themeEditor.save')}"/> - <%-- Preview and Update buttons --%> - <p> <s:text name="themeEditor.previewDescription"/> </p> - <input type="button" name="themePreview" class="btn" style="margin-bottom:1em" - value="<s:text name='themeEditor.preview' />" - onclick="fullPreview($('#themeSelector').get(0))"/> + </div> - <s:submit cssClass="btn btn-default" value="%{getText('themeEditor.save')}"/> + <div id="sharedChangeToCustom" style="display:none;"> + <div class="alert-warning" style="margin-top:3em; margin-bottom:2em; padding: 1em"> + <s:text name="themeEditor.proposedSharedChangeToCustom"/> </div> - <div id="sharedChangeToCustom" style="display:none;"> + <s:if test="firstCustomization"> + <p> + <s:text name="themeEditor.importRequired"/> + <s:hidden name="importTheme" value="true"/> + </p> + </s:if> + <s:else> + <p><s:text name="themeEditor.existingTemplatesWarning"/></p> + <s:checkbox name="importTheme" label="%{getText('themeEditor.importAndOverwriteTemplates')}"/> + </s:else> - <%-- Update button --%> - <s:submit cssClass="btn btn-default" value="%{getText('themeEditor.save')}"/> + <%-- Update button --%> + <s:submit cssClass="btn btn-default" value="%{getText('themeEditor.save')}"/> - </div> </div> <%-- ********************************************************************************************************* --%> <div id="customNoChange" style="display:none;"> - <p class="lead"><s:text name="themeEditor.youAreUsingACustomTheme"/></p> - </div> - <div id="customChangeProposed" style="display:none;"> - - <p class="lead"><s:text name="themeEditor.youAreUsingACustomTheme"/></p> + <div id="customChangeToShared" style="display:none;"> - <div class="alert-warning"><s:text name="themeEditor.proposedChangeToShared"/></div> + <div class="alert-warning" style="margin-top:3em; margin-bottom:2em; padding: 1em"> + <s:text name="themeEditor.proposedChangeToShared"/> + </div> <%-- Preview and Update buttons --%> <p> <s:text name="themeEditor.previewDescription"/> </p> - <input type="button" name="themePreview" class="btn" style="margin-bottom:1em" + <input type="button" name="themePreview" class="btn" style="margin-bottom:2em" value="<s:text name='themeEditor.preview' />" onclick="fullPreview($('#themeSelector').get(0))"/> - <s:if test="firstCustomization"> - <p> - <s:text name="themeEditor.importRequired"/> - <s:hidden name="importTheme" value="true"/> - </p> - </s:if> - <s:else> - <p><s:text name="themeEditor.existingTemplatesWarning"/></p> - <s:checkbox name="importTheme" label="%{getText('themeEditor.importAndOverwriteTemplates')}"/> - </s:else> - <s:submit cssClass="btn btn-default" value="%{getText('themeEditor.save')}"/> </div> @@ -157,35 +164,38 @@ <s:if test="customTheme"> originalType = "custom" - updateThemeTypeChooser($('#customRadio')); + updateView($('#customRadio')); previewImage('<s:property value="themes[0].id"/>'); </s:if> <s:else> originalType = "shared" - updateThemeTypeChooser($('#sharedRadio')); + updateView($('#sharedRadio')); previewImage('<s:property value="themeId"/>'); </s:else> }); function proposeThemeTypeChange(selected) { + if (selected[0].value === 'shared') { proposedChangeType = "shared" + + themeSelector = $('#themeSelector')[0] + index = themeSelector.selectedIndex; + previewImage(themeSelector.options[index].value) + } else { proposedChangeType = "custom" } - updateThemeTypeChooser(selected) + updateView(selected) } function proposeSharedThemeChange(themeId) { proposedThemeId = themeId; - if ( proposedThemeId !== originalThemeId ) { - $('#sharedChangeProposed').show(); - $('#sharedChangeToShared').show(); - $('#sharedChangeToCustom').hide(); + if ( originalType !== "custom" && proposedThemeId !== originalThemeId ) { } previewImage(themeId) - + updateView($('sharedRadio')) } function previewImage(themeId) { @@ -204,24 +214,31 @@ + selector.options[selected].value); } - function updateThemeTypeChooser(selected) { + function updateView(selected) { if (selected[0].value === 'shared') { $('#sharedChooser').addClass("panel-success"); $('#customChooser').removeClass("panel-success"); - if ( proposedChangeType === "" || proposedChangeType !== originalType ) { - $('#sharedChangeProposed').show(); - $('#customNoChange').hide(); - $('#customChangeProposed').hide(); + $('#themeChooser').show(); + + $('#customNoChange').hide(); + $('#customChangeToShared').hide(); + + if ( proposedThemeId === "") { + $('#sharedChangeToShared').hide(); + $('#sharedChangeToCustom').hide(); + + } else if ( proposedThemeId != originalThemeId ) { if ( originalType === "shared" ) { $('#sharedChangeToShared').show(); $('#sharedChangeToCustom').hide(); } else { - $('#sharedChangeToCustom').show(); + $('#customChangeToShared').show(); $('#sharedChangeToShared').hide(); + $('#sharedChangeToCustom').hide(); } } @@ -230,15 +247,16 @@ $('#customChooser').addClass("panel-success"); $('#sharedChooser').removeClass("panel-success"); - $('#sharedChangeProposed').hide(); + $('#themeChooser').hide(); + $('#sharedNoChange').hide(); + $('#customChangeToShared').hide(); - if ( proposedChangeType === "" || proposedChangeType === originalType ) { - $('#customNoChange').show(); - $('#customChangeProposed').hide(); - } else { - $('#customChangeProposed').show(); + if ( proposedChangeType !== "" || proposedChangeType !== originalType ) { + $('#sharedChangeToCustom').show(); $('#customNoChange').hide(); + } else { + $('#customNoChange').show(); } } http://git-wip-us.apache.org/repos/asf/roller/blob/77e003d8/app/src/main/webapp/WEB-INF/tiles.xml ---------------------------------------------------------------------- diff --git a/app/src/main/webapp/WEB-INF/tiles.xml b/app/src/main/webapp/WEB-INF/tiles.xml index 24b046a..5804b0f 100644 --- a/app/src/main/webapp/WEB-INF/tiles.xml +++ b/app/src/main/webapp/WEB-INF/tiles.xml @@ -23,7 +23,7 @@ <definition name=".tiles-mainmenupage" template="/WEB-INF/jsps/tiles/tiles-mainmenupage.jsp"> <put-attribute name="bannerStatus" value="/WEB-INF/jsps/tiles/bannerStatus.jsp" /> - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="styles" value="/WEB-INF/jsps/tiles/empty.jsp" /> <put-attribute name="messages" value="/WEB-INF/jsps/tiles/messages.jsp" /> <put-attribute name="content" value="${content}" /> @@ -186,7 +186,7 @@ </definition> <definition name=".GlobalCommentManagement" extends=".tiles-tabbedpage" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/Comments.jsp" /> <put-attribute name="sidebar" value="/WEB-INF/jsps/editor/CommentsSidebar.jsp" /> <put-attribute name="styles" value="/WEB-INF/jsps/tiles/empty.jsp" /> @@ -222,76 +222,76 @@ <!-- weblog editor pages (and associates) --> <definition name=".MediaFileAdd" extends=".tiles-tabbedpage" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/MediaFileAdd.jsp" /> <put-attribute name="sidebar" value="/WEB-INF/jsps/tiles/empty.jsp" /> <put-attribute name="styles" value="/WEB-INF/jsps/tiles/empty.jsp" /> </definition> <definition name=".MediaFileEdit" extends=".tiles-popuppage" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/MediaFileEdit.jsp" /> </definition> <definition name=".MediaFileAddExternalInclude" extends=".tiles-popuppage-only-content" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/MediaFileAddExternalInclude.jsp" /> </definition> <definition name=".MediaFileImageChooser" extends=".tiles-popuppage-only-content" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/MediaFileImageChooser.jsp" /> <put-attribute name="messages" value="/WEB-INF/jsps/tiles/messages.jsp" /> </definition> <definition name=".MediaFileImageDimension" extends=".tiles-popuppage-only-content" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/MediaFileImageDimension.jsp" /> </definition> <definition name=".MediaFileSearchInclude" extends=".tiles-popuppage" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/MediaFileSearch.jsp" /> </definition> <definition name=".MediaFileAddInclude" extends=".tiles-popuppage" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/MediaFileAdd.jsp" /> </definition> <definition name=".MediaFileAddSuccessInclude" extends=".tiles-popuppage" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/MediaFileAddSuccessInclude.jsp" /> </definition> <definition name=".MediaFileEditSuccess" extends=".tiles-popuppage" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/MediaFileEditSuccess.jsp" /> </definition> <definition name=".MediaFileView" extends=".tiles-tabbedpage" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/MediaFileView.jsp" /> <put-attribute name="sidebar" value="/WEB-INF/jsps/editor/MediaFileSidebar.jsp" /> <put-attribute name="styles" value="/WEB-INF/jsps/tiles/empty.jsp" /> </definition> <definition name=".MediaFileAddSuccess" extends=".tiles-tabbedpage" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/MediaFileAddSuccess.jsp" /> <put-attribute name="sidebar" value="/WEB-INF/jsps/tiles/empty.jsp" /> <put-attribute name="styles" value="/WEB-INF/jsps/tiles/empty.jsp" /> </definition> <definition name=".TabularView" extends=".tiles-tabbedpage" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/TabularView.jsp" /> <put-attribute name="sidebar" value="/WEB-INF/jsps/editor/MediaFileSidebar.jsp" /> <put-attribute name="styles" value="/WEB-INF/jsps/tiles/empty.jsp" /> </definition> <definition name=".EntryEdit" extends=".tiles-tabbedpage" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/EntryEdit.jsp" /> <put-attribute name="sidebar" value="/WEB-INF/jsps/editor/EntrySidebar.jsp" /> <put-attribute name="styles" value="/WEB-INF/jsps/tiles/empty.jsp" /> @@ -303,14 +303,14 @@ </definition> <definition name=".Entries" extends=".tiles-tabbedpage" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/Entries.jsp" /> <put-attribute name="sidebar" value="/WEB-INF/jsps/editor/EntriesSidebar.jsp" /> <put-attribute name="styles" value="/WEB-INF/jsps/tiles/empty.jsp" /> </definition> <definition name=".Comments" extends=".tiles-tabbedpage" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/Comments.jsp" /> <put-attribute name="sidebar" value="/WEB-INF/jsps/editor/CommentsSidebar.jsp" /> <put-attribute name="styles" value="/WEB-INF/jsps/tiles/empty.jsp" /> @@ -348,7 +348,7 @@ </definition> <definition name=".ThemeEdit" extends=".tiles-tabbedpage" > - <put-attribute name="head" value="/WEB-INF/jsps/tiles/head-ajax.jsp" /> + <put-attribute name="head" value="/WEB-INF/jsps/tiles/head.jsp" /> <put-attribute name="content" value="/WEB-INF/jsps/editor/ThemeEdit.jsp" /> </definition> http://git-wip-us.apache.org/repos/asf/roller/blob/77e003d8/app/src/main/webapp/roller-ui/styles/roller.css ---------------------------------------------------------------------- diff --git a/app/src/main/webapp/roller-ui/styles/roller.css b/app/src/main/webapp/roller-ui/styles/roller.css index d94e016..31206a8 100644 --- a/app/src/main/webapp/roller-ui/styles/roller.css +++ b/app/src/main/webapp/roller-ui/styles/roller.css @@ -292,3 +292,13 @@ div.image-controls select, div.image-controls input { display: inline; } + +#sharedChooser, #customChooser { + height: 7em; +} + +.equal{ + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +}
