Initial commit
This commit is contained in:
root
373
client/custom/modules/link-button/css/buttons.css
Normal file
373
client/custom/modules/link-button/css/buttons.css
Normal file
@@ -0,0 +1,373 @@
|
||||
.btn-secondary {
|
||||
color: #fff;
|
||||
background-color: #6c757d;
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
color: #fff;
|
||||
background-color: #5a6268;
|
||||
border-color: #545b62;
|
||||
}
|
||||
|
||||
.btn-secondary:focus, .btn-secondary.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
|
||||
}
|
||||
|
||||
.btn-secondary.disabled, .btn-secondary:disabled {
|
||||
color: #fff;
|
||||
background-color: #6c757d;
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-secondary.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #545b62;
|
||||
border-color: #4e555b;
|
||||
}
|
||||
|
||||
.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-secondary.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
color: #212529;
|
||||
background-color: #f8f9fa;
|
||||
border-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.btn-light:hover {
|
||||
color: #212529;
|
||||
background-color: #e2e6ea;
|
||||
border-color: #dae0e5;
|
||||
}
|
||||
|
||||
.btn-light:focus, .btn-light.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
|
||||
}
|
||||
|
||||
.btn-light.disabled, .btn-light:disabled {
|
||||
color: #212529;
|
||||
background-color: #f8f9fa;
|
||||
border-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-light.dropdown-toggle {
|
||||
color: #212529;
|
||||
background-color: #dae0e5;
|
||||
border-color: #d3d9df;
|
||||
}
|
||||
|
||||
.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-light.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
color: #fff;
|
||||
background-color: #343a40;
|
||||
border-color: #343a40;
|
||||
}
|
||||
|
||||
.btn-dark:hover {
|
||||
color: #fff;
|
||||
background-color: #23272b;
|
||||
border-color: #1d2124;
|
||||
}
|
||||
|
||||
.btn-dark:focus, .btn-dark.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
|
||||
}
|
||||
|
||||
.btn-dark.disabled, .btn-dark:disabled {
|
||||
color: #fff;
|
||||
background-color: #343a40;
|
||||
border-color: #343a40;
|
||||
}
|
||||
|
||||
.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-dark.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #1d2124;
|
||||
border-color: #171a1d;
|
||||
}
|
||||
|
||||
.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-dark.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
color: #007bff;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.btn-outline-primary:focus, .btn-outline-primary.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
|
||||
color: #007bff;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-primary.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-primary.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
color: #6c757d;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
.btn-outline-secondary:hover {
|
||||
color: #fff;
|
||||
background-color: #6c757d;
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
.btn-outline-secondary:focus, .btn-outline-secondary.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
|
||||
color: #6c757d;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-secondary.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #6c757d;
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-secondary.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-success {
|
||||
color: #28a745;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.btn-outline-success:hover {
|
||||
color: #fff;
|
||||
background-color: #28a745;
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.btn-outline-success:focus, .btn-outline-success.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-success.disabled, .btn-outline-success:disabled {
|
||||
color: #28a745;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-success.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #28a745;
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-success.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-info {
|
||||
color: #aba8cc;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: #aba8cc;
|
||||
}
|
||||
|
||||
.btn-outline-info:hover {
|
||||
color: #fff;
|
||||
background-color: #8c88b9;
|
||||
border-color: #8c88b9;
|
||||
}
|
||||
|
||||
.btn-outline-info:focus, .btn-outline-info.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(140, 112, 180, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-info.disabled, .btn-outline-info:disabled {
|
||||
color: #dfb9ed;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-info.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #7671ac;
|
||||
border-color: #6d68a6;
|
||||
}
|
||||
|
||||
.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-info.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(227, 139, 231, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-warning {
|
||||
color: #ffc107;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: #ffc107;
|
||||
}
|
||||
|
||||
.btn-outline-warning:hover {
|
||||
color: #212529;
|
||||
background-color: #ffc107;
|
||||
border-color: #ffc107;
|
||||
}
|
||||
|
||||
.btn-outline-warning:focus, .btn-outline-warning.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-warning.disabled, .btn-outline-warning:disabled {
|
||||
color: #ffc107;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-warning.dropdown-toggle {
|
||||
color: #212529;
|
||||
background-color: #ffc107;
|
||||
border-color: #ffc107;
|
||||
}
|
||||
|
||||
.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-warning.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-danger {
|
||||
color: #dc3545;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
.btn-outline-danger:hover {
|
||||
color: #fff;
|
||||
background-color: #dc3545;
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
.btn-outline-danger:focus, .btn-outline-danger.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-danger.disabled, .btn-outline-danger:disabled {
|
||||
color: #dc3545;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-danger.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #dc3545;
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-danger.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
color: #f8f9fa;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.btn-outline-light:hover {
|
||||
color: #212529;
|
||||
background-color: #f8f9fa;
|
||||
border-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.btn-outline-light:focus, .btn-outline-light.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-light.disabled, .btn-outline-light:disabled {
|
||||
color: #f8f9fa;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-light.dropdown-toggle {
|
||||
color: #212529;
|
||||
background-color: #f8f9fa;
|
||||
border-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-light.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
color: #343a40;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: #343a40;
|
||||
}
|
||||
|
||||
.btn-outline-dark:hover {
|
||||
color: #fff;
|
||||
background-color: #343a40;
|
||||
border-color: #343a40;
|
||||
}
|
||||
|
||||
.btn-outline-dark:focus, .btn-outline-dark.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-dark.disabled, .btn-outline-dark:disabled {
|
||||
color: #343a40;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-dark.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #343a40;
|
||||
border-color: #343a40;
|
||||
}
|
||||
|
||||
.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-dark.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
{{#ifEqual mode 'openNewTab'}}
|
||||
{{#if value}}
|
||||
<a href="{{url}}" class="btn btn-{{style}} {{buttonSize}}" title="{{title}}" target="_blank">
|
||||
{{#if iconLeft}}
|
||||
<span class="{{iconLeft}}"></span>
|
||||
{{/if}}
|
||||
{{#if buttonLabel}}
|
||||
<span> {{buttonLabel}} </span>
|
||||
{{/if}}
|
||||
{{#if iconRight}}
|
||||
<span class="{{iconRight}}"></span>
|
||||
{{/if}}
|
||||
</a>
|
||||
{{else}}
|
||||
{{#if valueIsSet}}
|
||||
<span class="none-value">{{translate 'None'}}</span>
|
||||
{{else}}
|
||||
<span class="loading-value">...</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/ifEqual}}
|
||||
|
||||
{{#ifEqual mode 'openUrl'}}
|
||||
{{#if value}}
|
||||
<a href="{{url}}" class="btn btn-{{style}} {{buttonSize}}" title="{{title}}">
|
||||
{{#if iconLeft}}
|
||||
<span class="{{iconLeft}}"></span>
|
||||
{{/if}}
|
||||
{{#if buttonLabel}}
|
||||
<span> {{buttonLabel}} </span>
|
||||
{{/if}}
|
||||
{{#if iconRight}}
|
||||
<span class="{{iconRight}}"></span>
|
||||
{{/if}}
|
||||
</a>
|
||||
{{else}}
|
||||
{{#if valueIsSet}}
|
||||
<span class="none-value">{{translate 'None'}}</span>
|
||||
{{else}}
|
||||
<span class="loading-value">...</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/ifEqual}}
|
||||
|
||||
{{#ifEqual mode 'openPopup'}}
|
||||
{{#if value}}
|
||||
<button class="btn btn-{{style}} {{buttonSize}}" title="{{title}}" data-action="open-popup">
|
||||
{{#if iconLeft}}
|
||||
<span class="{{iconLeft}}"></span>
|
||||
{{/if}}
|
||||
{{#if buttonLabel}}
|
||||
<span> {{buttonLabel}} </span>
|
||||
{{/if}}
|
||||
{{#if iconRight}}
|
||||
<span class="{{iconRight}}"></span>
|
||||
{{/if}}
|
||||
</button>
|
||||
{{else}}
|
||||
{{#if valueIsSet}}
|
||||
<span class="none-value">{{translate 'None'}}</span>
|
||||
{{else}}
|
||||
<span class="loading-value">...</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/ifEqual}}
|
||||
|
||||
{{#ifEqual mode 'openModal'}}
|
||||
{{#if value}}
|
||||
<button class="btn btn-{{style}} {{buttonSize}}" title="{{title}}" data-action="open-modal">
|
||||
{{#if iconLeft}}
|
||||
<span class="{{iconLeft}}"></span>
|
||||
{{/if}}
|
||||
{{#if buttonLabel}}
|
||||
<span> {{buttonLabel}} </span>
|
||||
{{/if}}
|
||||
{{#if iconRight}}
|
||||
<span class="{{iconRight}}"></span>
|
||||
{{/if}}
|
||||
</button>
|
||||
{{else}}
|
||||
{{#if valueIsSet}}
|
||||
<span class="none-value">{{translate 'None'}}</span>
|
||||
{{else}}
|
||||
<span class="loading-value">...</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/ifEqual}}
|
||||
|
||||
{{#ifEqual mode 'openEspoModal'}}
|
||||
{{#if value}}
|
||||
<button class="btn btn-{{style}} {{buttonSize}}" title="{{title}}" data-action="espo-modal">
|
||||
{{#if iconLeft}}
|
||||
<span class="{{iconLeft}}"></span>
|
||||
{{/if}}
|
||||
{{#if buttonLabel}}
|
||||
<span> {{buttonLabel}} </span>
|
||||
{{/if}}
|
||||
{{#if iconRight}}
|
||||
<span class="{{iconRight}}"></span>
|
||||
{{/if}}
|
||||
</button>
|
||||
{{else}}
|
||||
{{#if valueIsSet}}
|
||||
<span class="none-value">{{translate 'None'}}</span>
|
||||
{{else}}
|
||||
<span class="loading-value">...</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/ifEqual}}
|
||||
|
||||
{{#ifEqual mode 'quickCreate'}}
|
||||
{{#if value}}
|
||||
<button class="btn btn-{{style}} {{buttonSize}}" title="{{title}}" data-action="quick-create">
|
||||
{{#if iconLeft}}
|
||||
<span class="{{iconLeft}}"></span>
|
||||
{{/if}}
|
||||
{{#if buttonLabel}}
|
||||
<span> {{buttonLabel}} </span>
|
||||
{{/if}}
|
||||
{{#if iconRight}}
|
||||
<span class="{{iconRight}}"></span>
|
||||
{{/if}}
|
||||
</button>
|
||||
{{else}}
|
||||
{{#if valueIsSet}}
|
||||
<span class="none-value">{{translate 'None'}}</span>
|
||||
{{else}}
|
||||
<span class="loading-value">...</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/ifEqual}}
|
||||
|
||||
{{#ifEqual mode 'runEspoWorkflow'}}
|
||||
{{#if value}}
|
||||
<button class="btn btn-{{style}} {{buttonSize}}" title="{{title}}" data-action="run-workflow">
|
||||
{{#if iconLeft}}
|
||||
<span class="{{iconLeft}}"></span>
|
||||
{{/if}}
|
||||
{{#if buttonLabel}}
|
||||
<span> {{buttonLabel}} </span>
|
||||
{{/if}}
|
||||
{{#if iconRight}}
|
||||
<span class="{{iconRight}}"></span>
|
||||
{{/if}}
|
||||
</button>
|
||||
{{else}}
|
||||
{{#if valueIsSet}}
|
||||
<span class="none-value">{{translate 'None'}}</span>
|
||||
{{else}}
|
||||
<span class="loading-value">...</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/ifEqual}}
|
||||
@@ -0,0 +1,12 @@
|
||||
<input
|
||||
type="text"
|
||||
class="main-element form-control"
|
||||
placeholder="{{placeholder}}"
|
||||
data-name="{{name}}"
|
||||
value="{{value}}"
|
||||
{{#if params.maxLength}} maxlength="{{params.maxLength}}"{{/if}}
|
||||
autocomplete="espo-{{name}}"
|
||||
{{#if noSpellCheck}}
|
||||
spellcheck="false"
|
||||
{{/if}}
|
||||
>
|
||||
105
client/custom/modules/link-button/res/templates/fields/list.tpl
Normal file
105
client/custom/modules/link-button/res/templates/fields/list.tpl
Normal file
@@ -0,0 +1,105 @@
|
||||
{{#ifEqual mode 'openNewTab'}}
|
||||
{{#if value}}
|
||||
<a href="{{url}}" class="btn btn-{{style}} label-md" style="height:24px" title="{{title}}" target="_blank">
|
||||
{{#if iconLeft}}
|
||||
<span class="{{iconLeft}}"></span>
|
||||
{{/if}}
|
||||
{{#if buttonLabel}}
|
||||
<span> {{buttonLabel}} </span>
|
||||
{{/if}}
|
||||
{{#if iconRight}}
|
||||
<span class="{{iconRight}}"></span>
|
||||
{{/if}}
|
||||
</a>
|
||||
{{/if}}
|
||||
{{/ifEqual}}
|
||||
{{#ifEqual mode 'openUrl'}}
|
||||
{{#if value}}
|
||||
<a href="{{url}}" class="btn btn-{{style}} label-md" style="height:24px" title="{{title}}">
|
||||
{{#if iconLeft}}
|
||||
<span class="{{iconLeft}}"></span>
|
||||
{{/if}}
|
||||
{{#if buttonLabel}}
|
||||
<span> {{buttonLabel}} </span>
|
||||
{{/if}}
|
||||
{{#if iconRight}}
|
||||
<span class="{{iconRight}}"></span>
|
||||
{{/if}}
|
||||
</a>
|
||||
{{/if}}
|
||||
{{/ifEqual}}
|
||||
{{#ifEqual mode 'openPopup'}}
|
||||
{{#if value}}
|
||||
<button class="btn btn-{{style}} label-md" style="height:24px" title="{{title}}" data-action="open-popup">
|
||||
{{#if iconLeft}}
|
||||
<span class="{{iconLeft}}"></span>
|
||||
{{/if}}
|
||||
{{#if buttonLabel}}
|
||||
<span> {{buttonLabel}} </span>
|
||||
{{/if}}
|
||||
{{#if iconRight}}
|
||||
<span class="{{iconRight}}"></span>
|
||||
{{/if}}
|
||||
</button>
|
||||
{{/if}}
|
||||
{{/ifEqual}}
|
||||
{{#ifEqual mode 'openModal'}}
|
||||
{{#if value}}
|
||||
<button class="btn btn-{{style}} label-md" style="height:24px" title="{{title}}" data-action="open-modal">
|
||||
{{#if iconLeft}}
|
||||
<span class="{{iconLeft}}"></span>
|
||||
{{/if}}
|
||||
{{#if buttonLabel}}
|
||||
<span> {{buttonLabel}} </span>
|
||||
{{/if}}
|
||||
{{#if iconRight}}
|
||||
<span class="{{iconRight}}"></span>
|
||||
{{/if}}
|
||||
</button>
|
||||
{{/if}}
|
||||
{{/ifEqual}}
|
||||
{{#ifEqual mode 'openEspoModal'}}
|
||||
{{#if value}}
|
||||
<button class="btn btn-{{style}} label-md" style="height:24px" title="{{title}}" data-action="espo-modal">
|
||||
{{#if iconLeft}}
|
||||
<span class="{{iconLeft}}"></span>
|
||||
{{/if}}
|
||||
{{#if buttonLabel}}
|
||||
<span> {{buttonLabel}} </span>
|
||||
{{/if}}
|
||||
{{#if iconRight}}
|
||||
<span class="{{iconRight}}"></span>
|
||||
{{/if}}
|
||||
</button>
|
||||
{{/if}}
|
||||
{{/ifEqual}}
|
||||
{{#ifEqual mode 'quickCreate'}}
|
||||
{{#if value}}
|
||||
<button class="btn btn-{{style}} label-md" style="height:24px" title="{{title}}" data-action="quick-create">
|
||||
{{#if iconLeft}}
|
||||
<span class="{{iconLeft}}"></span>
|
||||
{{/if}}
|
||||
{{#if buttonLabel}}
|
||||
<span> {{buttonLabel}} </span>
|
||||
{{/if}}
|
||||
{{#if iconRight}}
|
||||
<span class="{{iconRight}}"></span>
|
||||
{{/if}}
|
||||
</button>
|
||||
{{/if}}
|
||||
{{/ifEqual}}
|
||||
{{#ifEqual mode 'runEspoWorkflow'}}
|
||||
{{#if value}}
|
||||
<button class="btn btn-{{style}} label-md" style="height:24px" title="{{title}}" data-action="run-workflow">
|
||||
{{#if iconLeft}}
|
||||
<span class="{{iconLeft}}"></span>
|
||||
{{/if}}
|
||||
{{#if buttonLabel}}
|
||||
<span> {{buttonLabel}} </span>
|
||||
{{/if}}
|
||||
{{#if iconRight}}
|
||||
<span class="{{iconRight}}"></span>
|
||||
{{/if}}
|
||||
</button>
|
||||
{{/if}}
|
||||
{{/ifEqual}}
|
||||
@@ -0,0 +1 @@
|
||||
<iframe class="link-button-modal" title="URL Preview" src="{{url}}" width="100%" height="100%" frameborder="0"></iframe>
|
||||
@@ -0,0 +1,24 @@
|
||||
define('link-button:views/admin/field-manager/fields/confirmation-dialog', ['views/fields/bool'], (Dep) => {
|
||||
return class extends Dep {
|
||||
|
||||
setup() {
|
||||
super.setup();
|
||||
this.listenTo(this.model, 'change:mode', this.toggleConfirmationDialog);
|
||||
}
|
||||
|
||||
afterRender() {
|
||||
super.afterRender();
|
||||
this.toggleConfirmationDialog();
|
||||
}
|
||||
|
||||
toggleConfirmationDialog() {
|
||||
if (this.model.get('mode') === 'runEspoWorkflow') {
|
||||
this.getParentView().showField('confirmationDialog');
|
||||
this.getParentView().showField('hideOriginalWorkflowAction');
|
||||
} else {
|
||||
this.getParentView().hideField('confirmationDialog');
|
||||
this.getParentView().hideField('hideOriginalWorkflowAction');
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,22 @@
|
||||
define('link-button:views/admin/field-manager/fields/confirmation-text', ['views/fields/text'], (Dep) => {
|
||||
return class extends Dep {
|
||||
|
||||
setup() {
|
||||
super.setup();
|
||||
this.listenTo(this.model, 'change:confirmationDialog change:mode', this.toggleConfirmationText);
|
||||
}
|
||||
|
||||
afterRender() {
|
||||
super.afterRender();
|
||||
this.toggleConfirmationText();
|
||||
}
|
||||
|
||||
toggleConfirmationText() {
|
||||
if (this.model.get('confirmationDialog') === true && this.model.get('mode') === 'runEspoWorkflow') {
|
||||
this.getParentView().showField('confirmationText');
|
||||
} else {
|
||||
this.getParentView().hideField('confirmationText');
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,23 @@
|
||||
define('link-button:views/admin/field-manager/fields/mode', ['views/fields/enum'], (Dep) => {
|
||||
return class extends Dep {
|
||||
|
||||
setup() {
|
||||
super.setup();
|
||||
this.updateModeOptions();
|
||||
}
|
||||
|
||||
afterRender() {
|
||||
super.afterRender();
|
||||
}
|
||||
|
||||
updateModeOptions() {
|
||||
const isAdvancedPackInstalled = this.getHelper().getAppParam('isAdvancedPackInstalled');
|
||||
const modeOptions = this.model.getFieldParam('mode', 'options') || [];
|
||||
|
||||
if (isAdvancedPackInstalled) {
|
||||
modeOptions.push('runEspoWorkflow');
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,24 @@
|
||||
define('link-button:views/admin/field-manager/fields/popup', ['views/fields/int'], (Dep) => {
|
||||
return class extends Dep {
|
||||
|
||||
setup() {
|
||||
super.setup();
|
||||
this.listenTo(this.model, 'change:mode', this.togglePopupSize);
|
||||
}
|
||||
|
||||
afterRender() {
|
||||
super.afterRender();
|
||||
this.togglePopupSize();
|
||||
}
|
||||
|
||||
togglePopupSize() {
|
||||
if (this.model.get('mode') === 'openPopup') {
|
||||
this.getParentView().showField('popupHeight');
|
||||
this.getParentView().showField('popupWidth');
|
||||
} else {
|
||||
this.getParentView().hideField('popupHeight');
|
||||
this.getParentView().hideField('popupWidth');
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,242 @@
|
||||
define('link-button:views/fields/link-button', ['views/fields/url'], (Dep) => {
|
||||
return class extends Dep {
|
||||
|
||||
type = 'link-button'
|
||||
editTemplate = 'link-button:fields/edit'
|
||||
listTemplate = 'link-button:fields/list'
|
||||
detailTemplate = 'link-button:fields/detail'
|
||||
|
||||
setup() {
|
||||
super.setup();
|
||||
|
||||
this.events['click button[data-action="open-modal"]'] = () => {
|
||||
this.actionOpenModal();
|
||||
};
|
||||
|
||||
this.events['click button[data-action="espo-modal"]'] = () => {
|
||||
this.actionEspoModal();
|
||||
};
|
||||
|
||||
this.events['click button[data-action="open-popup"]'] = () => {
|
||||
this.actionOpenPopup();
|
||||
};
|
||||
|
||||
this.events['click button[data-action="quick-create"]'] = () => {
|
||||
this.actionQuickCreate();
|
||||
};
|
||||
|
||||
this.events['click button[data-action="run-workflow"]'] = () => {
|
||||
this.actionCheckWorkFlow();
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
afterRender() {
|
||||
super.afterRender();
|
||||
const superParent = this.getParentView().getParentView()._parentView;
|
||||
const url = this.model.get(this.name);
|
||||
const hideLabel = this.model.getFieldParam(this.name, 'hideLabel');
|
||||
const isDetailMode = this.isDetailMode();
|
||||
const hideOriginalWorkflowAction = this.model.getFieldParam(this.name, 'hideOriginalWorkflowAction');
|
||||
const mode = this.model.getFieldParam(this.name, 'mode');
|
||||
|
||||
if (hideLabel === true) {
|
||||
this.getLabelElement().hide();
|
||||
}
|
||||
|
||||
if (url && isDetailMode && hideOriginalWorkflowAction === true && mode === 'runEspoWorkflow') {
|
||||
const workflowId = url.split('#')[1]?.split('/').pop();
|
||||
superParent.hideHeaderActionItem(`runWorkflow_${workflowId}`);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
data() {
|
||||
return {
|
||||
...super.data(),
|
||||
iconLeft: this.model.getFieldParam(this.name, 'iconLeft'),
|
||||
iconRight: this.model.getFieldParam(this.name, 'iconRight'),
|
||||
mode: this.model.getFieldParam(this.name, 'mode'),
|
||||
buttonLabel: this.model.getFieldParam(this.name, 'buttonLabel') || null,
|
||||
placeholder: this.model.getFieldParam(this.name, 'placeholder') || null,
|
||||
title: this.model.getFieldParam(this.name, 'title') || null,
|
||||
buttonSize: this.model.getFieldParam(this.name, 'buttonSize'),
|
||||
style: this.model.getFieldParam(this.name, 'style'),
|
||||
};
|
||||
}
|
||||
|
||||
actionOpenModal() {
|
||||
this.notify('Loading...');
|
||||
this.createView('dialog', 'link-button:views/modals/button-url', {
|
||||
buttonLabel: this.model.getFieldParam(this.name, 'buttonLabel') || null,
|
||||
url: this.model.get(this.name),
|
||||
closeButton: true,
|
||||
backdrop: true,
|
||||
}, function (view) {
|
||||
view.render();
|
||||
this.notify(false);
|
||||
this.listenToOnce(view, 'close', () => {
|
||||
this.clearView('dialog');
|
||||
});
|
||||
}, this);
|
||||
}
|
||||
|
||||
actionEspoModal() {
|
||||
let model = this.model;
|
||||
let url = this.model.get(this.name);
|
||||
let hashPart = url.split('#')[1];
|
||||
if (!hashPart) {
|
||||
return Espo.Ui.error('Error: this is not a valid CRM URL');
|
||||
}
|
||||
|
||||
let parts = hashPart.split('/');
|
||||
let entityType = parts[0];
|
||||
if (!entityType) {
|
||||
return Espo.Ui.error('Error: no entity type found');
|
||||
}
|
||||
|
||||
let recordId = parts[parts.length - 1];
|
||||
if (!recordId) {
|
||||
return Espo.Ui.error('Error: no record ID found');
|
||||
}
|
||||
|
||||
this.notify('Loading...');
|
||||
this.createView('quickView', 'link-button:views/modals/espo-modal', {
|
||||
scope: entityType,
|
||||
id: recordId,
|
||||
removeDisabled: true,
|
||||
}, function (view) {
|
||||
view.render();
|
||||
this.notify(false);
|
||||
this.listenTo(view, 'after:save', () => {
|
||||
model.fetch();
|
||||
});
|
||||
this.listenToOnce(view, 'close', () => {
|
||||
this.clearView('quickView');
|
||||
});
|
||||
}, this);
|
||||
}
|
||||
|
||||
actionQuickCreate() {
|
||||
let model = this.model;
|
||||
let url = this.model.get(this.name);
|
||||
let hashPart = url.split('#')[1];
|
||||
if (!hashPart) {
|
||||
return Espo.Ui.error('Error: this is not a valid CRM URL');
|
||||
}
|
||||
|
||||
let parts = hashPart.split('/');
|
||||
let entityTypeModal = parts[0];
|
||||
if (!entityTypeModal) {
|
||||
return Espo.Ui.error('Error: no entity type found');
|
||||
}
|
||||
|
||||
let viewName;
|
||||
if (entityTypeModal === 'Email') {
|
||||
viewName = 'views/modals/compose-email';
|
||||
} else {
|
||||
viewName = this.getMetadata().get('clientDefs.' + entityTypeModal + '.modalViews.edit') || 'views/modals/edit';
|
||||
}
|
||||
|
||||
let attributes = {
|
||||
parentId: model.id,
|
||||
parentType: model.entityType,
|
||||
parentName: model.get('name'),
|
||||
};
|
||||
|
||||
if (
|
||||
entityTypeModal === 'Email' &&
|
||||
['Contact', 'Lead', 'Account'].includes(model.entityType) &&
|
||||
model.get('emailAddress')
|
||||
) {
|
||||
attributes.to = model.get('emailAddress');
|
||||
attributes.nameHash = {};
|
||||
attributes.nameHash[model.get('emailAddress')] = model.get('name');
|
||||
}
|
||||
|
||||
this.notify('Loading...');
|
||||
this.createView('quickCreate', viewName, {
|
||||
scope: entityTypeModal,
|
||||
attributes: attributes,
|
||||
}, function (view) {
|
||||
view.render();
|
||||
this.notify(false);
|
||||
this.listenTo(view, 'after:save', () => {
|
||||
model.fetch();
|
||||
});
|
||||
this.listenToOnce(view, 'close', () => {
|
||||
this.clearView('quickCreate');
|
||||
//model.collection.fetch();
|
||||
});
|
||||
}, this);
|
||||
}
|
||||
|
||||
actionCheckWorkFlow() {
|
||||
let message = this.translate('confirmation', 'messages');
|
||||
let confirmationText = this.model.getFieldParam(this.name, 'confirmationText');
|
||||
let confirmation = this.model.getFieldParam(this.name, 'confirmationDialog');
|
||||
if (confirmationText) {
|
||||
message = this.getHelper().transformMarkdownText(confirmationText).toString();
|
||||
}
|
||||
|
||||
if (!confirmation) {
|
||||
this.actionEspoWorkFlow();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
Espo.Ui.confirm(message, {
|
||||
confirmText: this.translate('Yes', 'labels'),
|
||||
cancelText: this.translate('No', 'labels'),
|
||||
backdrop: true,
|
||||
isHtml: true,
|
||||
})
|
||||
.then(() => this.actionEspoWorkFlow());
|
||||
}
|
||||
|
||||
|
||||
actionEspoWorkFlow() {
|
||||
let model = this.model;
|
||||
let url = model.get(this.name);
|
||||
let hashPart = url.split('#')[1];
|
||||
if (!hashPart) {
|
||||
return Espo.Ui.error('Error: this is not a valid workflow URL');
|
||||
}
|
||||
let parts = hashPart.split('/');
|
||||
let entityType = parts[0];
|
||||
if (!entityType) {
|
||||
return Espo.Ui.error('Error: no entity type found');
|
||||
}
|
||||
let workflowId = parts[parts.length - 1];
|
||||
if (entityType !== 'Workflow') {
|
||||
return Espo.Ui.error(('Error: not a workflow'));
|
||||
}
|
||||
|
||||
Espo.Ajax.getRequest('LinkButton/WorkflowCheck/' + workflowId)
|
||||
.then(response => {
|
||||
if (response.isManual === false) {
|
||||
return Espo.Ui.error(('Error: not a manual or active workflow'));
|
||||
}
|
||||
|
||||
Espo.Ajax.postRequest('WorkflowManual/action/run', {
|
||||
targetId: model.id,
|
||||
id: workflowId,
|
||||
}).then(() => {
|
||||
model.fetch().then(() => {
|
||||
Espo.Ui.success(('Done'));
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
Espo.Ui.error(('Error checking workflow type'));
|
||||
});
|
||||
}
|
||||
|
||||
actionOpenPopup() {
|
||||
const popupHeight = this.model.getFieldParam(this.name, 'popupHeight') || 800;
|
||||
const popupWidth = this.model.getFieldParam(this.name, 'popupWidth') || 600;
|
||||
window.open(this.model.get(this.name), '_blank', `scrollbars=yes,height=${popupHeight},width=${popupWidth}`);
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,20 @@
|
||||
define('link-button:views/modals/button-url', ['views/modal'], (Dep) => {
|
||||
return class extends Dep {
|
||||
|
||||
template = 'link-button:modals/button-url'
|
||||
fitHeight = true
|
||||
isCollapsable = true
|
||||
|
||||
data() {
|
||||
return {
|
||||
...super.data(),
|
||||
url: this.options.url
|
||||
};
|
||||
}
|
||||
|
||||
setup() {
|
||||
super.setup();
|
||||
this.headerText = document.title || this.options.buttonLabel || 'Modal';
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
define('link-button:views/modals/espo-modal', ['views/modals/detail'], (Dep) => {
|
||||
return class extends Dep {
|
||||
|
||||
isCollapsable = true
|
||||
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user