Feature/themes (#11)

* Implemented theme service with 3 themes.
* Added settings for theme selection.
* Added seamless textures for themes.
* Added new themes, fixed UWP NativeBrowserService.
* Changed default theme
* Version 2.3.0

src/SilentNotes.Android/Properties/AndroidManifest.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="12" android:versionName="2.2.0" package="ch.martinstoeckli.silentnotes" android:installLocation="auto">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="13" android:versionName="2.3.0" package="ch.martinstoeckli.silentnotes" android:installLocation="auto">
 	<uses-sdk android:minSdkVersion="19" android:targetSdkVersion="28" />
 	<uses-permission android:name="android.permission.INTERNET" />
 	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

src/SilentNotes.Android/SilentNotes.Android.csproj

@@ -139,11 +139,6 @@
       <Link>Assets\Html\SilentNotes256.png</Link>
     </AndroidAsset>
   </ItemGroup>
-  <ItemGroup>
-    <AndroidAsset Include="..\SilentNotes.Shared\Assets\Html\cork-grey.jpg">
-      <Link>Assets\Html\cork-grey.jpg</Link>
-    </AndroidAsset>
-  </ItemGroup>
   <ItemGroup>
     <AndroidAsset Include="..\SilentNotes.Shared\Assets\Html\bootstrap.bundle.min.js">
       <Link>Assets\Html\bootstrap.bundle.min.js</Link>
@@ -221,5 +216,50 @@
       <Link>Assets\Html\jquery-3.3.1.min.js</Link>
     </AndroidAsset>
   </ItemGroup>
+  <ItemGroup>
+    <AndroidAsset Include="..\SilentNotes.Shared\Assets\Html\paper.jpg">
+      <Link>Assets\Html\paper.jpg</Link>
+    </AndroidAsset>
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidAsset Include="..\SilentNotes.Shared\Assets\Html\sand.jpg">
+      <Link>Assets\Html\sand.jpg</Link>
+    </AndroidAsset>
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidAsset Include="..\SilentNotes.Shared\Assets\Html\sky.jpg">
+      <Link>Assets\Html\sky.jpg</Link>
+    </AndroidAsset>
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidAsset Include="..\SilentNotes.Shared\Assets\Html\meadow.jpg">
+      <Link>Assets\Html\meadow.jpg</Link>
+    </AndroidAsset>
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidAsset Include="..\SilentNotes.Shared\Assets\Html\grass.jpg">
+      <Link>Assets\Html\grass.jpg</Link>
+    </AndroidAsset>
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidAsset Include="..\SilentNotes.Shared\Assets\Html\stone.jpg">
+      <Link>Assets\Html\stone.jpg</Link>
+    </AndroidAsset>
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidAsset Include="..\SilentNotes.Shared\Assets\Html\forest.jpg">
+      <Link>Assets\Html\forest.jpg</Link>
+    </AndroidAsset>
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidAsset Include="..\SilentNotes.Shared\Assets\Html\stars.jpg">
+      <Link>Assets\Html\stars.jpg</Link>
+    </AndroidAsset>
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidAsset Include="..\SilentNotes.Shared\Assets\Html\water.jpg">
+      <Link>Assets\Html\water.jpg</Link>
+    </AndroidAsset>
+  </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
 </Project>

src/SilentNotes.Android/Startup.cs

@@ -73,6 +73,8 @@ private static void RegisterServices(Activity rootActivity)
                 Ioc.GetOrCreate<ISettingsService>(),
                 Ioc.GetOrCreate<IRepositoryStorageService>(),
                 Ioc.GetOrCreate<INavigationService>()));
+            Ioc.RegisterFactory<IThemeService>(() => new ThemeService(
+                Ioc.GetOrCreate<ISettingsService>()));
         }
 
         private static void RegisterControllers()

src/SilentNotes.Shared/Assets/Html/silentnotes.css

@@ -7,6 +7,10 @@ html {
 	font-size: 14px;
 }
 
+body {
+	background-color: #f0f0f0;
+}
+
 h1 {
 	font-size: 1.7em;
 	font-weight: bold;

src/SilentNotes.Shared/Assets/Html/silentnotes.js

@@ -162,6 +162,11 @@ function htmlViewBindingsSetCss(bindingName, cssAttributeName, cssAttributeValue
 	$(selector).css(cssAttributeName, cssAttributeValue);
 }
 
+function htmlViewBindingsSetBackgroundImage(bindingName, image) {
+	var selector = '[data-binding="' + bindingName + '"]';
+	$(selector).css('background-image', 'url(' + image + ')');
+}
+
 function selectNote(noteId) {
 	$('#note-repository').find('.selectable-item').each(function () {
 		var item = $(this);

src/SilentNotes.Shared/Controllers/NoteRepositoryController.cs

@@ -70,6 +70,7 @@ public override void ShowInView(IHtmlView htmlView, KeyValueList<string, string>
                     Ioc.GetOrCreate<IBaseUrlService>(),
                     Ioc.GetOrCreate<IStoryBoardService>(),
                     Ioc.GetOrCreate<IFeedbackService>(),
+                    Ioc.GetOrCreate<IThemeService>(),
                     repositoryService);
 
                 Bindings.BindCommand("AddNote", _viewModel.AddNoteCommand);

src/SilentNotes.Shared/Controllers/RecycleBinController.cs

@@ -45,6 +45,7 @@ public override void ShowInView(IHtmlView htmlView, KeyValueList<string, string>
                 Ioc.GetOrCreate<ILanguageService>(),
                 Ioc.GetOrCreate<ISvgIconService>(),
                 Ioc.GetOrCreate<IBaseUrlService>(),
+                Ioc.GetOrCreate<IThemeService>(),
                 Ioc.GetOrCreate<IRepositoryStorageService>());
 
             Bindings.BindCommand("GoBack", _viewModel.GoBackCommand);

src/SilentNotes.Shared/Controllers/SettingsController.cs

@@ -41,6 +41,7 @@ public override void ShowInView(IHtmlView htmlView, KeyValueList<string, string>
                 Ioc.GetOrCreate<ISvgIconService>(),
                 Ioc.GetOrCreate<IBaseUrlService>(),
                 Ioc.GetOrCreate<ISettingsService>(),
+                Ioc.GetOrCreate<IThemeService>(),
                 Ioc.GetOrCreate<IStoryBoardService>());
 
             Bindings.BindCommand("GoBack", _viewModel.GoBackCommand);
@@ -51,6 +52,8 @@ public override void ShowInView(IHtmlView htmlView, KeyValueList<string, string>
             Bindings.BindDropdown("SelectedAutoSyncMode", null, (string value) => _viewModel.SelectedAutoSyncMode = value, null, null, HtmlViewBindingMode.OneWayToViewmodel);
             Bindings.BindText("CloudStorageSettings", () => _viewModel.AccountSummary, null, _viewModel, nameof(_viewModel.AccountSummary), HtmlViewBindingMode.OneWayToView);
             Bindings.BindCheckbox("ShowCursorArrowKeys", null, (value) => _viewModel.ShowCursorArrowKeys = value, null, null, HtmlViewBindingMode.OneWayToViewmodel);
+            Bindings.BindBackgroundImage("SelectedTheme", () => _viewModel.SelectedTheme.Image, _viewModel, nameof(_viewModel.SelectedTheme), HtmlViewBindingMode.OneWayToView);
+            Bindings.UnhandledViewBindingEvent += UnhandledViewBindingEventHandler;
 
             string html = _viewService.GenerateHtml(_viewModel);
             View.LoadHtml(html);
@@ -61,5 +64,16 @@ private void SetEncryptionAlgorithmToViewmodel(string value)
             _viewModel.SelectedEncryptionAlgorithm = _viewModel.EncryptionAlgorithms.Find(
                 (item) => item.Value == value);
         }
+
+        private void UnhandledViewBindingEventHandler(object sender, HtmlViewBindingNotifiedEventArgs e)
+        {
+            switch (e.BindingName?.ToLowerInvariant())
+            {
+                case "selectedthemepreview":
+                    string themeId = e.Parameters["data-theme"];
+                    _viewModel.SelectedTheme = _viewModel.Themes.Find(item => item.Id == themeId);
+                    break;
+            }
+        }
     }
 }

src/SilentNotes.Shared/HtmlView/HtmlViewBindings.cs

@@ -303,6 +303,33 @@ public void BindVisibility(string bindingName, Func<bool> viewmodelGetter, INoti
                 bindingMode);
         }
 
+        /// <summary>
+        /// Binds a string property of the viewmodel to the background image of a control in the
+        /// (HTML) view. This is a one way binding from the viewmodel to the view. The viewmodel
+        /// property should contain the url to an image file, e.g. "background.png"
+        /// </summary>
+        /// <param name="bindingName">The name of the binding. The name is declared as
+        /// "data-binding" attribute of the HTML element.</param>
+        /// <param name="viewmodelGetter">Can read the property from the viewmodel.</param>
+        /// <param name="viewmodelNotifier">Usually the viewmodel itself, supporting the
+        /// INotifyPropertyChanged interface.</param>
+        /// <param name="viewmodelPropertyName">Name of the property in the viewmodel, whose
+        /// changes should be listened for.</param>
+        /// <param name="bindingMode">The binding mode which defines the direction of the binding.</param>
+        public void BindBackgroundImage(string bindingName, Func<string> viewmodelGetter, INotifyPropertyChanged viewmodelNotifier, string viewmodelPropertyName, HtmlViewBindingMode bindingMode)
+        {
+            if (!bindingMode.In(new[] { HtmlViewBindingMode.OneWayToView, HtmlViewBindingMode.OneWayToViewPlusOneTimeToView }))
+                throw new Exception("BindBackgroundImage expects the bindingMode to be either OneWayToView or OneWayToViewPlusOneTimeToView.");
+
+            BindGeneric<string>(
+                (value) => ViewBackgroundImageSetter(bindingName, value),
+                null,
+                viewmodelGetter,
+                null,
+                CreateViewmodelNotifierOrNull(viewmodelNotifier, viewmodelPropertyName),
+                bindingMode);
+        }
+
         /// <inheritdoc/>
         public void Dispose()
         {
@@ -358,5 +385,12 @@ private void ViewVisibilitySetter(string bindingName, bool visible)
                 "htmlViewBindingsSetVisibility('{0}', {1});", bindingName, visible.ToString().ToLowerInvariant());
             _htmlView.ExecuteJavaScript(script);
         }
+
+        private void ViewBackgroundImageSetter(string bindingName, string image)
+        {
+            string script = string.Format(
+                "htmlViewBindingsSetBackgroundImage('{0}', '{1}');", bindingName, image);
+            _htmlView.ExecuteJavaScript(script);
+        }
     }
 }

src/SilentNotes.Shared/Models/DemoNoteRepositoryModel.cs

@@ -81,7 +81,7 @@ public DemoNoteRepositoryModel()
             Notes.Add(new NoteModel
             {
                 Id = new Guid("8f9e539d-172c-41e8-99ab-60effec84284"),
-                BackgroundColorHex = "#fbf4c1",
+                BackgroundColorHex = "#d0f8f9",
                 InRecyclingBin = false,
                 CreatedAt = DateTime.Parse("2018-12-18T12:53:09.3660557Z"),
                 ModifiedAt = DateTime.Parse("2018-12-18T13:25:55.8335803Z"),
@@ -99,7 +99,7 @@ Temperature  4 out of 10
             Notes.Add(new NoteModel
             {
                 Id = new Guid("70a25de4-2141-4164-aefc-b9b2624a112c"),
-                BackgroundColorHex = "#d0f8f9",
+                BackgroundColorHex = "#fbf4c1",
                 InRecyclingBin = false,
                 CreatedAt = DateTime.Parse("2017-09-10T09:39:12.8056002Z"),
                 ModifiedAt = DateTime.Parse("2018-12-18T13:25:41.3363938Z"),

src/SilentNotes.Shared/Models/SettingsModel.cs

@@ -46,6 +46,12 @@ public SettingsModel()
         [XmlElement("cloud_storage_account")]
         public CloudStorageAccount CloudStorageAccount { get; set; }
 
+        /// <summary>
+        /// Gets or sets the id of the theme selected by the user.
+        /// </summary>
+        [XmlElement("selected_theme")]
+        public string SelectedTheme { get; set; }
+
         /// <summary>
         /// Gets or sets the default encryption algorithm, used to encrypt the repository
         /// before sending it to the cloud.
@@ -118,7 +124,7 @@ public List<string> TransferCodeHistory
         }
 
         /// <summary>
-        /// Gets a value indicating whether the virtual arrow keys should be displayed.
+        /// Gets or sets a value indicating whether the virtual arrow keys should be displayed.
         /// </summary>
         [XmlElement("show_cursor_keys")]
         public bool ShowCursorArrowKeys { get; set; }

src/SilentNotes.Shared/Models/ThemeModel.cs

@@ -0,0 +1,45 @@
+// Copyright © 2018 Martin Stoeckli.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+using System;
+
+namespace SilentNotes.Models
+{
+    /// <summary>
+    /// Describes a theme which controls the apperance of the application.
+    /// </summary>
+    public class ThemeModel
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ThemeModel"/> class.
+        /// </summary>
+        /// <param name="id">See the <see cref="Id"/> property.</param>
+        /// <param name="image">Sets the <see cref="Image"/> property.</param>
+        /// <param name="imageTint">Sets the <see cref="ImageTint"/> property.</param>
+        public ThemeModel(string id, string image, string imageTint)
+        {
+            Id = id;
+            Image = image;
+            ImageTint = imageTint;
+        }
+
+        /// <summary>
+        /// Gets the identificator of the theme, used for serialization.
+        /// </summary>
+        public string Id { get; private set; }
+
+        /// <summary>
+        /// Gets a relative file without path to the background texture image.
+        /// Example: "cork.jpg"
+        /// </summary>
+        public string Image { get; private set; }
+
+        /// <summary>
+        /// Gets a hex color representing the <see cref="Image"/> to avoid flickering when
+        /// navigating between pages. Example: "#00ff00"
+        /// </summary>
+        public string ImageTint { get; private set; }
+    }
+}

src/SilentNotes.Shared/Services/IThemeService.cs

@@ -0,0 +1,35 @@
+// Copyright © 2018 Martin Stoeckli.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+using System.Collections.Generic;
+using SilentNotes.Models;
+
+namespace SilentNotes.Services
+{
+    /// <summary>
+    /// Can get informations about the current theme.
+    /// </summary>
+    public interface IThemeService
+    {
+        /// <summary>
+        /// Gets a list of all available themes.
+        /// </summary>
+        List<ThemeModel> Themes { get; }
+
+        /// <summary>
+        /// Gets the active theme selected by the user, or the default theme.
+        /// </summary>
+        /// <returns>Active theme.</returns>
+        ThemeModel SelectedTheme { get; }
+
+        /// <summary>
+        /// Searches for the theme with a given <paramref name="themeId"/>. If no such theme can
+        /// be found, the default theme is returned.
+        /// </summary>
+        /// <param name="themeId">Id of the theme to search for.</param>
+        /// <returns>Found theme or default theme.</returns>
+        ThemeModel FindThemeOrDefault(string themeId);
+    }
+}

src/SilentNotes.Shared/Services/LanguageService.cs

@@ -118,6 +118,7 @@ private void LoadEnglishResources(Dictionary<string, string> resources)
 
             resources["gui"] = "User interface";
             resources["gui_show_arrow_keys"] = "Show cursor arrow keys when editing";
+            resources["gui_texture"] = "Theme";
             resources["gui_arrow_key"] = "Go one character to the left/right";
         }
 
@@ -218,6 +219,7 @@ private void LoadGermanResources(Dictionary<string, string> resources)
 
             resources["gui"] = "Benutzeroberfläche";
             resources["gui_show_arrow_keys"] = "Cursor Pfeiltasten beim Bearbeiten anzeigen";
+            resources["gui_texture"] = "Design";
             resources["gui_arrow_key"] = "Ein Zeichen nach links/rechts bewegen";
         }