yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new preview UI prototype

Browse Source
This commit is contained in:
Niels Lyngsø
2019-12-10 09:40:41 +01:00
parent 29ff95323c
commit 6c0cb723c6
3 changed files with 216 additions and 1012 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1044
src/Umbraco.Web.UI.Client/src/less/canvas-designer.less
View File

File diff suppressed because it is too large Load Diff

30
src/Umbraco.Web.UI.Client/src/preview/preview.controller.js
View File

@@ -7,6 +7,10 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi
.controller("previewController", function ($scope, $window, $location) {
console.log($scope);
//gets a real query string value
function getParameterByName(name, url) {
if (!url) url = $window.location.href;
@@ -75,12 +79,13 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi
$scope.valueAreLoaded = false;
$scope.devices = [
{ name: "desktop", css: "desktop", icon: "icon-display", title: "Desktop" },
{ name: "laptop - 1366px", css: "laptop border", icon: "icon-laptop", title: "Laptop" },
{ name: "iPad portrait - 768px", css: "iPad-portrait border", icon: "icon-ipad", title: "Tablet portrait" },
{ name: "iPad landscape - 1024px", css: "iPad-landscape border", icon: "icon-ipad flip", title: "Tablet landscape" },
{ name: "smartphone portrait - 480px", css: "smartphone-portrait border", icon: "icon-iphone", title: "Smartphone portrait" },
{ name: "smartphone landscape - 320px", css: "smartphone-landscape border", icon: "icon-iphone flip", title: "Smartphone landscape" }
{ name: "fullsize", css: "fullsize", icon: "icon-application-window-alt", title: "Browser" },
{ name: "desktop", css: "desktop shadow", icon: "icon-display", title: "Desktop" },
{ name: "laptop - 1366px", css: "laptop shadow", icon: "icon-laptop", title: "Laptop" },
{ name: "iPad portrait - 768px", css: "iPad-portrait shadow", icon: "icon-ipad", title: "Tablet portrait" },
{ name: "iPad landscape - 1024px", css: "iPad-landscape shadow", icon: "icon-ipad flip", title: "Tablet landscape" },
{ name: "smartphone portrait - 480px", css: "smartphone-portrait shadow", icon: "icon-iphone", title: "Smartphone portrait" },
{ name: "smartphone landscape - 320px", css: "smartphone-landscape shadow", icon: "icon-iphone flip", title: "Smartphone landscape" }
];
$scope.previewDevice = $scope.devices[0];
@@ -189,4 +194,15 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi
.config(function ($locationProvider) {
$locationProvider.html5Mode(false); //turn html5 mode off
$locationProvider.hashPrefix('');
});
})
.controller('previewDropdownMenuController',
function ($element, $scope, angularHelper) {
var vm = this;
vm.onItemClicked = function (item) {
console.log("clicked", item)
};
}
)

154
src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml
View File

@@ -1,72 +1,82 @@
@using Umbraco.Core
@using ClientDependency.Core
@using ClientDependency.Core.Mvc
@using Umbraco.Core.IO
@using Umbraco.Web
@using Umbraco.Core.Configuration
@inherits System.Web.Mvc.WebViewPage<Umbraco.Web.Editors.BackOfficePreviewModel>
@{
var disableDevicePreview = Model.DisableDevicePreview.ToString().ToLowerInvariant();
Html
.RequiresCss("assets/css/canvasdesigner.css", "Umbraco");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Umbraco Preview</title>
<meta name="robots" content="noindex, nofollow">
<meta name="pinterest" content="nopin" />
@Html.RenderCssHere(
new BasicPath("Umbraco", IOHelper.ResolveUrl(SystemDirectories.Umbraco)))
</head>
<body id="canvasdesignerPanel" ng-mouseover="outlinePositionHide()" ng-controller="previewController">
<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}}">
<preview-i-frame src="pageUrl" on-loaded="onFrameLoaded(iframe)"></preview-i-frame>
</div>
<div class="canvasdesigner" ng-init="showDevicesPreview = true; showDevices = !@(disableDevicePreview);" 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 }">
<a ng-click="updatePreviewDevice(device)"><i class="icon {{device.icon}}" title="{{device.title}}"></i><span></span></a>
</li>
@if (Model.Languages != null && Model.Languages.Count() > 1)
{
foreach (var previewLink in Model.Languages)
{
<li ng-class="{ current:isCurrentCulture('@previewLink.IsoCode') }">
<a ng-click="changeCulture('@previewLink.IsoCode')" title="Preview in @previewLink.CultureName"><i class="icon icon-globe-europe---africa"></i><span>@previewLink.CultureName</span></a>
</li>
}
}
<li>
<a ng-click="exitPreview()" title="Exit Preview"><i class="icon icon-wrong"></i><span> </span></a>
</li>
</ul>
</div>
</div>
<script src="../lib/lazyload-js/lazyload.min.js"></script>
<script src="@Url.GetUrlWithCacheBust("Application", "Preview")"></script>
</body>
</html>
@using Umbraco.Core
@using ClientDependency.Core
@using ClientDependency.Core.Mvc
@using Umbraco.Core.IO
@using Umbraco.Web
@using Umbraco.Core.Configuration
@inherits System.Web.Mvc.WebViewPage<Umbraco.Web.Editors.BackOfficePreviewModel>
@{
var disableDevicePreview = Model.DisableDevicePreview.ToString().ToLowerInvariant();
Html.RequiresCss("assets/css/canvasdesigner.css", "Umbraco");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Umbraco Preview</title>
<meta name="robots" content="noindex, nofollow">
<meta name="pinterest" content="nopin" />
@Html.RenderCssHere(
new BasicPath("Umbraco", IOHelper.ResolveUrl(SystemDirectories.Umbraco)))
</head>
<body id="canvasdesignerPanel" ng-mouseover="outlinePositionHide()" ng-controller="previewController">
<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}}">
<preview-i-frame src="pageUrl" on-loaded="onFrameLoaded(iframe)"></preview-i-frame>
</div>
<div class="canvasdesigner" ng-init="showDevicesPreview = true; showDevices = !@(disableDevicePreview);" ng-mouseenter="positionSelectedHide()">
<div class="menu-bar selected">
<div class="menu-bar--title">Preview Mode</div>
<div class="menu-bar--right-part">
<div controller="previewDropdownMenuController" class="preview-menu-option">
<button class="menu-bar--button"><i class="icon {{previewDevice.icon}}"></i><span>{{previewDevice.title}}</span></button>
<div class="dropdown-menu">
<button ng-repeat="device in devices" class="menu-bar--button" ng-class="{ --active:previewDevice === device }" ng-click="updatePreviewDevice(device)">
<i class="icon {{device.icon}}"></i><span>{{device.title}}</span>
</button>
</div>
</div>
<div controller="previewDropdownMenuController" class="preview-menu-option">
<button class="menu-bar--button"><i class="icon icon-globe-europe---africa"></i><span>Desktop</span></button>
<div class="dropdown-menu">
@if (Model.Languages != null && Model.Languages.Count() > 1)
{
foreach (var language in Model.Languages)
{
<button class="menu-bar--button" ng-class="{ --active:isCurrentCulture('@language.IsoCode') }" ng-click="onItemClicked(device)">
<i class="icon icon-globe-europe---africa"></i><span>@language.CultureName</span>
</button>
}
}
</div>
</div>
<button ng-click="exitPreview()" title="Exit Preview" class="menu-bar--button"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><title>Click to end</title><path d="M5273.1 2400.1v-2c0-2.8-5-4-9.7-4s-9.7 1.3-9.7 4v2a7 7 0 002 4.9l5 4.9c.3.3.4.6.4 1v6.4c0 .4.2.7.6.8l2.9.9c.5.1 1-.2 1-.8v-7.2c0-.4.2-.7.4-1l5.1-5a7 7 0 002-4.9zm-9.7-.1c-4.8 0-7.4-1.3-7.5-1.8.1-.5 2.7-1.8 7.5-1.8s7.3 1.3 7.5 1.8c-.2.5-2.7 1.8-7.5 1.8z"></path><path d="M5268.4 2410.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1h-4.3zM5272.7 2413.7h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1zM5272.7 2417h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1 0-.5-.4-1-1-1z"></path><path d="M78.2 13l-8.7 11.7a32.5 32.5 0 11-51.9 25.8c0-10.3 4.7-19.7 12.9-25.8L21.8 13a47 47 0 1056.4 0z"></path><path d="M42.7 2.5h14.6v49.4H42.7z"></path></svg><span>Exit</span>
</button>
</div>
</div>
</div>
<script src="../lib/lazyload-js/lazyload.min.js"></script>
<script src="@Url.GetUrlWithCacheBust("Application", "Preview")"></script>
</body>
</html>