initial theme implementation

README.md

@@ -94,6 +94,16 @@ The language has to be referenced in the `languages.properties` file to be picke
 
 When adding new translations, add them in en.properties then run `mvn -e groovy:execute -Pi18n`. It will parse the english file and add placeholders in the other translation files. 
 
+Themes
+---------------------
+
+To create a theme, create a new file called _<theme>.scss in `src/main/webapp/sass/themes/`. Your styles should be wrapped in a `#theme-<theme>` element.
+
+Don't forget to reference your theme in `src/main/webapp/sass/app.scss` and in `src/main/webapp/js/controllers.js` (look for `$scope.themes`).
+
+See _test.scss for an example.
+
+
 Copyright and license
 ---------------------
 

src/main/java/com/commafeed/backend/model/UserSettings.java

@@ -50,6 +50,9 @@ public class UserSettings extends AbstractModel {
 	private boolean scrollMarks;
 	private boolean socialButtons;
 
+	@Column(length = 32)
+	private String theme;
+
 	@Lob
 	@Column(length = Integer.MAX_VALUE)
 	private String customCss;
@@ -126,4 +129,12 @@ public class UserSettings extends AbstractModel {
 		this.language = language;
 	}
 
+	public String getTheme() {
+		return theme;
+	}
+
+	public void setTheme(String theme) {
+		this.theme = theme;
+	}
+
 }

src/main/java/com/commafeed/frontend/model/Settings.java

@@ -36,6 +36,9 @@ public class Settings implements Serializable {
 	@ApiProperty(value = "In expanded view, scroll through entries mark them as read", required = true)
 	private boolean scrollMarks;
 
+	@ApiProperty(value = "user's selected theme")
+	private String theme;
+
 	@ApiProperty(value = "user's custom css for the website")
 	private String customCss;
 
@@ -103,4 +106,12 @@ public class Settings implements Serializable {
 		this.language = language;
 	}
 
+	public String getTheme() {
+		return theme;
+	}
+
+	public void setTheme(String theme) {
+		this.theme = theme;
+	}
+
 }

src/main/java/com/commafeed/frontend/pages/BasePage.java

@@ -62,7 +62,7 @@ public abstract class BasePage extends WebPage {
 
 	@Inject
 	protected UserRoleDAO userRoleDAO;
-	
+
 	@Inject
 	MailService mailService;
 
@@ -74,17 +74,20 @@ public abstract class BasePage extends WebPage {
 	public BasePage() {
 
 		String lang = "en";
+		String theme = "default";
 		User user = CommaFeedSession.get().getUser();
 		if (user != null) {
 			UserSettings settings = userSettingsDAO.findByUser(user);
 			if (settings != null) {
 				lang = settings.getLanguage() == null ? "en" : settings
 						.getLanguage();
+				theme = settings.getTheme() == null ? "default" : settings
+						.getTheme();
 			}
 		}
 
-		add(new TransparentWebMarkupContainer("html")
-				.add(new AttributeModifier("lang", lang)));
+		add(new TransparentWebMarkupContainer("html").setMarkupId(
+				"theme-" + theme).add(new AttributeModifier("lang", lang)));
 
 		settings = applicationSettingsService.get();
 		add(new HeaderResponseContainer("footer-container", "footer-container"));
@@ -104,7 +107,8 @@ public abstract class BasePage extends WebPage {
 		if (getApplication().getConfigurationType() == RuntimeConfigurationType.DEPLOYMENT) {
 			long startupTime = startupBean.getStartupTime();
 			String suffix = "?" + startupTime;
-			response.render(JavaScriptHeaderItem.forUrl("static/all.js" + suffix));
+			response.render(JavaScriptHeaderItem.forUrl("static/all.js"
+					+ suffix));
 			response.render(CssHeaderItem.forUrl("static/all.css" + suffix));
 		} else {
 			response.render(JavaScriptHeaderItem.forUrl("wro/lib.js"));

src/main/java/com/commafeed/frontend/rest/resources/UserREST.java

@@ -41,6 +41,7 @@ public class UserREST extends AbstractResourceREST {
 			s.setShowRead(settings.isShowRead());
 			s.setSocialButtons(settings.isSocialButtons());
 			s.setScrollMarks(settings.isScrollMarks());
+			s.setTheme(settings.getTheme());
 			s.setCustomCss(settings.getCustomCss());
 			s.setLanguage(settings.getLanguage());
 		} else {
@@ -48,6 +49,7 @@ public class UserREST extends AbstractResourceREST {
 			s.setReadingOrder(ReadingOrder.desc.name());
 			s.setViewMode(ViewMode.title.name());
 			s.setShowRead(true);
+			s.setTheme("default");
 			s.setSocialButtons(true);
 			s.setScrollMarks(true);
 			s.setLanguage("en");
@@ -75,6 +77,7 @@ public class UserREST extends AbstractResourceREST {
 		s.setShowRead(settings.isShowRead());
 		s.setViewMode(ViewMode.valueOf(settings.getViewMode()));
 		s.setScrollMarks(settings.isScrollMarks());
+		s.setTheme(settings.getTheme());
 		s.setCustomCss(settings.getCustomCss());
 		s.setSocialButtons(settings.isSocialButtons());
 		s.setLanguage(settings.getLanguage());

src/main/webapp/js/controllers.js

@@ -987,6 +987,8 @@ function($scope, $location, SettingsService, AnalyticsService, ServerService) {
 	
 	$scope.ServerService = ServerService.get();
 	
+	$scope.themes = ['default', 'test'];
+	
 	$scope.settingsService = SettingsService;
 	$scope.$watch('settingsService.settings', function(value) {
 		$scope.settings = angular.copy(value);

src/main/webapp/sass/app.scss

@@ -1,10 +1,11 @@
 @import "generic/misc";
 
-
 @import "components/admin-panel";
 @import "components/toolbar";
 @import "components/entry-list";
 @import "components/subscription-list";
 @import "components/help";
 
-@import "mobile/mobile";
+@import "mobile/mobile";
+
+@import "themes/test";

src/main/webapp/sass/themes/_test.scss

@@ -0,0 +1,5 @@
+#theme-test {
+	body {
+		background-color: black
+	}	
+}

src/main/webapp/templates/settings.html

@@ -55,8 +55,13 @@
 						</div>
 					</div>
 					<div class="tab-pane" ng-class="{active: tab == 'css'}">
-						<textarea ng-model="settings.customCss" class="input-block-level" rows="20">
-						</textarea>
+						<div>
+							<select ng-model="settings.theme" ng-options="theme for theme in themes"></select>
+						</div>
+						<div>
+							<textarea ng-model="settings.customCss" class="input-block-level" rows="20">
+							</textarea>
+						</div>
 					</div>
 				</div>
 			</div>