Egalware/cms_thermo_active
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

selected list

Browse Source
This commit is contained in:
Paolo Possanzini
2018-05-30 15:52:57 +02:00
parent 05a39012fd
commit bb787c1ea7
5 changed files with 93 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Step/wwwroot/assets/styles/base/depot.less
+43 -16
View File
@@ -1,5 +1,13 @@
// out: false, sourceMap: false, main: ../style.less
@import "colors.less";
@keyframes selectedanimation {
0% {box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);}
50% {box-shadow: 0px 0px 2px 3px #1791ff;}
100% {box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);}
}
.depot-container {
height: 100%;
width: 100%;
@@ -7,22 +15,28 @@
/* align-items: center; */
justify-content: center;
padding-top: 104px;
.depot-position section {
position: relative;
.empty, .target {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
.depot-position {
&.selected {
animation: selectedanimation 0.4s;
}
.empty{
opacity: 0.7;
border: dashed 2px #878787;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
& section {
position: relative;
.empty,
.target {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
}
.empty {
opacity: 0.7;
border: dashed 2px #878787;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
}
}
}
.depot-box {
@@ -150,7 +164,8 @@
.sd-section {
display: flex;
align-items: center;
margin-top: 111px;
margin-top: 100px;
padding-top:11px;
overflow-x: auto;
padding-bottom: 30px;
overflow-y: hidden;
@@ -168,6 +183,7 @@
flex-grow: 0;
height: 24px;
width: 24px; // margin: 16px;
cursor: pointer;
} // .square{
// /*se empty*/
// border: solid 2px @color-clear-blue;
@@ -186,6 +202,17 @@
.selected-full {
background-color: @color-clear-blue;
}
.selected {
position: relative;
&::before {
content: "\f0d7";
font-family: 'FontAwesome';
position: absolute;
font-size: 36px;
top: -29px;
color: #1791ff;
}
}
.selected-empty {
height: 20px;
width: 20px;
Step/wwwroot/assets/styles/base/layout.less
+5 -5
View File
@@ -65,7 +65,7 @@
border-radius: 20px;
width: 8px;
background-color: rgba(0, 0, 0, 0.3);
// box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
//box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}
body {
@@ -170,10 +170,10 @@ body {
}
}
img {
user-drag: none;
-webkit-user-drag: none;
}
// img {
// user-drag: none;
// -webkit-user-drag: none;
// }
.clearfix {
clear: both;
Step/wwwroot/assets/styles/style.css
+28 -5
View File
@@ -3427,6 +3427,17 @@ footer .container button.big:before {
font-size: 18px;
color: #002e6e;
}
@keyframes selectedanimation {
0% {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}
50% {
box-shadow: 0px 0px 2px 3px #1791ff;
}
100% {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}
}
.depot-container {
height: 100%;
width: 100%;
@@ -3435,6 +3446,9 @@ footer .container button.big:before {
justify-content: center;
padding-top: 104px;
}
.depot-container .depot-position.selected {
animation: selectedanimation 0.4s;
}
.depot-container .depot-position section {
position: relative;
}
@@ -3579,7 +3593,8 @@ footer .container button.big:before {
.depot-container .depot-box .depot-boxbody .box-right .single-depot .sd-section {
display: flex;
align-items: center;
margin-top: 111px;
margin-top: 100px;
padding-top: 11px;
overflow-x: auto;
padding-bottom: 30px;
overflow-y: hidden;
@@ -3598,6 +3613,7 @@ footer .container button.big:before {
flex-grow: 0;
height: 24px;
width: 24px;
cursor: pointer;
}
.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .empty {
height: 20px;
@@ -3611,6 +3627,17 @@ footer .container button.big:before {
.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .selected-full {
background-color: #1791ff;
}
.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .selected {
position: relative;
}
.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .selected::before {
content: "\f0d7";
font-family: 'FontAwesome';
position: absolute;
font-size: 36px;
top: -29px;
color: #1791ff;
}
.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .selected-empty {
height: 20px;
width: 20px;
@@ -8058,10 +8085,6 @@ body {
height: 50px;
margin: 0 10px;
}
img {
user-drag: none;
-webkit-user-drag: none;
}
.clearfix {
clear: both;
}
Step/wwwroot/src/components/depot.ts
+12 -2
View File
@@ -19,6 +19,8 @@ declare let $: any;
export default class depot extends Vue {
$route: any;
$router: any;
BLOCKSIZE = 320;
public get depot(): server.DepotModel[] { return (this.$store.state as AppModel).depot.depot; }
// Solo le positions del mio magazzino
public get positions(): server.MagazinesPositions[] {
@@ -30,13 +32,12 @@ export default class depot extends Vue {
public get availableTools(): server.Tools[] { return (this.$store.state as AppModel).depot.availableTool; }
public magazines: server.MagazineModel[] = (this.$store.state as AppModel).tooling.magazines;
public enableModify: any = false;
public searchText: string = "";
public currentFilter: string = "";
public current
public currentPosition: number = 0;
@Watch("searchText")
public applyFilter(n) {
@@ -129,6 +130,15 @@ export default class depot extends Vue {
public addToDepotPosition(position, toolToAdd) {
console.log(position, toolToAdd);
}
public goToPosition(index) {
this.currentPosition = index;
var c = (this.$refs.positionslist as any);
var move = index * this.BLOCKSIZE;
if (index < this.positions.length - 2)
move = move - 2 * this.BLOCKSIZE;
c.scrollLeft = move;
}
}
Step/wwwroot/src/components/depot.vue
+5 -3
View File
@@ -31,8 +31,8 @@
<span>{{'depot_title' | localize("Magazzino")}} {{depotId}} - Lineare</span>
<button class="btn" v-if="m.id == depotId + 1" v-for="m in magazines" :key="m.id" :disabled="disableFastButton()" @click="changeMagazine(m.id)"><i class="fa fa-chevron-right"></i></button>
</div>
<div class="sd-section scrollable">
<detail-card v-for="pos in positions" :key="pos.positionId" :number="pos.positionId" class="depot-position" >
<div class="sd-section scrollable" ref="positionslist">
<detail-card v-for="(pos, idx) in positions" :key="pos.positionId" :number="pos.positionId" class="depot-position" :class="{'selected': currentPosition == idx}">
<span class="empty" v-if="!toolAtPosition(pos.positionId)">{{'depot_avaiable_position' | localize("Posizione disponibile")}}</span>
<drop class="target" @drop="addToDepotPosition(pos.positionId, ...arguments)">
<drag v-if="toolAtPosition(pos.positionId)" :transfer-data="toolAtPosition(pos.positionId)">
@@ -59,7 +59,9 @@
</div>
<div class="square-container">
<div class="linesquare">
<div class="square empty" v-for="pos in positions" :key="pos.positionId"
<div class="square empty"
v-for="(pos, index) in positions" :key="pos.positionId"
@click="goToPosition(index)"
:class="{'full': toolAtPosition(pos.positionId)}"></div>
<!-- <div class="square" :class="{'full': true}"></div>
<div class="square" :class="{'empty': true}"></div>