New tab and placeholder styling
This commit is contained in:
Mads Rasmussen
@@ -1,4 +1,3 @@
|
||||
|
||||
.editors-document-type-container{
|
||||
|
||||
.handle{visibility: hidden;}
|
||||
@@ -20,48 +19,12 @@
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
|
||||
.tab-title{
|
||||
padding: 0 25px 0 25px;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -36px;
|
||||
height: 34px;
|
||||
background: white;
|
||||
border: 2px solid #cccccc;
|
||||
border-bottom: none;
|
||||
border-radius: 5px 5px 0 0;
|
||||
-webkit-transition: width 0.5s; /* Safari */
|
||||
transition: width 0.5s;
|
||||
font-weight: bold;
|
||||
.tab-title-input {
|
||||
border-color: #ffffff;
|
||||
width: 27px;
|
||||
font-weight: bold;
|
||||
&:hover {
|
||||
border-color: @inputBorder;
|
||||
}
|
||||
}
|
||||
.tab-title-text {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.editors-document-type-canvas{
|
||||
/*
|
||||
min-height: 200px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
*/
|
||||
padding: 40px 80px;
|
||||
|
||||
@media screen and (max-width: 1500px) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.editors-document-type-sidebar{
|
||||
@@ -83,305 +46,349 @@
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.edt-props-sortable{min-height: 5px}
|
||||
/* ---------- TABS ---------- */
|
||||
|
||||
.properties-placeholder{
|
||||
//text-align: center;
|
||||
background: @grayLighter;
|
||||
border: 1px dashed @grayLight;
|
||||
padding: 20px;
|
||||
margin: 30px 20px 30px 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* ---------- TABS ---------- */
|
||||
|
||||
.edt-tab{
|
||||
margin: 50px 20px 70px 20px;
|
||||
border: 2px solid #cccccc;
|
||||
padding: 0;
|
||||
box-shadow: 0 5px 1px 0 rgba(0,0,0,0.1);
|
||||
border-radius: 0 5px 5px 5px;
|
||||
&:hover {
|
||||
.edt-tab{
|
||||
margin: 50px 20px 70px 20px;
|
||||
min-height: 145px;
|
||||
border: 2px solid #454A52;
|
||||
padding: 0;
|
||||
box-shadow: 0 3px 0px 0 rgba(0,0,0,0.1);
|
||||
border-radius: 0 10px 10px 10px;
|
||||
&:hover {
|
||||
.edt-tab-actions {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.5s; /* Safari */
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
}
|
||||
.edt-tab-actions {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.5s; /* Safari */
|
||||
transition: opacity 0.5s;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
.tab-action {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.edt-tab-actions {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
.tab-action {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edt-tab-center-text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.edt-tab:hover > h4 > .handle{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.edt-property-group{
|
||||
position: relative;
|
||||
padding: 60px 20px 0 20px;
|
||||
}
|
||||
|
||||
.edt-property-group:hover > h5 > .handle{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.edt-property-group-sizer{
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
right: -10px;
|
||||
width: 15px;
|
||||
position: absolute;
|
||||
cursor: e-resize;
|
||||
}
|
||||
|
||||
.span12 .edt-property-group-sizer{
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
|
||||
.edt-props-sortable{
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
// tab is in init state
|
||||
.edt-tab.tab-state-init {
|
||||
cursor: pointer;
|
||||
border: 2px dashed @grayLight;
|
||||
height: 100px;
|
||||
box-shadow: none !important;
|
||||
.tab-title{
|
||||
border: 2px dashed @grayLight;
|
||||
padding: 10px 25px 0 25px;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -50px;
|
||||
height: 38px;
|
||||
background: white;
|
||||
border: 2px solid #454A52;
|
||||
border-bottom: none;
|
||||
}
|
||||
&:hover {
|
||||
//border-style: solid;
|
||||
.tab-title {
|
||||
//border-style: solid;
|
||||
//border-bottom-style: none;
|
||||
border-radius: 10px 10px 0 0;
|
||||
font-weight: bold;
|
||||
.tab-title-input {
|
||||
border-color: #ffffff;
|
||||
min-width: 80px;
|
||||
font-weight: bold;
|
||||
color: #515151;
|
||||
margin-bottom: 0;
|
||||
height: 25px !important;
|
||||
&:hover {
|
||||
border-color: @inputBorder;
|
||||
}
|
||||
&.tab-title-placeholder {
|
||||
border: 1px dashed #979797 !important;
|
||||
}
|
||||
}
|
||||
.tab-title-text {
|
||||
position: relative;
|
||||
top: 7px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.edt-tab-center-text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #00759D;
|
||||
}
|
||||
|
||||
// tab is in init state
|
||||
.edt-tab.tab-state-init {
|
||||
cursor: pointer;
|
||||
border: 2px dashed @grayLight;
|
||||
box-shadow: none !important;
|
||||
-webkit-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
.tab-title{
|
||||
border: 2px dashed @grayLight;
|
||||
border-bottom: none;
|
||||
width: 70px;
|
||||
}
|
||||
&:hover {
|
||||
border-color: @blueLight;
|
||||
.tab-title {
|
||||
border-color: @blueLight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// tab is active
|
||||
.edt-tab.tab-state-active {
|
||||
// tab is active
|
||||
.edt-tab.tab-state-active {
|
||||
border-color: @blue;
|
||||
|
||||
.tab-title{
|
||||
border-color: @blue;
|
||||
}
|
||||
|
||||
.edt-property-group{
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.edt-property {
|
||||
margin-bottom: 20px
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// tab is inactive
|
||||
.edt-tab.tab-state-inactive {
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
.edt-property-group{
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.edt-property {
|
||||
height: 50px;
|
||||
margin-bottom: 10px;
|
||||
background: @grayLighter;
|
||||
color: @grayDarker;
|
||||
border-radius: @baseBorderRadius;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.edt-property-meta {
|
||||
margin: 15px 0 0 10px;
|
||||
}
|
||||
|
||||
.edt-property-actions {
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
margin: 7px 10px 0 0;
|
||||
.property-action {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-sortable-placeholder {
|
||||
height: 50px !important;
|
||||
padding: 0 !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.edt-property-actions {
|
||||
.property-action {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* ---------- PROPERTY ---------- */
|
||||
|
||||
.edt-property-group{
|
||||
padding-top: 60px;
|
||||
position: relative;
|
||||
padding: 60px 20px 0 20px;
|
||||
}
|
||||
|
||||
.edt-property {
|
||||
margin-bottom: 20px
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// tab is inactive
|
||||
.edt-tab.tab-state-inactive {
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
.edt-property-group{
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.edt-property {
|
||||
height: 50px;
|
||||
margin-bottom: 10px;
|
||||
background: @grayLighter;
|
||||
color: @grayDarker;
|
||||
border-radius: @baseBorderRadius;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
.edt-property{
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
.edt-property-meta {
|
||||
margin: 15px 0 0 10px;
|
||||
}
|
||||
|
||||
.edt-property-actions {
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
margin: 7px 10px 0 0;
|
||||
.property-action {
|
||||
width: 300px;
|
||||
margin-right: 50px;
|
||||
.property-meta-group {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-sortable-placeholder {
|
||||
height: 50px !important;
|
||||
padding: 0 !important;
|
||||
margin-bottom: 10px;
|
||||
.edt-property-preview{
|
||||
flex: 2;
|
||||
max-height: 100px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.edt-property-actions {
|
||||
.property-action {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* ---------- PROPERTY ---------- */
|
||||
|
||||
.edt-property{
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
padding: 20px 30px;
|
||||
/*
|
||||
&:hover,
|
||||
&.active {
|
||||
.edt-property-preview:after {
|
||||
content:"";
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
background: @grayLighter;
|
||||
-webkit-transition: background 0.5s;
|
||||
transition: background 0.5s;
|
||||
opacity: 0.3;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
// property state init - property placeholder
|
||||
.edt-property.property-state-init {
|
||||
border: 2px dashed @grayLight;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.edt-property-meta {
|
||||
width: 300px;
|
||||
.property-meta-group {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.edt-property-inner{
|
||||
flex: 2;
|
||||
max-height: 100px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
/*
|
||||
opacity: 0.7;
|
||||
padding: 10px;
|
||||
border: 1px dashed @grayLight;
|
||||
*/
|
||||
/*
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
.edt-property-inner-overlay {
|
||||
display: block;
|
||||
.edt-property-preview-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
background: rgba(0,0,0,0.1);
|
||||
.overlay-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: @grayDark;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
*/
|
||||
div {
|
||||
padding-top: 10px;
|
||||
|
||||
.edt-property-preview-label{
|
||||
font-size: 11px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-transform: uppercase;
|
||||
z-index: 15;
|
||||
background: @grayLighter;
|
||||
padding: 3px;
|
||||
line-height: 12px;
|
||||
opacity: 0.8
|
||||
}
|
||||
}
|
||||
|
||||
.edt-property-actions {
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.edt-property:hover {
|
||||
.edt-property-actions {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.5s; /* Safari */
|
||||
transition: opacity 0.5s;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
margin: 15px 0 0 0;
|
||||
.property-action {
|
||||
margin: 0 0 5px 0;
|
||||
display: block;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon {
|
||||
font-size: 25px;
|
||||
color: @gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edt-property-inner-overlay {
|
||||
background-color: @grayLighter;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
.overlay-text {
|
||||
// property state init - property placeholder
|
||||
.edt-property.property-state-init {
|
||||
border: 2px dashed @grayLight;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
border-color: @blueLight;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ---------- INPUTS ---------- */
|
||||
|
||||
.invisible-field {
|
||||
input,
|
||||
textarea {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.edt-property-meta-alias {
|
||||
input {
|
||||
font-size: 12px;
|
||||
color: @gray;
|
||||
border-color: #fff;
|
||||
margin-bottom: 0;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.edt-property-meta-label {
|
||||
input {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
border-color: #fff;
|
||||
margin-bottom: 0;
|
||||
color: @grayDarker;
|
||||
}
|
||||
}
|
||||
|
||||
.edt-property-meta-description {
|
||||
textarea {
|
||||
font-size: 12px;
|
||||
color: @grayDark;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ---------- PLACEHOLDERS ----------- */
|
||||
|
||||
.placeholder {
|
||||
background: @grayLight;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
color: @gray;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: @grayDark;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.edt-property-label{
|
||||
font-size: 11px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
text-transform: uppercase;
|
||||
z-index: 15;
|
||||
background: @grayLighter;
|
||||
padding: 3px;
|
||||
line-height: 12px;
|
||||
opacity: 0.8
|
||||
}
|
||||
|
||||
.edt-property-inner:after {
|
||||
content:"";
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
background: @grayLighter;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.invisible-input {
|
||||
border-color: transparent;
|
||||
&:hover {
|
||||
border-color: @inputBorder;
|
||||
.placeholder-input-small {
|
||||
background: @grayLight;
|
||||
display: block;
|
||||
height: 10px;
|
||||
margin-bottom: 5px;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder-input {
|
||||
background: @grayLight;
|
||||
display: block;
|
||||
height: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* ---------- PLACEHOLDERS ----------- */
|
||||
.placeholder {
|
||||
background: #e5e5e5;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
height: 50px;
|
||||
}
|
||||
.placeholder-text-group {
|
||||
.placeholder-text-line-full {
|
||||
background: @grayLight;
|
||||
display: block;
|
||||
height: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.placeholder-text-line-short {
|
||||
background: @grayLight;
|
||||
display: block;
|
||||
height: 5px;
|
||||
margin-bottom: 5px;
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder-input-small {
|
||||
background: #e5e5e5;
|
||||
display: block;
|
||||
height: 15px;
|
||||
width: 200px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.placeholder-input {
|
||||
background: #cccccc;
|
||||
display: block;
|
||||
height: 25px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
|
||||
|
||||
$scope.addTab = function(tab){
|
||||
|
||||
tab.tabState = "active";
|
||||
$scope.activateTab(tab);
|
||||
|
||||
// push new init tab to the scope
|
||||
addInitTab;
|
||||
@@ -45,7 +45,17 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
|
||||
};
|
||||
|
||||
$scope.activateTab = function(tab) {
|
||||
|
||||
// set all other tabs that are inactive to active
|
||||
angular.forEach($scope.contentType.groups, function(group){
|
||||
// skip init tab
|
||||
if(group.tabState !== "init") {
|
||||
group.tabState = "inActive";
|
||||
}
|
||||
});
|
||||
|
||||
tab.tabState = "active";
|
||||
|
||||
};
|
||||
|
||||
$scope.updateTabTitle = function(tab) {
|
||||
@@ -69,6 +79,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
|
||||
$scope.contentType.groups.push({
|
||||
groups: [],
|
||||
properties:[],
|
||||
name: "",
|
||||
tabState: "init"
|
||||
});
|
||||
}
|
||||
@@ -97,7 +108,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
|
||||
};
|
||||
*/
|
||||
|
||||
$scope.changePropertyName = function(property) {
|
||||
$scope.changePropertyLabel = function(property) {
|
||||
|
||||
var str = property.label;
|
||||
|
||||
@@ -172,10 +183,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
|
||||
$scope.dialogModel.dataTypes = $scope.dataTypes;
|
||||
$scope.dialogModel.view = "views/documentType/dialogs/property.html";
|
||||
|
||||
$scope.dialogModel.close = function(model){
|
||||
$scope.dialogModel = null;
|
||||
$scope.showDialog = false;
|
||||
};
|
||||
property.dialogIsOpen = true;
|
||||
|
||||
$scope.dialogModel.selectDataType = function(selectedDataType) {
|
||||
|
||||
@@ -201,6 +209,11 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
|
||||
|
||||
};
|
||||
|
||||
$scope.dialogModel.close = function(model){
|
||||
$scope.dialogModel = null;
|
||||
$scope.showDialog = false;
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
$scope.addItems = function(tab){
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<div class="edt-tab umb-card edt-tab-placeholder" ng-click="addTab(tab)" ng-show="tab.tabState=='init'" ng-class="{'tab-state-init animated fadeIn': tab.tabState=='init'}">
|
||||
|
||||
<div class="tab-title">
|
||||
<span class="tab-title-text">Tab</span>
|
||||
<span class="tab-title-text"></span>
|
||||
</div>
|
||||
|
||||
<div class="edt-tab-center-text">
|
||||
@@ -41,12 +41,8 @@
|
||||
|
||||
<div class="tab-title">
|
||||
|
||||
<!-- tab drag and drop handle
|
||||
<i ng-if="contentType.groups.length > 1" class="icon icon-navigation handle"></i>
|
||||
-->
|
||||
|
||||
<!-- show input when tab is active -->
|
||||
<input class="tab-title-input" type="text" ng-model="tab.name" ng-if="tab.tabState=='active'" ng-change="updateTabTitle(tab)" umb-blur="updateTabTitle(tab)" umb-auto-focus umb-auto-resize />
|
||||
<input class="tab-title-input" type="text" ng-model="tab.name" ng-if="tab.tabState=='active'" ng-class="{'tab-title-placeholder': tab.name == ''}" ng-change="updateTabTitle(tab)" umb-blur="updateTabTitle(tab)" umb-auto-focus umb-auto-resize />
|
||||
|
||||
<!-- show text when tab is inactive -->
|
||||
<span class="tab-title-text" ng-if="tab.tabState=='inActive'">{{ tab.name }}</span>
|
||||
@@ -69,43 +65,9 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<a href="" class="btn btn-link delete-tab" title="Delete tab" ng-click="deleteTab($index)">
|
||||
<i class="icon-trash"></i>
|
||||
</a>
|
||||
-->
|
||||
|
||||
<!--
|
||||
<div class="properties-placeholder" ng-if="tab.properties.length == 0 && tab.groups.length == 0 && tab.tabState=='active' && tab.name !== undefined">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lectus arcu.<br>
|
||||
<a href class="umb-btn-round" ng-click="addItems(tab)">
|
||||
<i class="icon-add"></i>
|
||||
</a>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!--
|
||||
<div class="edt-property properties-placeholder" ng-if="tab.properties.length == 0 && tab.groups.length == 0 && tab.tabState=='active' && tab.name !== undefined" ng-click="addItems(tab)">
|
||||
<div class="edt-property-meta">
|
||||
<div class="property-meta-group">
|
||||
<label><small>Label</small></label>
|
||||
<input type="text" />
|
||||
</div>
|
||||
<div class="property-meta-group">
|
||||
<label><small>Alias</small></label>
|
||||
<input type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="edt-property-inner">
|
||||
<span class="edt-property-label">Preview</span>
|
||||
</div>
|
||||
<div class="edt-property-actions"></div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
<div class="edt-property-group">
|
||||
<ul class="edt-props-sortable" ui-sortable="sortableOptionsEditor"
|
||||
<ul class="edt-props-sortable no-style-list" ui-sortable="sortableOptionsEditor"
|
||||
ng-model="tab.properties" class="no-style-list">
|
||||
<li ng-repeat="property in tab.properties">
|
||||
|
||||
@@ -115,17 +77,17 @@
|
||||
<div class="edt-property-meta">
|
||||
<div class="placeholder-input-small"></div>
|
||||
<div class="placeholder-input"></div>
|
||||
<div class="placeholder-text-group">
|
||||
<div class="placeholder-text-line-full"></div>
|
||||
<div class="placeholder-text-line-full"></div>
|
||||
<div class="placeholder-text-line-short"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edt-property-inner">
|
||||
|
||||
<div class="edt-property-preview">
|
||||
<div class="placeholder">
|
||||
<span class="edt-property-label">
|
||||
<span>Preview</span>
|
||||
</span>
|
||||
<span>Click to add property</span>
|
||||
<span class="placeholder-text">Add property</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="edt-property-actions"></div>
|
||||
@@ -134,9 +96,6 @@
|
||||
|
||||
<div class="edt-property" ng-show="property.propertyState!=='init'" ng-class="{'active': property.dialogIsOpen, 'property-state-active animated fadeIn': property.propertyState=='active'}">
|
||||
|
||||
<!-- property drag and drop
|
||||
<i class="icon icon-navigation edt-property-handle"></i>
|
||||
-->
|
||||
|
||||
<!-- property meta text -->
|
||||
<div class="edt-property-meta">
|
||||
@@ -144,14 +103,16 @@
|
||||
<!-- if tab is active -->
|
||||
<div ng-if="tab.tabState=='active'">
|
||||
|
||||
<div class="property-meta-group">
|
||||
<label><small>Label <span ng-if="property.validation.mandatory">(required)<span>*</span></span></small></label>
|
||||
<input type="text" ng-model="property.label" ng-change="changePropertyName(property)" umb-focus="choosePropertyType(property)" />
|
||||
<div class="edt-property-meta-alias invisible-field">
|
||||
<input type="text" placeholder="Alias.." ng-model="property.alias">
|
||||
</div>
|
||||
|
||||
<div class="property-meta-group">
|
||||
<label><small>Alias</small></label>
|
||||
<input type="text" ng-model="property.alias" />
|
||||
<div class="edt-property-meta-label invisible-field">
|
||||
<input type="text" placeholder="Label.." ng-model="property.label" ng-change="changePropertyLabel(property)" />
|
||||
</div>
|
||||
|
||||
<div class="edt-property-meta-description invisible-field">
|
||||
<textarea ng-model="property.description" placeholder="Enter your description..."></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -165,13 +126,13 @@
|
||||
</div>
|
||||
|
||||
<!-- property preview -->
|
||||
<div tabindex="-1" class="edt-property-inner" ng-if="tab.tabState=='active'" ng-click="choosePropertyType(property)">
|
||||
<div tabindex="-1" class="edt-property-preview" ng-if="tab.tabState=='active'" ng-click="choosePropertyType(property)">
|
||||
|
||||
<span class="edt-property-inner-overlay">
|
||||
<span class="edt-property-preview-overlay">
|
||||
<span class="overlay-text">Choose property type</span>
|
||||
</span>
|
||||
|
||||
<span class="edt-property-label">
|
||||
<span class="edt-property-preview-label">
|
||||
<span ng-if="property.dataType.name !== undefined">{{property.dataType.name}}</span>
|
||||
<span ng-if="property.dataType.name == undefined">Preview</span>
|
||||
</span>
|
||||
@@ -183,39 +144,15 @@
|
||||
<!-- row tools -->
|
||||
<div tabindex="-1" class="edt-property-actions">
|
||||
|
||||
<!-- delete row -->
|
||||
<div class="property-action property-action-delete">
|
||||
<div href="" class="umb-btn-round umb-btn-round-small" ng-click="deleteProperty(tab, $index)">
|
||||
<i class="icon icon-trash"></i>
|
||||
</div>
|
||||
<!-- delete property -->
|
||||
<a href="" class="property-action property-action-delete" ng-click="deleteProperty(tab, $index)">
|
||||
<i class="icon icon-trash"></i>
|
||||
</a>
|
||||
|
||||
<!--
|
||||
<div class="iconBox"
|
||||
ng-click="deletePrompt = true">
|
||||
<span ng-if="deletePrompt">
|
||||
<localize key="general_areyousure"/>
|
||||
<a href="" ng-click="deleteProperty(tab, $index)"><localize key="general_yes"/></a>
|
||||
</span>
|
||||
|
||||
<i ng-if="!deletePrompt" class="icon icon-trash"></i>
|
||||
</div>
|
||||
-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="property-action property-action-move edt-property-handle">
|
||||
<div class="umb-btn-round umb-btn-round-small"
|
||||
href="">
|
||||
<i class="icon icon-navigation"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property-action property-action-edit" ng-if="property.propertyState !== 'init'">
|
||||
<div class="umb-btn-round umb-btn-round-small"
|
||||
ng-click="editPropertyTypeSettings(property)"
|
||||
href=""><i class="icon icon-settings"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- settings for property -->
|
||||
<a href="" class="property-action property-action-edit" ng-click="editPropertyTypeSettings(property)">
|
||||
<i class="icon icon-settings"></i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user