diff --git a/package-lock.json b/package-lock.json
index c0ff41478644cd7e4a3d63b4c47d43a581e910e7..dedcf5af0316e49b53b652e316007cfe00046b66 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -266,11 +266,6 @@
"to-fast-properties": "^2.0.0"
}
},
- "@startinblox/hubl-styling-framework": {
- "version": "1.0.50",
- "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.50.tgz",
- "integrity": "sha512-486UiZ6BNOHaCaUeu/2UT9da/9BZvFdv9YTogZaZ+xJR/COtOiWTRFFVDR4vcfI4s+iMvWkZKdabSBbbdp01+g=="
- },
"@types/color-name": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
diff --git a/package.json b/package.json
index b7bcd027279e5aa3e49b225e81fd66462d7be7ef..22f95bb9d5f6ec579a2464d3a941965ad3bb5955 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,6 @@
"dependencies": {
"@babel/cli": "^7.10.1",
"@babel/core": "^7.10.2",
- "@startinblox/hubl-styling-framework": "^1.0.50",
"babel-plugin-transform-commonjs": "^1.1.6",
"copyfiles": "^2.3.0",
"npm-run-all": "^4.1.5",
diff --git a/src/index.js b/src/index.js
index 0fc47aa6b8c6c441fe7920502a84115c6aa0e5ac..2610b78684493234f94e1d2812beabb1fd9fa92a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@ import SolidDirectory from './solid-directory.js';
import SolidProfile from './solid-profile.js';
import SolidPicture from './solid-picture.js';
import ComponentPath from './path.js';
-import { Helpers } from "https://cdn.skypack.dev/@startinblox/core@0.15";
+import { Helpers } from "https://cdn.skypack.dev/@startinblox/core@0.16";
Helpers.importCSS(ComponentPath+'/dist/index.css?min');
diff --git a/src/locales/en.json b/src/locales/en.json
index 3227fca823d93238eb5a554224877dd8be7856ca..5d3c2e28a6bfe4849531b58da8e6be40fa1bd48c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -29,5 +29,7 @@
"profileHidden.lineTwoTwo": "go to your profile",
"profileHidden.lineTwoThree": ". You need to add a photo.",
"myProfileHidden.lineOne": "Your profile is not visible to other members",
- "myProfileHidden.lineTwo": "To activate it, you need to add a photo."
+ "myProfileHidden.lineTwo": "To activate it, you need to add a photo.",
+ "activeProfiles": "Show only active profiles",
+ "goButton": "GO"
}
\ No newline at end of file
diff --git a/src/locales/es.json b/src/locales/es.json
index f307572bf6f1be74e7de070006f89fb5503b2ea9..978c06239b64d1483f21c45082070548626208f6 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -29,5 +29,7 @@
"profileHidden.lineTwoTwo": "Ve a tu perfil",
"profileHidden.lineTwoThree": ". Debes añadir una foto.",
"myProfileHidden.lineOne": "Su perfil no es visible para otros miembros",
- "myProfileHidden.lineTwo": "Para activarlo, debes añadir una foto"
+ "myProfileHidden.lineTwo": "Para activarlo, debes añadir una foto",
+ "activeProfiles": "Mostrar solo perfiles activos",
+ "goButton": "GO"
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 9f5b958849501e4314ba682e64b2ce399113c59a..3935b85701233b4462180148897861a8e92f16fa 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -29,5 +29,7 @@
"profileHidden.lineTwoTwo": "rendez-vous sur votre profil",
"profileHidden.lineTwoThree": ". Vous devez ajouter une photo.",
"myProfileHidden.lineOne": "Votre profil n'est pas visible des autres membres.",
- "myProfileHidden.lineTwo": "Pour l'activer, vous devez ajouter une photo."
+ "myProfileHidden.lineTwo": "Pour l'activer, vous devez ajouter une photo.",
+ "activeProfiles": "Afficher uniquement les profils actifs",
+ "goButton": "GO"
}
\ No newline at end of file
diff --git a/src/solid-directory.js b/src/solid-directory.js
index 1aea6e1c7ec48dfd20e435971269bee6d9b850e9..612cd45af4b0bf5804808fd38395d04f7d55bee1 100644
--- a/src/solid-directory.js
+++ b/src/solid-directory.js
@@ -1,12 +1,17 @@
import {
SolidTemplateElement
-} from "https://cdn.skypack.dev/@startinblox/core@0.15";
+} from "https://cdn.skypack.dev/@startinblox/core@0.16";
import ComponentPath from './path.js';
export default class SolidDirectory extends SolidTemplateElement {
constructor() {
super();
this.setTranslationsPath(`${ComponentPath}/dist/locales`);
+ if (window.hubl) {
+ this.localize = (key) => {
+ return window.hubl.intl.t("directory." + key) || this.strings[key] || key;
+ }
+ }
}
static get propsDefinition() {
@@ -24,17 +29,17 @@ export default class SolidDirectory extends SolidTemplateElement {
paginateBy = "9",
uniq = Math.random().toString(16).slice(2)
}) {
- let getRoute = (target) => target == "profileDirectory" ? "members" : "chat";
+ let getRoute = (target) => target == uniq ? "members" : "chat";
if (window.hubl) {
getRoute = window.hubl.getRoute;
}
return `
- <solid-router default-route="${getRoute('profileDirectory')}-list">
- <solid-route name="${getRoute('profileDirectory')}-list"></solid-route>
- <solid-route name="${getRoute('profileDirectory')}-member-profile" use-id></solid-route>
+ <solid-router default-route="${getRoute(uniq)}-list">
+ <solid-route name="${getRoute(uniq)}-list"></solid-route>
+ <solid-route name="${getRoute(uniq)}-member-profile" use-id></solid-route>
</solid-router>
- <div id="${getRoute('profileDirectory')}-list" data-view="${getRoute('profileDirectory')}-list">
+ <div id="${getRoute(uniq)}-list" data-view="${getRoute(uniq)}-list">
<div>
<h2 class="margin-left-xsmall sm-margin-none text-xlarge text-bold text-color-heading text-uppercase">${this.localize('module.name')}</h2>
@@ -45,7 +50,7 @@ export default class SolidDirectory extends SolidTemplateElement {
range-skills="${rangeSkills}"
order-asc-skills="name"
fields="name, profile.job, profile.city, skills"
-
+
class-name="segment margin-bottom-small third sm-full padding-right-xsmall padding-left-xsmall sm-padding-none text-small input-shadow input-bg-white icon icon-magnify"
label-name="${this.localize('search.by.name')}"
widget-name="solid-form-placeholder-text"
@@ -62,7 +67,8 @@ export default class SolidDirectory extends SolidTemplateElement {
label-skills="${this.localize('search.by.skill')}"
widget-skills="solid-form-multipleselect-autocompletion"
- submit-button="GO"
+ submit-button="${this.localize('goButton')}"
+ submit-widget="button"
></solid-form-search>
<div class="directory-checkbox simple text-disable-selection">
@@ -72,7 +78,7 @@ export default class SolidDirectory extends SolidTemplateElement {
<div class="revert"></div>
</label>
</div>
- <span class="checkbox-text" onclick="javascript:document.querySelectorAll('solid-directory .checkbox-case > label').forEach(e => e.click());">Show only active profiles</span>
+ <span class="checkbox-text" onclick="javascript:document.querySelectorAll('solid-directory .checkbox-case > label').forEach(e => e.click());">${this.localize('activeProfiles')}</span>
</div>
<solid-widget name="directory-hidden-${uniq}">
@@ -80,12 +86,11 @@ export default class SolidDirectory extends SolidTemplateElement {
\${value == "" ? \`<div class='directory-info bg-color-primary text-color-white text-bold padding-xsmall whitespace-normal'>
<div class='icon icon-exclamation'></div>
<p class='first-line'>${this.localize('profileHidden.lineOne')}</p>
- <p class='second-line'>${this.localize('profileHidden.lineTwoOne')}<solid-link class="link color-white" next='${getRoute('profileDirectory')}-my-profile'>${this.localize('profileHidden.lineTwoTwo')}</solid-link>${this.localize('profileHidden.lineTwoThree')}</p>
+ <p class='second-line'>${this.localize('profileHidden.lineTwoOne')}<solid-link class="link color-white" next='${getRoute(uniq)}-my-profile'>${this.localize('profileHidden.lineTwoTwo')}</solid-link>${this.localize('profileHidden.lineTwoThree')}</p>
</div>\` : ""}
</template>
</solid-widget>
-
<solid-display
bind-user
fields="account.picture"
@@ -103,11 +108,11 @@ export default class SolidDirectory extends SolidTemplateElement {
class="segment full children children-third sm-children-full children-margin-bottom-medium sm-children-margin-bottom-xsmall children-padding-right-xsmall children-padding-left-xsmall sm-children-padding-none sm-whitespace-normal masonry counter pagination"
filtered-by="solid-directory-listing-search"
-
+
data-src="${dataSrc}"
counter-template="<span>\${counter} ${this.localize('members')}</span>"
-
+
fields="segment1(send, segment2(member-picture(account.picture), segment3(name, member-pseudo(at, username), profile.job)), segment4(profile.city, communities, skills))"
loader-id="loader-members-list-${uniq}"
@@ -117,7 +122,7 @@ export default class SolidDirectory extends SolidTemplateElement {
required-username=""
order-asc="username"
-
+
class-segment1="segment hover bg-color-white shadow full text-top whitespace-normal"
class-send="send-display children-link-rounded children-icon-speech children-link-reversed color-secondary bordered"
class-segment2="segment full padding-medium text-center whitespace-normal"
@@ -131,7 +136,7 @@ export default class SolidDirectory extends SolidTemplateElement {
class-segment4="segment full padding-medium padding-bottom-xsmall border-top border-color-grey whitespace-normal"
class-communities="segment block margin-bottom-xsmall"
class-skills="skills segment block children-tag whitespace-normal"
-
+
action-send="${getRoute('chat')}"
label-send=""
value-send=""
@@ -142,19 +147,19 @@ export default class SolidDirectory extends SolidTemplateElement {
multiple-communities
multiple-communities-fields="community.name"
-
+
multiple-skills
multiple-skills-fields="name"
-
+
paginate-by="${paginateBy}"
- next="${getRoute('profileDirectory')}-member-profile">
+ next="${getRoute(uniq)}-member-profile">
</solid-display>
</div>
</div>
- <div id="${getRoute('profileDirectory')}-members-profile" data-view="${getRoute('profileDirectory')}-member-profile" hidden>
+ <div id="${getRoute(uniq)}-members-profile" data-view="${getRoute(uniq)}-member-profile" hidden>
<div class="segment full sm-hidden text-right">
- <solid-link class="backlink text-xlarge line-xlarge margin-right-xxsmall" next="${getRoute('profileDirectory')}-list">${this.localize('back')}</solid-link>
+ <solid-link class="backlink text-xlarge line-xlarge margin-right-xxsmall" next="${getRoute(uniq)}-list">${this.localize('back')}</solid-link>
</div>
<div class="segment block shadow bg-color-white margin-right-xxsmall margin-top-large margin-left-xxsmall sm-margin-none">
@@ -195,36 +200,36 @@ export default class SolidDirectory extends SolidTemplateElement {
class-segment1="segment sm-full text-center"
class-member-picture="segment padding-medium avatar-wrapper"
class-account.picture="avatar xlarge"
-
+
class-segment2="member-bio segment sm-full padding-medium text-top whitespace-normal"
class-name="segment block text-color-heading text-xxlarge text-bold sm-text-center margin-bottom-xxsmall whitespace-normal"
class-member-pseudo="segment block sm-text-center whitespace-normal"
class-profile.job="segment block sm-text-center margin-top-medium margin-bottom-medium whitespace-normal"
class-communities="segment block margin-bottom-xsmall"
-
+
class-segment3="segment sm-full lg-hidden sm-padding-bottom-medium"
class-send="segment sm-full text-bold text-xsmall text-uppercase text-center children-link-button children-link-icon children-icon-speech children-link-reversed color-secondary bordered"
-
+
class-segment4="send-message segment padding-medium sm-hidden"
class-send1="text-bold text-xsmall text-uppercase children-link-button children-link-icon children-icon-speech children-link-reversed color-secondary bordered"
-
+
value-at="@"
widget-account.picture="hubl-user-avatar"
widget-profile.city="directory-city-${uniq}"
widget-email="directory-link-mailto-${uniq}"
widget-profile.phone="directory-link-tel-${uniq}"
widget-profile.website="directory-website-${uniq}"
-
+
multiple-communities
multiple-communities-fields="community.name"
-
+
action-send="${getRoute('chat')}"
value-send=""
label-send="${this.localize('sendMessage')}"
action-send1="${getRoute('chat')}"
value-send1=""
label-send1="${this.localize('sendMessage')}"
-
+
bind-resources
></solid-display>
diff --git a/src/solid-picture.js b/src/solid-picture.js
index 10c24e867868508e1764c687b0c8f6080b58f7fd..ac2db6f0e9deda2de4ab5819715533809fbc7809 100644
--- a/src/solid-picture.js
+++ b/src/solid-picture.js
@@ -2,7 +2,7 @@
import {
SolidTemplateElement
-} from "https://cdn.skypack.dev/@startinblox/core@0.15";
+} from "https://cdn.skypack.dev/@startinblox/core@0.16";
import ComponentPath from './path.js';
export default class SolidPicture extends SolidTemplateElement {
@@ -161,6 +161,7 @@ export default class SolidPicture extends SolidTemplateElement {
partial="true"
data-src="${dataSrc}"
submit-button="${this.localize('save').toUpperCase()}"
+ submit-widget="button"
nested-field="${nestedFields}"
fields="${fields}${additionalFields}"
${additionalFieldsAttrs}
diff --git a/src/solid-profile.js b/src/solid-profile.js
index de65c3266376919e5dfc5f6029e73d6af66b1c86..a8a56ebc4fb476cb72d183add05c58484612c617 100644
--- a/src/solid-profile.js
+++ b/src/solid-profile.js
@@ -1,10 +1,17 @@
-import { SolidTemplateElement } from "https://cdn.skypack.dev/@startinblox/core@0.15";
+import {
+ SolidTemplateElement
+} from "https://cdn.skypack.dev/@startinblox/core@0.16";
import ComponentPath from './path.js';
export default class SolidProfile extends SolidTemplateElement {
constructor() {
super();
this.setTranslationsPath(`${ComponentPath}/dist/locales`);
+ if (window.hubl) {
+ this.localize = (key) => {
+ return window.hubl.intl.t("directory." + key) || this.strings[key] || key;
+ }
+ }
}
static get propsDefinition() {
@@ -16,7 +23,12 @@ export default class SolidProfile extends SolidTemplateElement {
};
}
- template({ dataSrc, uploadSrc, rangeSkills, uniq = Math.random().toString(16).slice(2) }) {
+ template({
+ dataSrc,
+ uploadSrc,
+ rangeSkills,
+ uniq = Math.random().toString(16).slice(2)
+ }) {
let getRoute = () => "members";
if (window.hubl) {
getRoute = window.hubl.getRoute;
@@ -169,6 +181,7 @@ export default class SolidProfile extends SolidTemplateElement {
<solid-form class="segment full padding-top-xlarge padding-very-xxlarge sm-padding-xsmall sm-padding-top-medium whitespace-normal form"
data-src="${dataSrc}"
submit-button="${this.localize('save').toUpperCase()}"
+ submit-widget="button"
fields = "last_name, first_name, profile.job, profile.city, email, profile.phone, profile.website, directory-checkbox(settings.receiveMail, text-checkbox), username"
required-last_name
required-first_name
@@ -268,6 +281,7 @@ export default class SolidProfile extends SolidTemplateElement {
class="segment full padding-top-small padding-very-xxlarge sm-padding-xsmall sm-padding-top-medium whitespace-normal form"
data-src="${dataSrc}"
submit-button="${this.localize('save').toUpperCase()}"
+ submit-widget="button"
range-skills="${rangeSkills}"
order-asc-skills="name"
fields="skills, username, email"