Fix #271: add new piskel button for desktop application

This commit is contained in:
Julian Descottes 2017-06-03 00:12:46 +02:00
parent 799c9fbf5a
commit cc2fc48107
3 changed files with 35 additions and 19 deletions

View File

@ -238,20 +238,6 @@ module.exports = function(grunt) {
src: ['dest/tmp/css/piskel-style-packaged' + version + '.css'],
dest: 'dest/prod/css/piskel-style-packaged' + version + '.css'
}]
},
// remove the fake header from the desktop build
desktop: {
options: {
patterns: [{
match: /<!--standalone-start-->(?:.|[\r\n])*<!--standalone-end-->/,
replacement: "",
description : "Remove everything between standalone-start & standalone-end"
}
]
},
files: [
{src: ['dest/prod/index.html'], dest: 'dest/prod/index.html'}
]
}
},
@ -372,8 +358,8 @@ module.exports = function(grunt) {
grunt.registerTask('merge-statics', ['concat:js', 'concat:css', 'uglify']);
grunt.registerTask('build', ['clean:prod', 'sprite', 'merge-statics', 'build-index.html', 'replace:mainPartial', 'replace:css', 'copy:prod']);
grunt.registerTask('build-dev', ['clean:dev', 'sprite', 'build-index.html', 'copy:dev']);
grunt.registerTask('desktop', ['clean:desktop', 'default', 'replace:desktop', 'nwjs:windows']);
grunt.registerTask('desktop-mac', ['clean:desktop', 'default', 'replace:desktop', 'nwjs:macos']);
grunt.registerTask('desktop', ['clean:desktop', 'default', 'nwjs:windows']);
grunt.registerTask('desktop-mac', ['clean:desktop', 'default', 'nwjs:macos']);
grunt.registerTask('desktop-mac-old', ['clean:desktop', 'default', 'replace:desktop', 'nwjs:macos_old']);
// SERVER TASKS

View File

@ -22,9 +22,7 @@
color:white;">
<span style="top:45%">Loading Piskel ...</span>
</div>
<!--standalone-start-->
@@include('templates/debug-header.html', {})
<!--standalone-end-->
<!-- the comment below indicates the beginning of markup reused by the editor integrated in piskelapp.com -->
<!-- do not delete, do not move :) -->

View File

@ -4,16 +4,48 @@
}
.fake-piskelapp-header {
position: relative;
text-align: center;
height: 40px;
line-height: 40px;
font-size: 24px;
background: black;
color: gold;
z-index: 100;
}
.piskel-name.piskel-name-saving {
color: red;
}
.new-piskel-desktop {
position: absolute;
display: flex;
top: 7px;
right: 7px;
height: 26px;
width: 26px;
border-radius: 3px;
font-size: 22px;
color: black;
background: gold;
text-decoration: none;
align-items: center;
justify-content: center;
}
</style>
<div class="fake-piskelapp-header"><span class="piskel-name"></span></div>
<div class="fake-piskelapp-header">
<a
href="index.html"
target="_blank"
class="new-piskel-desktop button button-primary"
title="Create a new sprite"
rel="tooltip"
data-placement="left"
>+</a>
<span class="piskel-name"></span>
</div>