152 lines
8.5 KiB
Plaintext
152 lines
8.5 KiB
Plaintext
@using System.Web.Mvc.Html
|
|
@inherits System.Web.Mvc.WebViewPage<Umbraco.Web.Models.ContentEditing.BackOfficePreview>
|
|
@{
|
|
var disableDevicePreview = Model.DisableDevicePreview.ToString().ToLowerInvariant();
|
|
}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Umbraco Canvas Designer</title>
|
|
<link href="../assets/css/canvasdesigner.css" type="text/css" rel="stylesheet" />
|
|
<link href="../lib/spectrum/spectrum.css" type="text/css" rel="stylesheet" />
|
|
<link href="../lib/jquery-ui/jquery-ui-1.10.4.custom.min.css" type="text/css" rel="stylesheet" />
|
|
<meta name="robots" content="noindex, nofollow">
|
|
</head>
|
|
<body id="canvasdesignerPanel" ng-mouseover="outlinePositionHide()" ng-class="{ leftOpen: (showStyleEditor || showPalettePicker) && !showDevicesPreview }" ng-controller="Umbraco.canvasdesignerController">
|
|
<div class="wait" ng-show="!frameLoaded"></div>
|
|
|
|
@if (string.IsNullOrWhiteSpace(Model.PreviewExtendedHeaderView) == false)
|
|
{
|
|
@Html.Partial(Model.PreviewExtendedHeaderView)
|
|
}
|
|
|
|
<div id="demo-iframe-wrapper" class="{{previewDevice.css}}">
|
|
<iframe id="resultFrame" ng-src="{{pageUrl}}" frameborder="0" iframe-is-loaded></iframe>
|
|
</div>
|
|
<div class="canvasdesigner" ng-init="showDevicesPreview = true; showDevices = !@(disableDevicePreview); showPalettePicker = true" ng-mouseenter="positionSelectedHide()">
|
|
<div class="fix-left-menu selected">
|
|
<div class="avatar">
|
|
<img ng-src="../assets/img/application/logo.png"
|
|
ng-srcset="../assets/img/application/logo@2x.png 2x,
|
|
../assets/img/application/logo@3x.png 3x" />
|
|
</div>
|
|
<ul class="sections" ng-class="{selected: showDevicesPreview && showDevices}">
|
|
<li ng-repeat="device in devices" ng-class="{ current:previewDevice==device }" ng-click="updatePreviewDevice(device)">
|
|
<a href="#"><i class="icon {{device.icon}}" title="{{device.title}}"></i><span></span></a>
|
|
</li>
|
|
<li ng-click="closePreviewDevice()" ng-if="enableCanvasdesigner > 0">
|
|
<a href="" class="more-options">
|
|
<i></i>
|
|
<i></i>
|
|
<i></i>
|
|
</a>
|
|
</li>
|
|
<li ng-click="exitPreview()">
|
|
<a href="#" title="Exit Preview"><i class="icon icon-wrong"></i><span> </span></a>
|
|
</li>
|
|
</ul>
|
|
<ul class="sections" ng-class="{selected: !showDevicesPreview}" ng-if="enableCanvasdesigner > 0">
|
|
<li ng-click="openPreviewDevice()">
|
|
<a href="#"><i class="icon {{previewDevice.icon}}"></i><span>Preview</span></a>
|
|
</li>
|
|
<li ng-click="openPalettePicker()" ng-class=" { current:showPalettePicker }">
|
|
<a href="#"><i class="icon icon-palette"></i><span>Palette</span></a>
|
|
</li>
|
|
<li ng-click="openStyleEditor()" ng-class=" { current:showStyleEditor }">
|
|
<a href="#"><i class="icon icon-paint-roller"></i><span>UI Designer</span></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="main-panel" ng-class="{selected: !showDevicesPreview && ( showPalettePicker || showStyleEditor )}">
|
|
<div class="header">
|
|
<h3>Palette Style</h3>
|
|
</div>
|
|
<div class="content">
|
|
<ul class="samples">
|
|
<li ng-repeat="palette in canvasdesignerPalette">
|
|
<a href="#" ng-click="refreshCanvasdesignerByPalette(palette)">
|
|
<h4>{{palette.name}}</h4>
|
|
<ul class="samples">
|
|
<li style="background-color:{{palette.color1}}"></li>
|
|
<li style="background-color:{{palette.color2}}"></li>
|
|
<li style="background-color:{{palette.color3}}"></li>
|
|
<li style="background-color:{{palette.color4}}"></li>
|
|
<li style="background-color:{{palette.color5}}"></li>
|
|
</ul>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-success" ng-click="saveStyle()">Save Style</a>
|
|
<a class="btn btn-success dropdown-toggle" ng-click="opendropdown = !opendropdown">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<ul class="dropdown-menu" ng-init="opendropdown = false" ng-show="opendropdown">
|
|
<li><a ng-click="createStyle();opendropdown = false">Create Page Style</a></li>
|
|
<li><a ng-click="deleteCanvasdesigner();opendropdown = false">Reset page style</a></li>
|
|
<li><a ng-click="makePreset();opendropdown = false">Make preset</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="main-panel" ng-class="{selected: !showDevicesPreview && showStyleEditor}">
|
|
<div ng-show="!currentSelected">
|
|
<div class="header">
|
|
<h3>Select</h3>
|
|
</div>
|
|
<div class="content">
|
|
<ul class="samples">
|
|
<li ng-repeat="configItem in canvasdesignerModel.configs"
|
|
ng-mousemove="refreshOutlinePosition(configItem)"
|
|
ng-class="{hover: configItem.highlighted == true}"
|
|
ng-mouseenter="setCurrentHighlighted(configItem)"
|
|
ng-mouseleave="configItem.highlighted = false"
|
|
ng-click="setCurrentSelected(configItem)">
|
|
{{configItem.name}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div ng-repeat="configItem in canvasdesignerModel.configs" ng-show="currentSelected && currentSelected.name.toLowerCase() == configItem.name.toLowerCase()
|
|
&& currentSelected.schema.toLowerCase() == configItem.schema.toLowerCase()" on-finish-render-filters>
|
|
<div class="header">
|
|
<h3><i class="icon icon-list" ng-click="outlineSelectedHide()"></i> {{configItem.name}}</h3>
|
|
</div>
|
|
<div class="content">
|
|
<div class="editor-category" ng-repeat="category in getCategories(configItem)" ng-show="hasEditor(configItem.editors, category)">
|
|
<h4 class="panel-title" ng-click="setSelectedCategory(category)">
|
|
{{category}}
|
|
<i class="icon icon-remove small right" ng-show="categoriesVisibility[category] === true"></i>
|
|
<i class="icon icon-add small right" ng-hide="categoriesVisibility[category] === true"></i>
|
|
</h4>
|
|
<div class="canvasdesigner-panel-container" ng-show="categoriesVisibility[category] === true">
|
|
<div class="canvasdesigner-panel-property" ng-repeat="item in configItem.editors" ng-show="item.category == category">
|
|
<h5>{{item.name}} <i class="icon icon-help-alt"></i></h5>
|
|
<div ng-include="'../preview/editors/' + item.type + '.html'"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-success" ng-click="saveStyle()">Save Style</a>
|
|
<a class="btn btn-success dropdown-toggle" ng-click="opendropdown = !opendropdown">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<ul class="dropdown-menu" ng-init="opendropdown = false" ng-show="opendropdown">
|
|
<li><a ng-click="createStyle();opendropdown = false">Create Page Style</a></li>
|
|
<li><a ng-click="deleteCanvasdesigner();opendropdown = false">Reset page style</a></li>
|
|
<li><a ng-click="makePreset();opendropdown = false">Make preset</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="float-panel"></div>
|
|
</div>
|
|
<div id="speechbubble">
|
|
<p>Styles saved and published</p>
|
|
</div>
|
|
<script src="../lib/rgrove-lazyload/lazyload.js"></script>
|
|
<script src="../js/canvasdesigner.loader.js"></script>
|
|
</body>
|
|
</html>
|