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

devices preview better look

Browse Source 
tested in chrome/firefox/IE
This commit is contained in:
antoine
2014-05-14 18:37:44 +02:00
parent 8cda6e4062
commit 4f34fbd2c8
8 changed files with 241 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/Umbraco.Web.UI.Client/preview/index.html
View File

@@ -23,6 +23,10 @@
<i ng-if="!isOpen" class="icon icon-right-double-arrow"></i>
</div>
<div ng-if="isOpen" ng-click="settingOpen('previewDevice')" ng-class="{selected:settingIsOpen=='previewDevice'}">
<i class="icon icon-display"></i>
</div>
<div ng-if="isOpen" ng-click="settingOpen('setting')" ng-class="{selected:settingIsOpen=='setting'}">
<i class="icon icon-paint-roller"></i>
</div>
@@ -31,14 +35,36 @@
<i class="icon icon-palette"></i>
</div>
<div ng-if="isOpen" ng-click="settingOpen('previewDevice')" ng-class="{selected:settingIsOpen=='previewDevice'}">
<i class="icon icon-iphone"></i>
</div>
</div>
<div class="tuning-wrapper">
<div ng-show="settingIsOpen == 'previewDevice'">
<h2>DEVICES</h2>
<ul class="preview-device">
<li ng-class="{selected:previewDevice=='desktop'}" ng-click="updatePreviewDevice('desktop')">
<div><i class="icon icon-display"></i><span>desktop</span></div>
</li>
<li ng-class="{selected:previewDevice=='laptop border'}" ng-click="updatePreviewDevice('laptop border')">
<div><i class="icon icon-laptop"></i><span>laptop - 1024px</span></div> <!--height: 144px; width: 1024px-->
</li>
<li ng-class="{selected:previewDevice=='iPad-portrait border'}" ng-click="updatePreviewDevice('iPad-portrait border')">
<div><i class="icon icon-ipad"></i><span>iPad portrait - 768px</span></div> <!--width: 768px; height: 929px;-->
</li>
<li ng-class="{selected:previewDevice=='iPad-landscape border'}" ng-click="updatePreviewDevice('iPad-landscape border')">
<div><i class="icon icon-ipad flip"></i><span>iPad landscape - 1024px</span></div> <!--height: 675px; width: 1024px;-->
</li>
<li ng-class="{selected:previewDevice=='smartphone-portrait border'}" ng-click="updatePreviewDevice('smartphone-portrait border')">
<div><i class="icon icon-iphone"></i><span>smartphone portrait - 480px</span></div> <!--width: 320px; height: 504px;-->
</li>
<li ng-class="{selected:previewDevice=='smartphone-landscape border'}" ng-click="updatePreviewDevice('smartphone-landscape border')">
<div><i class="icon icon-iphone flip"></i><span>smartphone landscape - 320px</span></div> <!--width: 480px; height: 256px;-->
</li>
</ul>
</div>
<div ng-show="settingIsOpen == 'setting'">
<tabset vertical="false">
@@ -126,6 +152,8 @@
</tabset>
<button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
</div>
<div ng-show="settingIsOpen == 'presetColors'">
@@ -147,34 +175,10 @@
</tabset>
</div>
<div ng-show="settingIsOpen == 'previewDevice'">
<tabset vertical="false">
<tab heading="Preview device">
<ul class="preview-device">
<li style=" color:white" ng-click="updatePreviewDevice('desktop')">
<i class="icon icon-display"></i><span>desktop</span>
</li>
<li style="color:white" ng-click="updatePreviewDevice('tablet')">
<i class="icon icon-ipad"></i><span>tablet</span>
</li>
<li style="color:white" ng-click="updatePreviewDevice('mobile')">
<i class="icon icon-iphone"></i><span>mobile</span>
</li>
</ul>
</tab>
</tabset>
<button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
</div>
<button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
</div>
<script type="text/ng-template" id="myModalContent.html">

224
src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less
View File

@@ -3,56 +3,61 @@ html {
}
body {
height: 100%;
padding: 0;
margin: 0;
text-align: center;
background-color: #fafbfd;
height: 100%;
padding: 0;
margin: 0;
text-align: center;
background-color: #fafbfd;
}
h2 {
color: #d9d9d9;
text-align: center;
font-size: 14px;
}
.tuning #TuningBg {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 275px;
height: 100%;
padding: 10px 5px 10px 10px;
margin-left: -275px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 16px;
background: rgba(29, 29, 29, 0.91);
-webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0);
-moz-box-shadow: 0 0 14px rgba(0, 0, 0, 0);
box-shadow: 0 0 14px rgba(0, 0, 0, 0);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 275px;
height: 100%;
padding: 10px 0 10px 0;
margin-left: -275px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 16px;
background: #1D1D1D;
-webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0);
-moz-box-shadow: 0 0 14px rgba(0, 0, 0, 0);
box-shadow: 0 0 14px rgba(0, 0, 0, 0);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tuning .tuning-wrapper {
height: 100%;
padding: 0 5px 0 0;
overflow-y: auto;
text-align: left;
height: 100%;
overflow-y: auto;
text-align: left;
}
.tuning #TuningBg.open {
margin-left: 0;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
margin-left: 0;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.tuning .colpick {
z-index: 99999999;
z-index: 99999999;
}
.tuning .nav {
margin-bottom: 10px;
color: #ffffff;
border-bottom: 1px solid #f57020;
margin-bottom: 10px;
color: #ffffff;
border-bottom: 1px solid #f57020;
}
.tuning .nav-tabs > li.active > a,
@@ -307,24 +312,24 @@ body {
}
.tuning .tuning-tools div {
display: block;
padding: 8px 10px 8px 10px;
margin: 5px 0 0 0;
font-size: 14px;
color: rgba(255, 255, 255, 0.4);
cursor: pointer;
background: rgba(41, 41, 41, 0.84);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
display: block;
padding: 8px 8px 8px 9px;
margin: 5px 0 0 0;
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
background: #353535;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.tuning .tuning-tools div:hover,
.tuning .tuning-tools div.selected {
color: #ffffff;
background: rgba(29, 29, 29, 0.91);
color: rgba(255, 255, 255, 0.8);
background: #1D1D1D;
}
.tuningImagePicker {
@@ -473,78 +478,105 @@ body {
/******* IFRAME *******/
.desktop {
width: 100%;
height: 100%;
margin: 0 auto;
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.tablet {
width: 1040px;
height: 757px;
margin: 75px auto;
background-color: #ffffff;
border-radius: 10px;
opacity: 1.0;
box-shadow: 0 0 0 29px #fff, 0 0 0 30px #dee0e3;
transition: all 0.5s ease-in-out;
.laptop {
width: 1024px;
height: 740px;
}
.mobile {
width: 350px;
height: 568px;
margin: 75px auto;
background-color: #ffffff;
border-radius: 10px;
opacity: 1.0;
box-shadow: 0 0 0 29px #fff, 0 0 0 30px #dee0e3;
transition: all 0.5s ease-in-out;
.iPad-portrait {
width: 769px;
height: 929px;
}
.iPad-landscape {
width: 1024px;
height: 675px;
}
.smartphone-portrait {
width: 320px;
height: 504px;
}
.smartphone-landscape {
width: 480px;
height: 256px;
}
.border {
margin: 75px auto;
background-color: #ffffff;
border-radius: 10px;
opacity: 1.0;
box-shadow: 0 0 0 29px #fff, 0 0 0 30px #dee0e3;
transition: all 0.5s ease-in-out;
}
iframe {
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
.flip:before {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
/******* preview-device *******/
ul.preview-device {
padding: 0;
margin: 0;
list-style: none;
padding: 0;
margin: 0;
list-style: none;
border-top: 1px solid #343434;
}
ul.preview-device li {
display: block;
margin: 20px 0 0 20px;
clear: both;
color: rgba(255, 255, 255, 0.8);
color: white;
cursor: pointer;
display: block;
overflow: hidden;
clear: both;
text-align: center;
cursor: pointer;
border-left: 4px solid transparent;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
transition: all .3s linear;
}
ul.preview-device li div {
border-bottom: 1px solid #343434;
padding: 10px;
}
ul.preview-device li:hover,
ul.preview-device li.selected {
margin: 20px 0 0 20px;
color: #ffffff;
background-color: rgba(255, 255, 255, 0.09);
border-left: 4px #f57020 solid;
}
ul.preview-device li i {
float: left;
margin: 20px 0 0 20px;
font-size: 40px;
color:#d9d9d9;
font-size: 80px;
line-height: 80px;
}
ul.preview-device li span {
display: inline-block;
float: left;
margin: 17px 0 0 10px;
color:#d9d9d9;
display: block;
}
/******* font-face *******/

62
src/Umbraco.Web.UI.Client/src/tuning/index.html
View File

@@ -23,6 +23,10 @@
<i ng-if="!isOpen" class="icon icon-right-double-arrow"></i>
</div>
<div ng-if="isOpen" ng-click="settingOpen('previewDevice')" ng-class="{selected:settingIsOpen=='previewDevice'}">
<i class="icon icon-display"></i>
</div>
<div ng-if="isOpen" ng-click="settingOpen('setting')" ng-class="{selected:settingIsOpen=='setting'}">
<i class="icon icon-paint-roller"></i>
</div>
@@ -31,14 +35,36 @@
<i class="icon icon-palette"></i>
</div>
<div ng-if="isOpen" ng-click="settingOpen('previewDevice')" ng-class="{selected:settingIsOpen=='previewDevice'}">
<i class="icon icon-iphone"></i>
</div>
</div>
<div class="tuning-wrapper">
<div ng-show="settingIsOpen == 'previewDevice'">
<h2>DEVICES</h2>
<ul class="preview-device">
<li ng-class="{selected:previewDevice=='desktop'}" ng-click="updatePreviewDevice('desktop')">
<div><i class="icon icon-display"></i><span>desktop</span></div>
</li>
<li ng-class="{selected:previewDevice=='laptop border'}" ng-click="updatePreviewDevice('laptop border')">
<div><i class="icon icon-laptop"></i><span>laptop - 1024px</span></div> <!--height: 144px; width: 1024px-->
</li>
<li ng-class="{selected:previewDevice=='iPad-portrait border'}" ng-click="updatePreviewDevice('iPad-portrait border')">
<div><i class="icon icon-ipad"></i><span>iPad portrait - 768px</span></div> <!--width: 768px; height: 929px;-->
</li>
<li ng-class="{selected:previewDevice=='iPad-landscape border'}" ng-click="updatePreviewDevice('iPad-landscape border')">
<div><i class="icon icon-ipad flip"></i><span>iPad landscape - 1024px</span></div> <!--height: 675px; width: 1024px;-->
</li>
<li ng-class="{selected:previewDevice=='smartphone-portrait border'}" ng-click="updatePreviewDevice('smartphone-portrait border')">
<div><i class="icon icon-iphone"></i><span>smartphone portrait - 480px</span></div> <!--width: 320px; height: 504px;-->
</li>
<li ng-class="{selected:previewDevice=='smartphone-landscape border'}" ng-click="updatePreviewDevice('smartphone-landscape border')">
<div><i class="icon icon-iphone flip"></i><span>smartphone landscape - 320px</span></div> <!--width: 480px; height: 256px;-->
</li>
</ul>
</div>
<div ng-show="settingIsOpen == 'setting'">
<tabset vertical="false">
@@ -126,6 +152,8 @@
</tabset>
<button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
</div>
<div ng-show="settingIsOpen == 'presetColors'">
@@ -147,34 +175,10 @@
</tabset>
</div>
<div ng-show="settingIsOpen == 'previewDevice'">
<tabset vertical="false">
<tab heading="Preview device">
<ul class="preview-device">
<li style=" color:white" ng-click="updatePreviewDevice('desktop')">
<i class="icon icon-display"></i><span>desktop</span>
</li>
<li style="color:white" ng-click="updatePreviewDevice('tablet')">
<i class="icon icon-ipad"></i><span>tablet</span>
</li>
<li style="color:white" ng-click="updatePreviewDevice('mobile')">
<i class="icon icon-iphone"></i><span>mobile</span>
</li>
</ul>
</tab>
</tabset>
<button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
</div>
<button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
</div>
<script type="text/ng-template" id="myModalContent.html">

12
src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js
View File

@@ -12,8 +12,7 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
$scope.isOpen = false;
$scope.frameLoaded = false;
$scope.schemaFocus = "body";
$scope.settingIsOpen = 'setting';
$scope.previewDevice = 'desktop';
$scope.settingIsOpen = 'previewDevice';
$scope.BackgroundPositions = ['center', 'left', 'right', 'bottom center', 'bottom left', 'bottom right', 'top center', 'top left', 'top right'];
$scope.BackgroundRepeats = ['no-repeat', 'repeat', 'repeat-x', 'repeat-y'];
$scope.BackgroundAttachments = ['scroll', 'fixed'];
@@ -22,6 +21,15 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
$scope.optionHomes = ['icon', 'text', 'none'];
$scope.googleFontFamilies = {};
$scope.pageId = "../dialogs/Preview.aspx?id=" + $location.search().id;
$scope.devices = [
{ name: "desktop", css: "desktop", icon: "icon-display" },
{ name: "laptop - 1024px", css: "laptop border", icon: "icon-laptop" },
{ name: "iPad portrait - 768px", css: "iPad-portrait border", icon: "icon-ipad" },
{ name: "iPad landscape - 1024px", css: "iPad-landscape border", icon: "icon-ipad flip" },
{ name: "smartphone portrait - 480px", css: "smartphone-portrait border", icon: "icon-iphone" },
{ name: "smartphone landscape - 320px", css: "smartphone-landscape border", icon: "icon-iphone flip" }
];
$scope.previewDevice = $scope.devices[0];
// Load parameters from GetLessParameters and init data of the tuning config
var initTuning = function () {

4
src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js
View File

@@ -73,6 +73,8 @@ var initIntelTuning = function (tuningModel) {
}
var initTuningPanel = function () {
// Disable tuning.style.css
var styleSheets = document.styleSheets;
var href = 'tuning.style.css';
for (var i = 0; i < styleSheets.length; i++) {
@@ -81,6 +83,8 @@ var initTuningPanel = function () {
break;
}
}
// Init panel
parent.setFrameIsLoaded();
}