Skip to content

Commit

Permalink
Implemented image preview & uploader in project list & project options
Browse files Browse the repository at this point in the history
  • Loading branch information
@MKHenson
MKHenson committed Aug 16, 2016
1 parent 7471d98 commit bf7f8ec
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 113 deletions.
17 changes: 2 additions & 15 deletions lib/gui/forms/options-form/options-project.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ module Animate {
infoServerMsg?: string;
loading?: boolean;
error?: boolean;
imageUploadErrMsg?: string;
loadingPercent?: number;
}

/**
Expand All @@ -26,9 +24,7 @@ module Animate {
this.state = {
loading: false,
error: false,
infoServerMsg: null,
loadingPercent: 0,
imageUploadErrMsg: null
infoServerMsg: null
};
}

Expand Down Expand Up @@ -117,23 +113,14 @@ module Animate {
</VForm>
</Group>
<Group label="Image">
<div className="img-preview unselectable">
<div className="preview-child">
<div className="background-tiles inner ng-scope">
<img className="vert-align" en-src="ctrl.$project && (ctrl.$project.entry.image || './media/appling.png')" />
<div className="div-center"></div>
</div>
</div>
<div className="item-name reg-gradient" id="upload-projet-img" en-click="ctrl.pickProjectPick()"><div className="cross"></div>Upload Image {this.state.loadingPercent}</div>
</div>
<div className="img-data">
<div className="info">
Upload an image for the project; this image will show up in the Animate gallery for others to see.
<br/><br/><span className="nb">Your application must have an image in order to be shown in the gallery.</span><br/><br/>
Your project image should be either a .png or .jpg image that is 200 by 200 pixels.
{( this.state.imageUploadErrMsg ? <Attention mode={AttentionType.ERROR}>{this.state.imageUploadErrMsg}</Attention> : null)}
</div>
</div>
<ImageUploader label="Upload Image" src={project.image} />
<div className="fix"></div>
</Group>
</div>
Expand Down
91 changes: 59 additions & 32 deletions lib/gui/forms/options-form/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,48 +29,75 @@
font-style: italic;
}

.field-option .label {
font-weight: bold;
margin: 0 0 5px 5px;
}
.field-option .dropdown {
line-height: 26px;
}
.field-option input, .field-option textarea {
display:block;
padding:10px;
width:100%;
}
.build-options-form .button{
min-width:150px;
padding: 10px 15px;
.image-uploader {
width: 300px;
display: inline-block;
}

/**
* OPTIONS WINDOW - PROJECT
* =========================
*/
#options-project .cross {
width:30px;
height:30px;
margin: 0 10px;
}
#options-project .img-preview {
position:relative;
overflow:hidden;
width: 200px;
height: 200px;
float: left;
margin-right:10px;
.img-data {
width: calc(100% - 300px);
float: right;
padding: 0 20px;
box-sizing: border-box;
}
#upload-projet-img {
cursor:pointer;

.image-preview .item-name {
cursor: pointer;
}
#options-project .error {
margin: 10px 0;
font-weight: bold;

.nb {
font-weight:bold;
color:#000;
}



// .field-option .label {
// font-weight: bold;
// margin: 0 0 5px 5px;
// }
// .field-option .dropdown {
// line-height: 26px;
// }
// .field-option input, .field-option textarea {
// display:block;
// padding:10px;
// width:100%;
// }
// .build-options-form .button{
// min-width:150px;
// padding: 10px 15px;
// }

// /**
// * OPTIONS WINDOW - PROJECT
// * =========================
// */
// #options-project .cross {
// width:30px;
// height:30px;
// margin: 0 10px;
// }
// #options-project .img-preview {
// position:relative;
// overflow:hidden;
// width: 200px;
// height: 200px;
// float: left;
// margin-right:10px;
// }
// #upload-projet-img {
// cursor:pointer;
// }
// #options-project .error {
// margin: 10px 0;
// font-weight: bold;
// }

/**
* OPTIONS WINDOW - BUILD
* =========================
Expand Down
22 changes: 9 additions & 13 deletions lib/gui/project-list/project-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,23 +144,19 @@ module Animate {
</div>
{
this.state.projects.map(( p, index )=>{
return <div
key={p._id}
className="project-item img-preview unselectable"
return <ImagePreview key={p._id}
className="project-item"
selected={p.selected}
src={p.image}
label={p.name}
labelIcon={<span className="fa fa-file"/>}
onDoubleClick={()=>{
this.selectProject(p, true)
}}
onClick={()=>{
this.selectProject(p, false)
}}>
<div className="preview-child">
<div className="background-tiles inner ng-scope">
<img className="vert-align" src={( p.image && p.image != '' ? p.image : './media/appling.png' )} />
<div className="div-center"></div>
</div>
</div>
<div className={ 'item-name' + (p.selected ? ' reg-gradient' : '') }><span className="fa fa-file"/>{p.name}</div>
</div>
this.selectProject(p, false)
}}
/>
})}
<div className="no-items unselectable" style={{ display: (this.state.projects.length ? 'none' : '')}}>
{this.props.noProjectMessage}
Expand Down
52 changes: 0 additions & 52 deletions lib/gui/project-list/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@
}
}
}

.project-item {
width: 200px;
height: 200px;
Expand All @@ -40,55 +39,4 @@
margin: 10px;
cursor: pointer;
}

.img-preview {
.inner {
.div-center {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.vert-align {
display: inline-block;
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
}

.preview-child {
box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
padding-top: 75%;
position: relative;

.inner {
top: 0;
left: 0;
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
white-space: nowrap;
}
}

.background-tiles {
background-color: white;
background-image: -webkit-linear-gradient(45deg,#efefef 25%,transparent 25%,transparent 75%,#efefef 75%,#efefef),-webkit-linear-gradient(45deg,#efefef 25%,transparent 25%,transparent 75%,#efefef 75%,#efefef);
background-image: linear-gradient(45deg,#efefef 25%,transparent 25%,transparent 75%,#efefef 75%,#efefef),linear-gradient(45deg,#efefef 25%,transparent 25%,transparent 75%,#efefef 75%,#efefef);
background-position: 0 0,10px 10px;
-webkit-background-size: 21px 21px;
background-size: 21px 21px;
}
.item-name {
color: inherit;
text-overflow: ellipsis;
white-space: nowrap;
padding: 10px 5px;
box-sizing: border-box;
overflow: hidden;
text-align: left;
}
}
}
4 changes: 3 additions & 1 deletion lib/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,8 @@ body {
width:50%;
}

@import 'gui/image-preview/style.scss';
@import 'gui/image-uploader/style.scss';
@import 'gui/group/style.scss';
@import 'gui/forms/options-form/style.scss';
@import 'gui/window/style.scss';
Expand Down Expand Up @@ -1105,7 +1107,7 @@ iframe{ z-index:0; }



.img-data .info .nb{ font-weight:bold; color:#000; }




Expand Down

0 comments on commit bf7f8ec

Please sign in to comment.