put dialog in user-popover

This commit is contained in:
jorgebl 2021-03-24 08:51:10 +01:00
parent bc0dac8d2e
commit 9084ede371
8 changed files with 209 additions and 213 deletions

View File

@ -64,138 +64,3 @@
<span ng-show="::!mod.keyBind">&nbsp;</span>
</a>
</div>
</div>
<div class="shortcuts" ng-click="$ctrl.showShortcuts()">
<span translate>Shortcuts</span>
</div>
<!-- Create shortcuts dialog -->
<vn-dialog class="edit"
vn-id="shortcuts">
<tpl-body>
<div class="dialogHeader" translate>SHORTCUTS</div>
<table>
<tbody>
<tr>
<td class="tdBorder">
<span class="shortcuts-words">Ctrl</span>
</td>
<td>
<span class="plusStyle">+</span>
</td>
<td class="tdBorder">
<span class="shortcuts-words">Alt</span>
</td>
<td>
<span class="plusStyle">+</span>
</td>
<td class="tdBorder">
<span class="shortcuts-words">A</span>
</td>
<td>
<span class="arrowStyle">🠮</span>
</td>
<td>
<vn-icon
class="iconStyle"
icon="icon-item">
</vn-icon>
</td>
<td>
<span class="titleStyle" translate>ITEMS</span>
</td>
</tr>
<tr><td colspan="8"></td></tr>
<tr>
<td class="tdBorder">
<span class="shortcuts-words">Ctrl</span>
</td>
<td>
<span class="plusStyle">+</span>
</td>
<td class="tdBorder">
<span class="shortcuts-words">Alt</span>
</td>
<td>
<span class="plusStyle">+</span>
</td>
<td class="tdBorder">
<span class="shortcuts-words">T</span>
</td>
<td>
<span class="arrowStyle">🠮</span>
</td>
<td>
<vn-icon
class="iconStyle"
icon="icon-ticket">
</vn-icon>
</td>
<td>
<span class="titleStyle">TICKETS</span>
</td>
</tr>
<tr><td colspan="8"></td></tr>
<tr>
<td class="tdBorder">
<span class="shortcuts-words">Ctrl</span>
</td>
<td>
<span class="plusStyle">+</span>
</td>
<td class="tdBorder">
<span class="shortcuts-words">Alt</span>
</td>
<td>
<span class="plusStyle">+</span>
</td>
<td class="tdBorder">
<span class="shortcuts-words">R</span>
</td>
<td>
<span class="arrowStyle">🠮</span>
</td>
<td>
<vn-icon
class="iconStyle"
icon="icon-claims">
</vn-icon>
</td>
<td><span class="titleStyle" translate>CLAIMS</span></td>
</tr>
<tr><td colspan="8"></td></tr>
<tr>
<td class="tdBorder">
<span class="shortcuts-words">Ctrl</span>
</td>
<td>
<span class="plusStyle">+</span>
</td>
<td class="tdBorder">
<span class="shortcuts-words">Alt</span>
</td>
<td>
<span class="plusStyle">+</span>
</td>
<td class="tdBorder">
<span class="shortcuts-words">C</span>
</td>
<td>
<span class="arrowStyle">🠮</span>
</td>
<td>
<vn-icon
class="iconStyle"
icon="persons">
</vn-icon>
</td>
<td>
<span class="titleStyle" translate>CLIENTS</span>
</td>
</tr>
</tbody>
</table>
</tpl-body>
<tpl-buttons>
<input type="button" response="cancel" translate-attr="{value: 'Close'}"/>
</tpl-buttons>
</vn-dialog>

View File

@ -18,10 +18,6 @@ export default class Controller extends Component {
this.getStarredModules();
}
showShortcuts() {
this.$.shortcuts.show();
}
countModules() {
this.starredCount = 0;
this.regularCount = 0;

View File

@ -1,9 +1,4 @@
Favorites: Favoritos
Shortcuts: Acceso rápido
SHORTCUTS: ACCESO RÁPIDO
ITEMS: ARTÍCULOS
CLAIMS: RECLAMACIONES
CLIENTS: CLIENTES
You can set modules as favorites by clicking their icon: Puedes establecer módulos como favoritos haciendo clic en el icono
Add to favorites: Añadir a favoritos.
Remove from favorites: Quitar de favoritos.

View File

@ -108,71 +108,4 @@ vn-home {
}
}
}
}
.tdBorder {
border-radius: 5px 5px 5px;
width: 75px;
border: 3px solid rgba(0, 0, 0, 0.781);
}
.shortcuts-words {
font-size: 25px;
padding-left: 20px;
padding-right: 20px;
float: left;
margin-left: -15px;
margin-top: -40px;
}
.plusStyle {
font-size: 50px;
padding-left: 10px;
padding-right: 10px;
}
.arrowStyle {
font-size: 50px;
padding-left: 10px;
padding-right: 10px;
}
.dialogHeader {
text-align: center;
background-color: $color-main;
font-size: 25px;
color: white;
font-weight: bold;
padding: 10px;
margin-bottom: 50px;
}
.titleStyle {
font-size: 30px;
font-weight: 400;
padding-left: 10px;
padding-right: 10px;
}
.iconStyle {
color: white;
background-color: $color-main;
font-size: 50px;
font-weight: normal;
width: 50px;
padding: 5px;
border-radius: 5px 5px 5px;
}
.shortcuts {
background-color: $color-main;
max-width: 120px;
font-size: 18px;
font-weight: 600;
color: white;
text-align: center;
padding: 15px;
cursor: pointer;
border-radius: 5px;
}

View File

@ -100,5 +100,145 @@
show-field="name"
value-field="code">
</vn-autocomplete>
<div>
<a
ng-click="$ctrl.showShortcuts()"
class="vn-button colored shortcuts"
translate>
Shortcuts
</a>
</div>
</vn-vertical>
</vn-popover>
</vn-popover>
<!-- Create shortcuts dialog -->
<vn-dialog class="edit"
vn-id="shortcuts">
<tpl-body>
<div class="dialogHeader" translate>SHORTCUTS</div>
<table>
<tbody>
<tr>
<td class="tdBorder">
<span class="shortcuts-words">Ctrl</span>
</td>
<td>
<span class="plusStyle">+</span>
</td>
<td class="tdBorder">
<span class="shortcuts-words">Alt</span>
</td>
<td>
<span class="plusStyle">+</span>
</td>
<td class="tdBorder">
<span class="shortcuts-words">A</span>
</td>
<td>
<span class="arrowStyle">🠮</span>
</td>
<td>
<vn-icon
class="iconStyle"
icon="icon-item">
</vn-icon>
</td>
<td>
<span class="titleStyle" translate>ITEMS</span>
</td>
</tr>
<tr><td colspan="8"></td></tr>
<tr>
<td class="tdBorder">
<span class="shortcuts-words">Ctrl</span>
</td>
<td>
<span class="plusStyle">+</span>
</td>
<td class="tdBorder">
<span class="shortcuts-words">Alt</span>
</td>
<td>
<span class="plusStyle">+</span>
</td>
<td class="tdBorder">
<span class="shortcuts-words">T</span>
</td>
<td>
<span class="arrowStyle">🠮</span>
</td>
<td>
<vn-icon
class="iconStyle"
icon="icon-ticket">
</vn-icon>
</td>
<td>
<span class="titleStyle">TICKETS</span>
</td>
</tr>
<tr><td colspan="8"></td></tr>
<tr>
<td class="tdBorder">
<span class="shortcuts-words">Ctrl</span>
</td>
<td>
<span class="plusStyle">+</span>
</td>
<td class="tdBorder">
<span class="shortcuts-words">Alt</span>
</td>
<td>
<span class="plusStyle">+</span>
</td>
<td class="tdBorder">
<span class="shortcuts-words">R</span>
</td>
<td>
<span class="arrowStyle">🠮</span>
</td>
<td>
<vn-icon
class="iconStyle"
icon="icon-claims">
</vn-icon>
</td>
<td><span class="titleStyle" translate>CLAIMS</span></td>
</tr>
<tr><td colspan="8"></td></tr>
<tr>
<td class="tdBorder">
<span class="shortcuts-words">Ctrl</span>
</td>
<td>
<span class="plusStyle">+</span>
</td>
<td class="tdBorder">
<span class="shortcuts-words">Alt</span>
</td>
<td>
<span class="plusStyle">+</span>
</td>
<td class="tdBorder">
<span class="shortcuts-words">C</span>
</td>
<td>
<span class="arrowStyle">🠮</span>
</td>
<td>
<vn-icon
class="iconStyle"
icon="persons">
</vn-icon>
</td>
<td>
<span class="titleStyle" translate>CLIENTS</span>
</td>
</tr>
</tbody>
</table>
</tpl-body>
<tpl-buttons>
<input type="button" response="cancel" translate-attr="{value: 'Close'}"/>
</tpl-buttons>
</vn-dialog>

View File

@ -73,6 +73,10 @@ class Controller {
return this.vnConfig.user.companyFk;
}
showShortcuts() {
this.$.shortcuts.show();
}
show(event) {
this.$.warehouses.refresh();
this.$.companies.refresh();

View File

@ -3,4 +3,9 @@ Local warehouse: Almacén local
Local bank: Banco local
Local company: Empresa local
User warehouse: Almacén del usuario
User company: Empresa del usuario
User company: Empresa del usuario
Shortcuts: Acceso rápido
SHORTCUTS: ACCESO RÁPIDO
ITEMS: ARTÍCULOS
CLAIMS: RECLAMACIONES
CLIENTS: CLIENTES

View File

@ -38,4 +38,62 @@
height: initial;
vertical-align: middle;
font-size: 1rem;
}
.tdBorder {
border-radius: 5px 5px 5px;
width: 75px;
border: 3px solid rgba(0, 0, 0, 0.781);
}
.shortcuts-words {
font-size: 25px;
padding-left: 20px;
padding-right: 20px;
float: left;
margin-left: -15px;
margin-top: -40px;
}
.plusStyle {
font-size: 50px;
padding-left: 10px;
padding-right: 10px;
}
.arrowStyle {
font-size: 50px;
padding-left: 10px;
padding-right: 10px;
}
.dialogHeader {
text-align: center;
background-color: $color-main;
font-size: 25px;
color: white;
font-weight: bold;
padding: 10px;
margin-bottom: 50px;
}
.titleStyle {
font-size: 30px;
font-weight: 400;
padding-left: 10px;
padding-right: 10px;
}
.iconStyle {
color: white;
background-color: $color-main;
font-size: 50px;
font-weight: normal;
width: 50px;
padding: 5px;
border-radius: 5px 5px 5px;
}
.shortcuts {
width: 250px;
}