ui modals report
This commit is contained in:
Alessandro
@@ -2392,6 +2392,7 @@
|
||||
display: flex;
|
||||
margin-left: 17px;
|
||||
margin-top: 29px;
|
||||
height: 29px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.11;
|
||||
@@ -2399,4 +2400,93 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-report-body-center{
|
||||
width: calc(~"100% - 24px");
|
||||
height: 452px;
|
||||
display: flex;
|
||||
padding-left: 24px;
|
||||
flex-flow: column;
|
||||
.modal-report-body-center-row{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
margin: 24px 0;
|
||||
div{
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
width: 267px;
|
||||
height: 24px;
|
||||
input[type=checkbox] {
|
||||
visibility: hidden;
|
||||
}
|
||||
.modal-report-select-column-checkbox {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
// margin-top: 29px;
|
||||
}
|
||||
.modal-report-select-column-checkbox label {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: @color-white2;
|
||||
box-shadow: inset 0 1px 3px @color-black-50;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.modal-report-select-column-checkbox label:after {
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 9px;
|
||||
background: transparent;
|
||||
top: 3px;
|
||||
left: 2px;
|
||||
border: 5px solid #1791ff;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
transform: rotate(-48deg);
|
||||
}
|
||||
.modal-report-select-column-checkbox input[type=checkbox]:checked+label{
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: @color-white2;
|
||||
border: solid 1px @color-clear-blue;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.modal-report-select-column-checkbox input[type=checkbox]:checked+label:after {
|
||||
opacity: 1;
|
||||
}
|
||||
.modal-report-select-column-checkbox-label {
|
||||
display: flex;
|
||||
margin-left: 17px;
|
||||
// margin-top: 29px;
|
||||
height: 29px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.11;
|
||||
color: @color-darkish-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-report-body-footer{
|
||||
width: 100%;
|
||||
height: 62px;
|
||||
display: flex;
|
||||
border-top: solid 2px @color-silver;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
@@ -2433,11 +2433,99 @@
|
||||
display: flex;
|
||||
margin-left: 17px;
|
||||
margin-top: 29px;
|
||||
height: 29px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.11;
|
||||
color: #002680;
|
||||
}
|
||||
.modal.modal-report-select-column .modal-report-body-center {
|
||||
width: calc(100% - 24px);
|
||||
height: 452px;
|
||||
display: flex;
|
||||
padding-left: 24px;
|
||||
flex-flow: column;
|
||||
}
|
||||
.modal.modal-report-select-column .modal-report-body-center .modal-report-body-center-row {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
margin: 24px 0;
|
||||
}
|
||||
.modal.modal-report-select-column .modal-report-body-center .modal-report-body-center-row div {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
width: 267px;
|
||||
height: 24px;
|
||||
}
|
||||
.modal.modal-report-select-column .modal-report-body-center .modal-report-body-center-row div input[type=checkbox] {
|
||||
visibility: hidden;
|
||||
}
|
||||
.modal.modal-report-select-column .modal-report-body-center .modal-report-body-center-row div .modal-report-select-column-checkbox {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.modal.modal-report-select-column .modal-report-body-center .modal-report-body-center-row div .modal-report-select-column-checkbox label {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #f1f1f1;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.modal.modal-report-select-column .modal-report-body-center .modal-report-body-center-row div .modal-report-select-column-checkbox label:after {
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 9px;
|
||||
background: transparent;
|
||||
top: 3px;
|
||||
left: 2px;
|
||||
border: 5px solid #1791ff;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
transform: rotate(-48deg);
|
||||
}
|
||||
.modal.modal-report-select-column .modal-report-body-center .modal-report-body-center-row div .modal-report-select-column-checkbox input[type=checkbox]:checked + label {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #f1f1f1;
|
||||
border: solid 1px #1791ff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.modal.modal-report-select-column .modal-report-body-center .modal-report-body-center-row div .modal-report-select-column-checkbox input[type=checkbox]:checked + label:after {
|
||||
opacity: 1;
|
||||
}
|
||||
.modal.modal-report-select-column .modal-report-body-center .modal-report-body-center-row div .modal-report-select-column-checkbox-label {
|
||||
display: flex;
|
||||
margin-left: 17px;
|
||||
height: 29px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.11;
|
||||
color: #002680;
|
||||
}
|
||||
.modal.modal-report-select-column .modal-report-body-footer {
|
||||
width: 100%;
|
||||
height: 62px;
|
||||
display: flex;
|
||||
border-top: solid 2px #bbbcbc;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.popup {
|
||||
width: 288px;
|
||||
height: 218px;
|
||||
|
||||
@@ -3,13 +3,120 @@
|
||||
<button class="close" slot="header-buttons" @click="close()"><i class="fa fa-remove"></i></button>
|
||||
<div class="modal-report-body-header">
|
||||
<label>{{'modal_report_select_column_body_title' | localize("Scegli le colonne che vuoi visualizzare:")}}</label>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportSelectAll" name="" />
|
||||
<label for="modalReportSelectAll"></label>
|
||||
</div>
|
||||
<label for="modalReportSelectAll" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_select_all' | localize("Seleziona tutte")}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-report-body-center">
|
||||
<div class="modal-report-body-center-row">
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportSelectColumnCheckbox" name="" />
|
||||
<label for="modalReportSelectColumnCheckbox"></label>
|
||||
<input type="checkbox" value="1" id="modalReportProgramName" name="" />
|
||||
<label for="modalReportProgramName"></label>
|
||||
</div>
|
||||
<label for="modalReportSelectColumnCheckbox" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_select_all' | localize("Seleziona tutte")}}</label>
|
||||
<label for="modalReportProgramName" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_program_name' | localize("Nome programma")}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportDate" name="" />
|
||||
<label for="modalReportDate"></label>
|
||||
</div>
|
||||
<label for="modalReportDate" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_date' | localize("Data")}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportDeviation" name="" />
|
||||
<label for="modalReportDeviation"></label>
|
||||
</div>
|
||||
<label for="modalReportDeviation" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_deviation' | localize("Scostamento")}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-report-body-center-row">
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportDimensions" name="" />
|
||||
<label for="modalReportDimensions"></label>
|
||||
</div>
|
||||
<label for="modalReportDimensions" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_dimensions' | localize("Dimensioni")}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportEffectiveTime" name="" />
|
||||
<label for="modalReportEffectiveTime"></label>
|
||||
</div>
|
||||
<label for="modalReportEffectiveTime" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_effective_time' | localize("Tempo effettivo")}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportQuality" name="" />
|
||||
<label for="modalReportQuality"></label>
|
||||
</div>
|
||||
<label for="modalReportQuality" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_quality' | localize("Qualità")}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-report-body-center-row">
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportQuantity" name="" />
|
||||
<label for="modalReportQuantity"></label>
|
||||
</div>
|
||||
<label for="modalReportQuantity" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_quantity' | localize("Quantità")}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportAverageTime" name="" />
|
||||
<label for="modalReportAverageTime"></label>
|
||||
</div>
|
||||
<label for="modalReportAverageTime" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_average_time' | localize("Tempo medio")}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportOperatorName" name="" />
|
||||
<label for="modalReportOperatorName"></label>
|
||||
</div>
|
||||
<label for="modalReportOperatorName" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_operator_name' | localize("Nome operatore")}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-report-body-center-row">
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportStartNow" name="" />
|
||||
<label for="modalReportStartNow"></label>
|
||||
</div>
|
||||
<label for="modalReportStartNow" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_start_now' | localize("Ora inizio")}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportTheoreticalTime" name="" />
|
||||
<label for="modalReportTheoreticalTime"></label>
|
||||
</div>
|
||||
<label for="modalReportTheoreticalTime" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_theoretical_time' | localize("Tempo teorico")}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportShift" name="" />
|
||||
<label for="modalReportShift"></label>
|
||||
</div>
|
||||
<label for="modalReportShift" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_shift' | localize("Turno")}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-report-body-center-row">
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportEndTime" name="" />
|
||||
<label for="modalReportEndTime"></label>
|
||||
</div>
|
||||
<label for="modalReportEndTime" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_end_time' | localize("Ora fine")}}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-report-body-footer">
|
||||
<button class="btn btn-primary">{{'modal_report_select_column_btn_cancel' | localize("Annulla")}}</button>
|
||||
<button class="btn btn-success">{{'modal_report_select_column_btn_confirm' | localize("Conferma")}}</button>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user