norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated Pipedrive's templates, mostly.

Browse Source
This commit is contained in:
Norm Rasmussen
2024-09-12 18:25:34 -04:00
parent 70b5d04b26
commit e78efae8aa
353 changed files with 5405 additions and 1769 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
Custom_Templates/customer_templates/Pipedrive - UserLearn/_account_avatar.html.liquid Normal file
View File

@ -0,0 +1,172 @@
<div class="avatar-text">
<h4 class="strong">
<span class="lang-en">Profile picture</span>
<span class="lang-de">Profilbild</span>
<span class="lang-es">Foto de perfil</span>
<span class="lang-fr">Photo de profil</span>
<span class="lang-br">Foto do perfil</span>
</h4>
<div>
<span class="lang-en">Photo helps personalize your account</span>
<span class="lang-de">Personalisieren Sie Ihr Konto mit einem Foto</span>
<span class="lang-es">La foto ayuda a personalizar su cuenta</span>
<span class="lang-fr">La photo permet de personnaliser votre compte</span>
<span class="lang-br">A foto ajuda a personalizar sua conta</span>
</div>
</div>
<img
alt="default avatar"
class="np-account-avatar-image"
src="https://s3.amazonaws.com/static.northpass.com/pipedrive/Avatar.png"
id="{{version}}_gravatar_img"
{% unless form.use_gravatar? %}style="display: none"{% endunless %}
/>
<img
alt="avatar"
class="np-account-avatar-image"
src="{% if form.secure_custom_avatar_url contains "https://secure.gravatar.com/avatar" %}https://s3.amazonaws.com/static.northpass.com/pipedrive/Avatar.png{% else %}{{ form.secure_custom_avatar_url }}{% endif %}"
id="{{version}}_custom_avatar_img"
{% if form.use_gravatar? %}style="display: none"{% endif %}
/>
<div class="np-account-avatar-choice">
<div class="np-form-field np-hidden">
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_true">
<span class="radio__input">
<input
id="{{version}}_learner_use_gravatar_true"
name="learner[use_gravatar]"
type="radio"
value="true"
{% if form.use_gravatar? %}checked{% endif %}
/>
<span class="np-button-color radio__control"></span>
</span>
<span class="radio__label"></span>
</label>
</div>
<div class="np-form-field np-hidden">
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_false">
<span class="radio__input">
<input
id="{{version}}_learner_use_gravatar_false"
name="learner[use_gravatar]"
type="radio"
value="false"
{% unless form.use_gravatar? %}checked{% endunless %}
/>
<span class="np-button-color radio__control"></span>
</span>
<span class="radio__label">
<span class="lang-en">Upload custom photo</span>
<span class="lang-de">Foto hochladen</span>
<span class="lang-es">Subir foto personalizada</span>
<span class="lang-fr">Téléverser une photo personnalisée</span>
<span class="lang-br">Carregar foto personalizada</span>
</span>
</label>
</div>
<button
id="{{version}}_upload_avatar"
type="button"
class="upload-avatar-button{% if form.use_gravatar? %} np-hidden{% endif %}"
>
<i class="far fa-paperclip"></i>
<span class="lang-en">Upload custom photo</span>
<span class="lang-de">Foto hochladen</span>
<span class="lang-es">Subir foto personalizada</span>
<span class="lang-fr">Téléverser une photo personnalisée</span>
<span class="lang-br">Carregar foto personalizada</span>
</button>
<div class="avatar-checkbox-wrapper" onclick="toggleGravatar()">
<div class="avatar-checkbox {% if form.use_gravatar? %} avatar-checkbox-selected {% endif %}" id="gravatar-checkbox">
<svg class="avatar-checkbox-mark" width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7856 0.703847C11.2758 0.349665 11.9541 0.468775 12.3006 0.969886C12.6471 1.471 12.5305 2.16435 12.0403 2.51853C9.89294 4.07001 7.5045 6.58636 4.89298 10.0653C4.50422 10.5832 3.76456 10.6485 3.29465 10.2065L0.350947 7.43754C-0.0907947 7.02203 -0.119375 6.31912 0.287111 5.86757C0.693596 5.41601 1.38122 5.3868 1.82296 5.80231L3.89947 7.75555C6.35518 4.59965 8.64604 2.24967 10.7856 0.703847Z" fill="white"/>
</svg>
</div>
<span>
<span class="lang-en">Use default avatar</span>
<span class="lang-de">Standard-Avatar verwenden</span>
<span class="lang-es">Usar avatar predeterminado</span>
<span class="lang-fr">Utiliser l'avatar par défaut</span>
<span class="lang-br">Use o avatar padrão</span>
</span>
</div>
</div>
<style>
#desktop_custom_avatar_img {
border-radius: 50%;
border: 2px solid #E4E6E9;
}
.avatar-text > h4 {
margin-bottom: 20px;
}
.np-account-avatar-choice {
margin-left: 0;
}
.avatar-checkbox {
width: 20px;
height: 20px;
border: 1px solid var(--black-digital);
border-radius: 2px;
}
.avatar-checkbox-wrapper {
display: flex;
gap: 10px;
align-items: center;
cursor: pointer;
}
.avatar-checkbox.avatar-checkbox-selected {
border: none;
background: var(--green);
display: flex;
}
.avatar-checkbox-mark {
display: none;
margin: auto;
}
.avatar-checkbox.avatar-checkbox-selected .avatar-checkbox-mark {
display: block;
}
.upload-avatar-button {
border: none;
background: none;
color: #0070D6;
margin-bottom: 20px;
padding: 0;
}
.upload-avatar-button:hover {
color: #0055a3;
}
.upload-avatar-button > i {
rotate: -45deg;
}
#desktop_gravatar_img {
border: 2px solid #E4E6E9;
border-radius: 50%;
}
</style>
<script>
function toggleGravatar() {
let checkbox = document.querySelector('#gravatar-checkbox');
checkbox.classList.toggle('avatar-checkbox-selected');
document.querySelector('.upload-avatar-button').classList.toggle('np-hidden')
if (checkbox.classList.contains('avatar-checkbox-selected')) {
document.querySelector(('#desktop_learner_use_gravatar_true')).click()
} else {
document.querySelector(('#desktop_learner_use_gravatar_false')).click()
}
}
{% if current_person.avatar_url contains "https://secure.gravatar.com/avatar" and form.use_gravatar? == false %}
window.addEventListener("DOMContentLoaded", () => {
let a = document.querySelector('#gravatar-checkbox');
if (!a.classList.contains('avatar-checkbox-selected')) {
a.click()
}
})
{% endif %}
</script>