tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add overflow property

pull/36/head
Artur Arseniev 10 years ago
parent
b9c14c1990
commit
0aabc01389
3 changed files with 135 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 119
      index.html
  2. 12
      src/style_manager/model/PropertyFactory.js
  3. 13
      test/specs/style_manager/model/Models.js

119
index.html
View File

@ -27,10 +27,30 @@
<div class="clearfix"></div>
<div class="lead-title">Build your templates without coding</div>
<div class="sub-lead-title">All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel</div>
<div class="lead-btn">Try it now</div>
<div class="lead-btn">Hover me</div>
</div>
</header>
<section class="flex-sect">
<div class="container-width">
<div class="cards">
<div class="card">
<div class="card-header"></div>
<div class="card-body">
<div class="card-title">Title one</div>
<div class="card-sub-title">Subtitle one</div>
<div class="card-desc">You can create image blocks with the command from the left panel and edit them with double click</div>
</div>
</div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
</section>
<section class="am-sect">
<div class="container-width">
<img class="img-phone" onmousedown="return false" src="./img/phone-app.png"/>
@ -38,6 +58,7 @@
<div class="am-pre">ASSET MANAGER</div>
<div class="am-title">Manage your images with Asset Manager</div>
<div class="am-desc">You can create image blocks with the command from the left panel and edit them with double click</div>
<div class="am-post">Image uploading is not allowed in this demo</div>
</div>
<div class="clearfix"></div>
</div>
@ -47,20 +68,44 @@
<div class="container-width">
<div class="blk-title">Blocks</div>
<div class="blk-desc">Each element in HTML page could be seen as a block. On the left panel you could find different kind of blocks that you can create, move and style</div>
<div class="price-cards">
<div class="price-card-cont">
<div class="price-card">
<div class="pc-title">Starter</div>
<div class="pc-desc">Some random list</div>
<div class="pc-feature odd-feat">+ Small feature 1</div>
<div class="pc-feature">+ Small feature 2</div>
<div class="pc-feature odd-feat">+ Small feature 3</div>
<div class="pc-feature">+ Small feature 4</div>
<div class="pc-feature odd-feat">+ Starter feature 1</div>
<div class="pc-feature">+ Starter feature 2</div>
<div class="pc-feature odd-feat">+ Starter feature 3</div>
<div class="pc-feature">+ Starter feature 4</div>
<div class="pc-amount odd-feat">$ 9,90/mo</div>
</div>
</div>
<div class="price-card-cont">
<div class="price-card pc-regular">
<div class="pc-title">Regular</div>
<div class="pc-desc">Some random list</div>
<div class="pc-feature odd-feat">+ Regular feature 1</div>
<div class="pc-feature">+ Regular feature 2</div>
<div class="pc-feature odd-feat">+ Regular feature 3</div>
<div class="pc-feature">+ Regular feature 4</div>
<div class="pc-amount odd-feat">$ 19,90/mo</div>
</div>
</div>
<div class="price-card-cont">
<div class="price-card pc-enterprise">
<div class="pc-title">Enterprise</div>
<div class="pc-desc">Some random list</div>
<div class="pc-feature odd-feat">+ Enterprise feature 1</div>
<div class="pc-feature">+ Enterprise feature 2</div>
<div class="pc-feature odd-feat">+ Enterprise feature 3</div>
<div class="pc-feature">+ Enterprise feature 4</div>
<div class="pc-amount odd-feat">$ 29,90/mo</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</section>
@ -140,6 +185,51 @@
background-color:#ffffff;
color:#4c114e;
}
.flex-sect{
background-color: #fafafa;
padding: 100px 0;
}
.cards{
padding: 20px 0;
display: flex;
justify-content: space-around;
flex-flow: wrap;
}
.card{
background-color: white;
height: 300px;
width:300px;
margin-bottom:30px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
border-radius: 2px;
transition: all 0.5s ease;
font-weight: 100;
}
.card:hover{
margin-top: -5px;
box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.2);
}
.card-header{
height: 155px;
background-image:url("http://placehold.it/350x250/78c5d6/fff/image1.jpg");
background-size:cover;
background-position:center center;
}
.card-body{
padding: 10px;
}
.card-title{
font-size: 1.4em;
margin-bottom: 5px;
}
.card-sub-title{
color: #b3b3b3;
font-size: 1em;
margin-bottom: 15px;
}
.card-desc{
font-size: 0.85rem;
}
.am-sect{
padding-top: 100px;
padding-bottom: 100px;
@ -170,6 +260,11 @@
font-size:17px;
line-height:25px;
}
.am-post{
padding:7px;
line-height:25px;
font-size:13px;
}
.blk-sect{
padding-top: 100px;
padding-bottom: 100px;
@ -204,6 +299,7 @@
border-radius:5px;
font-weight: 100;
color: #fff;
width: 90%;
}
.pc-title{
font-weight:100;
@ -219,22 +315,27 @@
}
.pc-feature{
color:rgba(255,255,255,0.5);
background-color:rgba(0, 0, 0, 0.1);
letter-spacing:2px;
font-size:15px;
padding:10px 20px;
}
.pc-feature:nth-of-type(2n){
background-color:transparent;
color: red;
}
.odd-feat{
background-color:rgba(0, 0, 0, 0.1);
}
.pc-amount{
background-color:rgba(0, 0, 0, 0.1);
font-size: 35px;
text-align: center;
padding: 20px 0;
}
.pc-regular{
background-color: #da78a0;
}
.pc-enterprise{
background-color: #d66a96;
}
pc-regular
</style>
</div>
<script data-main="src/demo" src="vendor/require/require.js"></script>

12
src/style_manager/model/PropertyFactory.js
View File

@ -40,6 +40,7 @@ define(['backbone'],
case 'background-repeat': case 'background-position': case 'background-attachment': case 'background-size':
case 'transition-property': case 'transition-timing-function':
case 'cursor':
case 'overflow':
obj.type = 'select';
break;
case 'top': case 'right': case 'bottom': case 'left':
@ -156,6 +157,9 @@ define(['backbone'],
case 'transition-timing-function':
obj.defaults = 'ease';
break;
case 'overflow':
obj.defaults = 'visible';
break;
}
// Units
@ -389,6 +393,14 @@ define(['backbone'],
{ value : 'text'}
];
break;
case 'overflow':
obj.list = [
{ value : 'visible'},
{ value : 'hidden'},
{ value : 'scroll'},
{ value : 'auto'}
];
break;
}
// Properties

13
test/specs/style_manager/model/Models.js
View File

@ -783,6 +783,19 @@ define([path + 'Sector',
obj.build('cursor').should.deep.equal([res]);
});
it('Build overflow', function() {
var res = {
type: 'select',
property: 'overflow',
defaults: 'visible',
list: [{ value : 'visible'},
{ value : 'hidden'},
{ value : 'scroll'},
{ value : 'auto'}],
};
obj.build('overflow').should.deep.equal([res]);
});
});
}

Write Preview
Loading…
Cancel
Save