Initial commit: CloudOps infrastructure platform
This commit is contained in:
root
@@ -0,0 +1,389 @@
|
||||
.phone-preview__button--outer {
|
||||
background: var(--text-primary);
|
||||
}
|
||||
|
||||
.phone-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: solid 10px var(--text-primary);
|
||||
width: 336px;
|
||||
height: 725px;
|
||||
padding: 0;
|
||||
border-radius: 50px;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 0 5px var(--text-primary);
|
||||
position: relative;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.phone-preview__silence-switch,
|
||||
.phone-preview__volume-rocker--top,
|
||||
.phone-preview__volume-rocker--bottom {
|
||||
position: absolute;
|
||||
margin-left: -19px;
|
||||
width: 4px;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
.phone-preview__silence-switch {
|
||||
margin-top: 90px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.phone-preview__volume-rocker--top {
|
||||
margin-top: 140px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.phone-preview__volume-rocker--bottom {
|
||||
margin-top: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.phone-preview__power-button {
|
||||
position: absolute;
|
||||
margin-top: 200px;
|
||||
width: 4px;
|
||||
height: 70px;
|
||||
border-radius: 0 10px 10px 0;
|
||||
right: -18px;
|
||||
}
|
||||
|
||||
.phone-preview__top-section {
|
||||
background: var(--layer-01);
|
||||
min-height: 100px;
|
||||
margin: 0;
|
||||
border-radius: 40px 40px 0 0;
|
||||
border-bottom: 1px solid var(--border-subtle-01);
|
||||
}
|
||||
|
||||
.phone-preview__top-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-inline: 20px;
|
||||
}
|
||||
|
||||
.phone-preview__time {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.phone-preview__notch {
|
||||
width: 180px;
|
||||
background: var(--text-primary);
|
||||
height: 20px;
|
||||
border-radius: 0 0 20px 20px;
|
||||
padding-top: 5px;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.phone-preview__user-avatar,
|
||||
.phone-preview__user-name {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.phone-preview__user-avatar {
|
||||
margin-top: 10px;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
font-size: 40px;
|
||||
color: var(--text-placeholder);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.phone-preview__user-name {
|
||||
margin-top: 3px;
|
||||
height: 10px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.phone-preview__speaker,
|
||||
.phone-preview__front-camera {
|
||||
height: 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.phone-preview__speaker {
|
||||
width: 60px;
|
||||
background: var(--text-secondary);
|
||||
margin-left: 55px;
|
||||
}
|
||||
|
||||
.phone-preview__front-camera {
|
||||
width: 5px;
|
||||
background: var(--support-info);
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
||||
.phone-preview__status-icons {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.phone-preview__back-arrow {
|
||||
position: absolute;
|
||||
border: solid var(--primary-60);
|
||||
border-width: 0 3px 3px 0;
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
margin: 45px 0 0 13px;
|
||||
border-radius: 2px;
|
||||
opacity: 0.9;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.phone-preview__back-arrow:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.phone-preview__messages {
|
||||
margin-top: 18px;
|
||||
background: var(--background);
|
||||
height: 305px;
|
||||
overflow: scroll;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.phone-preview__messages::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.phone-preview__keyboard {
|
||||
background: var(--layer-accent-01);
|
||||
border-radius: 0 0 40px 40px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.phone-preview__keyboard-input {
|
||||
background: var(--background);
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.phone-preview__input-field {
|
||||
border-radius: 35px;
|
||||
border: 1px solid var(--border-subtle-01);
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
margin: 0 10px;
|
||||
overflow: scroll;
|
||||
caret-color: var(--primary-60);
|
||||
}
|
||||
|
||||
.phone-preview__input-addon {
|
||||
margin-left: 10px;
|
||||
color: var(--text-placeholder);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.phone-preview__bottom-symbols {
|
||||
margin: 20px auto 0;
|
||||
font-size: 25px;
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-inline: 20px;
|
||||
}
|
||||
|
||||
.phone-preview__keypad {
|
||||
background: var(--layer-accent-01);
|
||||
width: 100%;
|
||||
height: 190px;
|
||||
padding-top: 16px;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.phone-preview__key-spacer {
|
||||
width: 336px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.phone-preview__key--white,
|
||||
.phone-preview__key--space {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
background: var(--background);
|
||||
border-radius: 6px;
|
||||
padding: 9px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--border-strong-01);
|
||||
height: 35px;
|
||||
transition: var(--transition-all-productive);
|
||||
}
|
||||
|
||||
.phone-preview__key--white {
|
||||
margin: 0;
|
||||
width: 27px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.phone-preview__key--space {
|
||||
margin: 1px;
|
||||
width: 142px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.phone-preview__key-row {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.phone-preview__key--grey {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--border-tile-01);
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
padding: 9px;
|
||||
width: auto;
|
||||
height: 35px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--border-strong-01);
|
||||
font-size: 13px;
|
||||
transition: var(--transition-all-productive);
|
||||
}
|
||||
|
||||
.phone-preview__key--grey:hover,
|
||||
.phone-preview__key--clickable:hover {
|
||||
background: var(--layer-accent-hover-02);
|
||||
}
|
||||
|
||||
.phone-preview__key--backspace {
|
||||
width: 40px;
|
||||
padding: 8px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.phone-preview__key--backspace > i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.phone-preview__home-button {
|
||||
margin: 15px auto 4px;
|
||||
border-radius: 50px;
|
||||
width: 125px;
|
||||
height: 5px;
|
||||
background: var(--text-primary);
|
||||
}
|
||||
|
||||
.phone-preview__cursor {
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
opacity: 1;
|
||||
color: var(--primary-60);
|
||||
padding: 2px;
|
||||
font-size: 22px;
|
||||
right: 10px;
|
||||
top: 26%;
|
||||
}
|
||||
|
||||
.phone-preview__send-button:hover,
|
||||
.phone-preview__cursor:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.phone-preview__send-button:active,
|
||||
.phone-preview__cursor:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.phone-preview__message {
|
||||
border-radius: 20px;
|
||||
margin: 0 15px 10px;
|
||||
padding: 10px 15px;
|
||||
position: relative;
|
||||
animation: fadeInOpacity 0.4s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeInOpacity {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
.phone-preview__message--to {
|
||||
background-color: var(--primary-60);
|
||||
color: var(--text-on-color);
|
||||
margin-left: 80px;
|
||||
transition: width 2s;
|
||||
}
|
||||
|
||||
.phone-preview__message--from {
|
||||
background-color: var(--layer-accent-01);
|
||||
color: var(--text-primary);
|
||||
margin-right: 80px;
|
||||
}
|
||||
|
||||
.phone-preview__message-content {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.phone-preview__message--to:before {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: 93%;
|
||||
top: 30%;
|
||||
position: absolute;
|
||||
border-top: 13px solid transparent;
|
||||
border-left: 26px solid var(--primary-60);
|
||||
border-bottom: 13px solid transparent;
|
||||
border-radius: 40px;
|
||||
transform: rotate(40deg);
|
||||
}
|
||||
|
||||
.phone-preview__message--from:before {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
right: 92%;
|
||||
top: 35%;
|
||||
position: absolute;
|
||||
border-top: 13px solid transparent;
|
||||
border-right: 26px solid var(--layer-accent-01);
|
||||
border-bottom: 13px solid transparent;
|
||||
border-radius: 40px;
|
||||
transform: rotate(-40deg);
|
||||
}
|
||||
|
||||
textarea:focus,
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.phone-preview__key--shift {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.phone-preview__key--emoji {
|
||||
font-size: 16px;
|
||||
padding: 5px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.phone-preview__key--return {
|
||||
padding: 0 10px;
|
||||
width: 60px;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
@@ -0,0 +1,115 @@
|
||||
/** SmsBundle **/
|
||||
Mautic.smsOnLoad = function (container, response) {
|
||||
const smsMessage = mQuery('#sms_message');
|
||||
|
||||
if (smsMessage.length) {
|
||||
Mautic.setSmsCharactersCount(smsMessage);
|
||||
smsMessage.on('input', () => {
|
||||
Mautic.setSmsCharactersCount(smsMessage);
|
||||
});
|
||||
}
|
||||
|
||||
if (mQuery(container + ' #list-search').length) {
|
||||
Mautic.activateSearchAutocomplete('list-search', 'sms');
|
||||
}
|
||||
|
||||
if (mQuery('table.sms-list').length) {
|
||||
var ids = [];
|
||||
mQuery('td.col-stats').each(function () {
|
||||
var id = mQuery(this).attr('data-stats');
|
||||
ids.push(id);
|
||||
});
|
||||
|
||||
// Get all stats numbers in batches of 10
|
||||
while (ids.length > 0) {
|
||||
let batchIds = ids.splice(0, 10);
|
||||
Mautic.ajaxActionRequest(
|
||||
'sms:getSmsCountStats',
|
||||
{ids: batchIds},
|
||||
function (response) {
|
||||
if (response.success && response.stats) {
|
||||
for (var i = 0; i < response.stats.length; i++) {
|
||||
var stat = response.stats[i];
|
||||
if (mQuery('#pending-' + stat.id).length) {
|
||||
if (stat.pending) {
|
||||
mQuery('#pending-' + stat.id + ' > a').html(stat.pending);
|
||||
mQuery('#pending-' + stat.id).removeClass('hide');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
false,
|
||||
true
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Mautic.initSmsAtWho();
|
||||
};
|
||||
|
||||
Mautic.setSmsCharactersCount = function (smsMessage) {
|
||||
mQuery('#sms_nb_char').text((smsMessage.val().length))
|
||||
};
|
||||
|
||||
|
||||
Mautic.initSmsAtWho = function () {
|
||||
var smsMessage = mQuery('#sms_message, #send_sms_message');
|
||||
smsMessage.each(function () {
|
||||
var obj = mQuery(this);
|
||||
var callbackAttr = obj.attr('data-token-callback');
|
||||
if (typeof callbackAttr == 'undefined') {
|
||||
obj.attr('data-token-callback', 'sms:getBuilderTokens');
|
||||
obj.attr('data-token-activator', '{');
|
||||
obj.attr('data-token-visual', 'false');
|
||||
Mautic.initAtWho(obj, obj.attr('data-token-callback'));
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Mautic.selectSmsType = function(smsType) {
|
||||
if (smsType == 'list') {
|
||||
mQuery('#leadList').removeClass('hide');
|
||||
mQuery('#publishStatus').addClass('hide');
|
||||
mQuery('.page-header h3').text(mauticLang.newListSms);
|
||||
} else {
|
||||
mQuery('#publishStatus').removeClass('hide');
|
||||
mQuery('#leadList').addClass('hide');
|
||||
mQuery('.page-header h3').text(mauticLang.newTemplateSms);
|
||||
}
|
||||
|
||||
mQuery('#sms_smsType').val(smsType);
|
||||
|
||||
mQuery('body').removeClass('noscroll');
|
||||
|
||||
mQuery('.sms-type-modal').remove();
|
||||
mQuery('.sms-type-modal-backdrop').remove();
|
||||
};
|
||||
|
||||
Mautic.standardSmsUrl = function(options) {
|
||||
if (!options) {
|
||||
return;
|
||||
}
|
||||
|
||||
var url = options.windowUrl;
|
||||
if (url) {
|
||||
var editEmailKey = '/sms/edit/smsId';
|
||||
if (url.indexOf(editEmailKey) > -1) {
|
||||
options.windowUrl = url.replace('smsId', mQuery('#campaignevent_properties_sms').val());
|
||||
}
|
||||
}
|
||||
|
||||
return options;
|
||||
};
|
||||
|
||||
Mautic.disabledSmsAction = function(opener) {
|
||||
if (typeof opener == 'undefined') {
|
||||
opener = window;
|
||||
}
|
||||
|
||||
var sms = opener.mQuery('#campaignevent_properties_sms').val();
|
||||
|
||||
var disabled = sms === '' || sms === null;
|
||||
|
||||
opener.mQuery('#campaignevent_properties_editSmsButton').prop('disabled', disabled);
|
||||
};
|
||||
Reference in New Issue
Block a user