Skip to content

Instantly share code, notes, and snippets.

View EditorThemeColorPicker.cs
using global::Umbraco.Core.Models.PublishedContent;
using Umbraco.Core.PropertyEditors;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using Umbraco.Web;
using Umbraco.Core;
using System.Linq;
namespace YourNamespace.PropertyEditors
{
View package.manifest
{
propertyEditors: [{
alias: "Our.Umbraco.EditorThemeColorPicker",
name: "Editor Theme Color Picker",
icon: "icon-thumbnails",
group: "Pickers",
editor: {
view: "~/App_Plugins/EditorThemeColorPicker/editorthemecolorpicker.html",
valueType: "JSON"
},
View editorthemecolorpicker.html
<div class="umb-contentpicker umb-editor" ng-controller="Our.Umbraco.EditorThemeColorPickerController">
<p ng-if="colorThemes === 0">
<localize key="themeColorPicker_noThemesCreated">No color themes created</localize>
</p>
<ul class="theme-color-picker-themes" ng-if="colorThemes.length > 0">
<!-- How to keep track of the active theme? ng-class="theme.id === model.value.id ? 'is-default':''" -->
<li class="theme-color-picker-theme edit-view" ng-class="$index === model.value.id ? 'is-default':''" ng-repeat="theme in colorThemes track by $index">
<button class="btn-select-theme" ng-click="selectTheme($index)" type="button" prevent-default title=""><!-- {{selectThemeTitle}} -->
View editorthemecolorpicker.css
.theme-color-picker label{
display: inline-block;
width:100%;
}
.theme-color-picker ul{
margin:0;
padding:0;
list-style: none;
}
View editorThemeColoperPicker.controller.js
function EditorThemeColorPickerController($scope,localizationService, contentResource){
var contentId;
//Figure out whether we're working locally or live...surely this can be done a better way? But does not seem that it's possible to lookup aliases using the API's currently :-/
if(location.hostname.indexOf('localhost') === 0){
contentId = 1920;
} else{
contentId = 2123;
}