extremely ugly edit mode for versions
This commit is contained in:
xdrm-brackets
parent
13e545e5f9
commit
35a6b2a931
|
|
@ -0,0 +1,61 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
height="32"
|
||||||
|
viewBox="0 0 32 32"
|
||||||
|
width="32"
|
||||||
|
version="1.1"
|
||||||
|
id="svg6"
|
||||||
|
sodipodi:docname="switch.svg"
|
||||||
|
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
|
||||||
|
<metadata
|
||||||
|
id="metadata12">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs10" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1022"
|
||||||
|
id="namedview8"
|
||||||
|
showgrid="false"
|
||||||
|
fit-margin-top="0"
|
||||||
|
fit-margin-left="0"
|
||||||
|
fit-margin-right="0"
|
||||||
|
fit-margin-bottom="0"
|
||||||
|
inkscape:zoom="4.9166667"
|
||||||
|
inkscape:cx="24"
|
||||||
|
inkscape:cy="29.898306"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="29"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg6" />
|
||||||
|
<path
|
||||||
|
d="M 23.384615,24.615384 V 18.461538 H 8.615385 v 6.153846 L 0,15.999999 8.615385,7.3846151 v 6.1538459 h 14.76923 V 7.3846151 L 32,15.999999 Z"
|
||||||
|
id="fill-edit"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="ccccccccccc"
|
||||||
|
style="stroke-width:1.23076928" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -35,8 +35,6 @@
|
||||||
|
|
||||||
padding: .5em 1em;
|
padding: .5em 1em;
|
||||||
|
|
||||||
padding-left: 2em;
|
|
||||||
|
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
box-shadow: 0 2px 2px #fff;
|
box-shadow: 0 2px 2px #fff;
|
||||||
|
|
@ -48,23 +46,6 @@
|
||||||
// hover animation
|
// hover animation
|
||||||
&:hover{ box-shadow: 0 2px 2px darken(#fff,10%); }
|
&:hover{ box-shadow: 0 2px 2px darken(#fff,10%); }
|
||||||
|
|
||||||
// color state
|
|
||||||
&:before{
|
|
||||||
content: '';
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: calc( 50% - .7em/2 );
|
|
||||||
left: calc( 1em/2 + .7em/2 );
|
|
||||||
width: .7em;
|
|
||||||
height: .7em;
|
|
||||||
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
background-color: $form-invalid-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* (1.2) Version dialog (to switch to another) */
|
/* (1.2) Version dialog (to switch to another) */
|
||||||
|
|
@ -96,7 +77,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
padding: .5em 1em;
|
padding: .5em 1em;
|
||||||
padding-left: 2em;
|
padding-left: .5em;
|
||||||
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
|
|
@ -107,26 +88,53 @@
|
||||||
// hover animation
|
// hover animation
|
||||||
&:hover{ background-color: darken(#fff, 5%); }
|
&:hover{ background-color: darken(#fff, 5%); }
|
||||||
|
|
||||||
// color state
|
// pre-icons
|
||||||
&:before{
|
& > span.edit,
|
||||||
content: '';
|
& > span.switch,
|
||||||
|
& > span.create{
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
// top: calc( 50% - .7em/2 );
|
||||||
|
// left: calc( 1em/2 + .7em/2 );
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
|
||||||
display: block;
|
padding-right: .5em;
|
||||||
position: absolute;
|
|
||||||
top: calc( 50% - .7em/2 );
|
|
||||||
left: calc( 1em/2 + .7em/2 );
|
|
||||||
width: .7em;
|
|
||||||
height: .7em;
|
|
||||||
|
|
||||||
border-radius: 50%;
|
&.switch{
|
||||||
|
background: url('/asset/svg/switch.svg@b8c0c8') center center no-repeat;
|
||||||
background-color: $form-grey-color;
|
background-size: 80% auto;
|
||||||
|
&:hover{
|
||||||
|
background-image: url('/asset/svg/switch.svg@#{$rd-form-invalid-color}');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-id='-1']:before{
|
&.edit{
|
||||||
border-radius: 0;
|
background: url('/asset/svg/a.svg@b8c0c8') center center no-repeat;
|
||||||
background: url('/asset/svg/plus.svg@#{$rd-form-valid-color}') center center no-repeat;
|
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
|
&:hover{
|
||||||
|
background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.create{
|
||||||
|
background: url('/asset/svg/plus.svg@#{$rd-form-valid-color}') center center no-repeat;
|
||||||
|
background-size: 60% auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
& > input{
|
||||||
|
width: auto;
|
||||||
|
max-width: 6em;
|
||||||
|
padding: 0;
|
||||||
|
margin: .25em .5em;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,9 +16,12 @@
|
||||||
<div class='versions' data-unblur-version>
|
<div class='versions' data-unblur-version>
|
||||||
|
|
||||||
<div class='current' @click='version.dialog=!version.dialog' :data-id='get_vcurrent().id' data-unblur-version>{{ get_vcurrent().name }}</div>
|
<div class='current' @click='version.dialog=!version.dialog' :data-id='get_vcurrent().id' data-unblur-version>{{ get_vcurrent().name }}</div>
|
||||||
|
|
||||||
<div class='version-dialog' v-show='version.dialog' data-unblur-version>
|
<div class='version-dialog' v-show='version.dialog' data-unblur-version>
|
||||||
<span v-for='v in version.list' v-show='v.id!=version.current' @click='v_switch(v.id)' :data-id='v.id' data-unblur-version>{{ v.name }}</span>
|
<span v-for='(v,i) in version.list' v-show='v.id!=version.current' :data-id='v.id' data-unblur-version>
|
||||||
<span @click='v_create()' data-unblur-version data-id='-1'>Créer</span>
|
<span :class='v.name==v.new_name?`switch`:`edit`' @click='v.name==v.new_name?v_switch(v.id):v_rename(i)'></span><input data-unblur-version type='text' :placeholder='v.name' v-model='v.new_name'>
|
||||||
|
</span>
|
||||||
|
<span @click='v_create()' data-unblur-version data-id='-1'><span class='create'></span>Créer</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -78,7 +81,7 @@ export default {
|
||||||
if( this.version.list[v].id == id )
|
if( this.version.list[v].id == id )
|
||||||
return this.version.list[v];
|
return this.version.list[v];
|
||||||
|
|
||||||
return { id: -2, name: '-' };
|
return { id: -2, name: '-', new_name: '-' };
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -161,8 +164,9 @@ export default {
|
||||||
// 3. On popup confirm
|
// 3. On popup confirm
|
||||||
})).then( () => {
|
})).then( () => {
|
||||||
|
|
||||||
|
let newVersionName = `${this.get_vcurrent().name}*`;
|
||||||
// Call API to create a new version
|
// Call API to create a new version
|
||||||
api.call(`POST department/version/`, {label:'test'}, function(rs){
|
api.call(`POST department/version/`, {label:newVersionName}, function(rs){
|
||||||
|
|
||||||
// 1. error -> popup
|
// 1. error -> popup
|
||||||
if( rs.error !== 0 || !rs.hasOwnProperty('created_id') ){
|
if( rs.error !== 0 || !rs.hasOwnProperty('created_id') ){
|
||||||
|
|
@ -177,7 +181,56 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3. Update GUI
|
// 3. Update GUI
|
||||||
this.version.list.push( { id: parseInt(rs.created_id), label: label } );
|
this.version.list.push( { id: parseInt(rs.created_id), name: newVersionName, new_name: newVersionName } );
|
||||||
|
|
||||||
|
}.bind(this));
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/* (6) Rename a version
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
v_rename(index){
|
||||||
|
|
||||||
|
// fail if not found index
|
||||||
|
if( this.version.list[index] == null )
|
||||||
|
return;
|
||||||
|
|
||||||
|
var ver = this.version.list[index];
|
||||||
|
var newname = ver.new_name;
|
||||||
|
|
||||||
|
// 2. Popup confirm
|
||||||
|
(new Promise( (resolve, reject) => {
|
||||||
|
|
||||||
|
popup.ask({
|
||||||
|
title: 'Confirmation de modification de version',
|
||||||
|
content: `La version <b>${ver.name}</b> va être renommée en <b>${newname}</b><br><br>Voulez-vous valider cette modification ?`,
|
||||||
|
action: 'Valider',
|
||||||
|
type: 'valid'
|
||||||
|
}, (popup_rs) => { popup_rs && resolve() });
|
||||||
|
|
||||||
|
// 3. On popup confirm
|
||||||
|
})).then( () => {
|
||||||
|
|
||||||
|
// Call API to create a new version
|
||||||
|
api.call(`PUT department/version/${ver.id}`, {label:newname}, function(rs){
|
||||||
|
|
||||||
|
// 1. error -> popup
|
||||||
|
if( rs.error !== 0 || !rs.hasOwnProperty('updated') ){
|
||||||
|
|
||||||
|
return popup.ask({
|
||||||
|
title: 'Erreur ('+err_code+')',
|
||||||
|
content: 'La modification a échoué.',
|
||||||
|
action: 'OK',
|
||||||
|
type: 'neutral'
|
||||||
|
}, () => {});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. Update GUI
|
||||||
|
ver.name = newname;
|
||||||
|
ver.new_name = newname;
|
||||||
|
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
|
|
||||||
|
|
@ -186,6 +239,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeMount(){
|
beforeMount(){
|
||||||
|
|
||||||
/* (1) Try to fetch versions from API */
|
/* (1) Try to fetch versions from API */
|
||||||
|
|
@ -206,7 +260,7 @@ export default {
|
||||||
this.version.current = ver.iddatabase
|
this.version.current = ver.iddatabase
|
||||||
|
|
||||||
// add version to list
|
// add version to list
|
||||||
this.version.list.push( { id: ver.iddatabase, name: ver.label } );
|
this.version.list.push( { id: ver.iddatabase, name: ver.label, new_name: ver.label } );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue