173 lines
6.3 KiB
Plaintext
173 lines
6.3 KiB
Plaintext
<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>
|