Hubert just completed a project for Pipedrive, so downloaded those templates. I kept the old ones as the Pipedrive team noticed some things were overwritten. So until they are fully in production and working correctly, I'm keeping two copies. Will update with the correct files once Hubert investigates.
This commit is contained in:
Norm Rasmussen
@ -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>
|
||||
Reference in New Issue
Block a user