Skip to content

Commit

Permalink
[FEATURE] Contact cards options (#297)
Browse files Browse the repository at this point in the history 
* [TASK] add possibility to use img as background-img with hover effect on the information, checkbox option to show icons

* [TASK] compile css, less

* [TASK] change color of links in contact card information box, add condition for main color wrapper

* [TASK] compile less, css

* [TASK] include language, access and categories to TCA of Contact Card
  • Loading branch information
@mesosa @pixelmatseriks
mesosa authored and pixelmatseriks committed Sep 21, 2017
1 parent 5d9c16a commit 12092f5
Show file tree
Hide file tree
Showing 9 changed files with 299 additions and 51 deletions.
6 changes: 6 additions & 0 deletions Configuration/ContentElements/contactsCard.pagets
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,9 @@ mod.wizards.newContentElement.wizardItems.contentElements {
show := addToList(contactsCard)
}

TCEFORM.tt_content.pi_flexform.contactsCard.sDEF.imgAsBg {
addItems {
0 = LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:contactsCard.flexform.imgAsBg_None
1 = LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:contactsCard.flexform.imgAsBg_One
}
}
18 changes: 18 additions & 0 deletions Configuration/FlexForms/flexform_contactsCard.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,24 @@
</TCEforms>
<type>array</type>
<el>
<imgAsBg>
<TCEforms>
<label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:contactsCard.flexform.imgAsBg</label>
<config>
<type>select</type>
<items>
</items>
</config>
</TCEforms>
</imgAsBg>
<icons>
<TCEforms>
<label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:contactsCard.flexform.icons</label>
<config>
<type>check</type>
</config>
</TCEforms>
</icons>
<contactPhone_1>
<TCEforms>
<label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:contactsCard.flexform.contactPhone_1</label>
Expand Down
6 changes: 6 additions & 0 deletions Configuration/TCA/Overrides/tt_content.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -855,6 +855,12 @@
--div--;' . $frontendLanguageFilePrefix . 'tabs.appearance,
--palette--;' . $frontendLanguageFilePrefix . 'palette.frames;frames,
--palette--;' . $frontendLanguageFilePrefix . 'palette.appearanceLinks;appearanceLinks,
--div--;' . $coreLanguageFilePrefix .'language,
--palette--;;language,
--div--;' . $coreLanguageFilePrefix .'access,
--palette--;;hidden,
--palette--;' . $frontendLanguageFilePrefix . 'palette.access;access,
--div--;' . $coreLanguageFilePrefix .'categories,categories,
--div--;' . $coreLanguageFilePrefix .'extended,
'
];
Expand Down
12 changes: 12 additions & 0 deletions Resources/Private/Language/ContentElements.xlf
View file
Original file line number Diff line number Diff line change
Expand Up @@ -427,6 +427,18 @@
<trans-unit id="contactsCard.flexform.linkedInLink">
<source>Link to LinkedIn Profile</source>
</trans-unit>
<trans-unit id="contactsCard.flexform.imgAsBg">
<source>Image attribute</source>
</trans-unit>
<trans-unit id="contactsCard.flexform.imgAsBg_None">
<source>Image as element [default]</source>
</trans-unit>
<trans-unit id="contactsCard.flexform.imgAsBg_One">
<source>Image as background</source>
</trans-unit>
<trans-unit id="contactsCard.flexform.icons">
<source>Do not use icons before text fields</source>
</trans-unit>

<!--Button Element-->
<trans-unit id="button.title">
Expand Down
122 changes: 71 additions & 51 deletions Resources/Private/Templates/ContentElements/ContactsCard.html
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,84 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">

{namespace t3kit=T3kit\themeT3kit\ViewHelpers}
<f:layout name="Default" />
<f:section name="Header" />
<f:section name="Main">
<!-- theme_t3kit: Templates/ContentElements/ContactsCard.html [begin] -->
<div class="contacts-card">
<div class="contacts-card__photo">
<f:if condition="{image}">
<f:then>
<f:for each="{image}" as="image" iteration="imageIteration">
<f:if condition="{imageIteration.isFirst}">
<div class="contacts-card__photo">
<f:if condition="{image}">
<f:then>
<f:for each="{image}" as="image" iteration="imageIteration">
<f:if condition="{imageIteration.isFirst}">
<f:if condition="{settings.imgAsBg} == 1">
<f:then>
<div class="contacts-card__contacts-photo _img-overlay {f:cObject(typoscriptObjectPath:'lib.responsiveBackgroundImage', data:image.uid)}"></div>
</f:then>
<f:else>
<f:image class="img-responsive contacts-card__contacts-photo" image="{image}" maxWidth="{settings.defaultWidth}" cropVariant="default" />
</f:if>
</f:for>
</f:then>
<f:else>
<f:image src="{settings.defaultImage}" class="img-responsive contacts-card__contacts-photo"/>
</f:else>
</f:if>
</div>
<div class="contacts-card__contacts">
<f:if condition="{data.header}">
<h3 class="contacts-card__contact-name">{data.header}</h3>
</f:if>
<f:if condition="{data.subheader}">
<p class="contacts-card__contact-job">{data.subheader}</p>
</f:if>
<f:if condition="{settings.contactPhone_1}">
<div class="contacts-card__contact-phone-wrp">
</f:else>
</f:if>
</f:if>
</f:for>
</f:then>
<f:else>
<f:image src="{settings.defaultImage}" class="img-responsive contacts-card__contacts-photo"/>
</f:else>
</f:if>
</div>
<div class="contacts-card__contacts {f:if(condition: '{settings.imgAsBg} == 1', then: '_contact-information-overlay')}">
<f:if condition="{data.header}">
<span class="contacts-card__contact-name">{data.header}</span>

</f:if>
<f:if condition="{data.subheader}">
<span class="contacts-card__contact-job">{data.subheader}</span>
</f:if>
<f:if condition="{settings.contactPhone_1}">
<div class="contacts-card__contact-phone-wrp">
<f:if condition="{settings.icons} == 0">
<span class="icons icon-t3-mobile"></span><f:translate key="phone_label"></f:translate>
<p class="contacts-card__contact-phone">{settings.contactPhone_1}</p>
</div>
</f:if>
<f:if condition="{settings.contactPhone_2}">
<div class="contacts-card__contact-phone-wrp">
</f:if>
<t3kit:link.tel tel="{settings.contactPhone_1}" class="contacts-card__contact-phone">{settings.contactPhone_1}</t3kit:link.tel>
</div>
</f:if>
<f:if condition="{settings.contactPhone_2}">
<div class="contacts-card__contact-phone-wrp">
<f:if condition="{settings.icons} == 0">
<span class="icons icon-t3-mobile"></span><f:translate key="phone_label"></f:translate>
<p class="contacts-card__contact-phone">{settings.contactPhone_2}</p>
</div>
</f:if>
<f:if condition="{settings.mobilePhone}">
<div class="contacts-card__contact-phone-wrp">
</f:if>
<t3kit:link.tel tel="{settings.contactPhone_2}" class="contacts-card__contact-phone">{settings.contactPhone_2}</t3kit:link.tel>
</div>
</f:if>
<f:if condition="{settings.mobilePhone}">
<div class="contacts-card__contact-phone-wrp">
<f:if condition="{settings.icons} == 0">
<span class="icons icon-smartphone"></span><f:translate key="phone_label"></f:translate>
<p class="contacts-card__contact-phone">{settings.mobilePhone}</p>
</div>
</f:if>
<f:if condition="{settings.email}">
<div class="contacts-card__contact-email-wrp">
<span class="icons icon-t3-mail"></span><f:translate key="email_label"></f:translate>
<f:link.email email="{settings.email}" class="contacts-card__contact-email" title="{settings.email}">{settings.email}
</f:link.email>
</div>
</f:if>
<f:if condition="{settings.linkedInLink}">
<div class="contacts-card__contact-linkedin-wrp">
<span class="icons icon-t3-linkedin"></span>
<f:link.external uri="{settings.linkedInLink}" class="contacts-card__contact-linkedin" defaultScheme="https" target="_blank">{settings.linkedInLink}
</f:link.external>
</div>
</f:if>
</div>
</f:if>
<t3kit:link.tel tel="{settings.mobilePhone}" class="contacts-card__contact-phone">{settings.mobilePhone}</t3kit:link.tel>
</div>
</f:if>
<f:if condition="{settings.email}">
<div class="contacts-card__contact-email-wrp">
<f:if condition="{settings.icons} == 0">
<span class="icons icon-t3-mail"></span><f:translate key="email_label"></f:translate>
</f:if>
<f:link.email email="{settings.email}" class="contacts-card__contact-email" title="{settings.email}">
{settings.email}
</f:link.email>
</div>
</f:if>
<f:if condition="{settings.linkedInLink}">
<div class="contacts-card__contact-linkedin-wrp">
<f:if condition="{settings.icons} == 0">
<span class="icons icon-t3-linkedin"></span>
</f:if>
<f:link.external uri="{settings.linkedInLink}" class="contacts-card__contact-linkedin" defaultScheme="https" target="_blank">
{settings.linkedInLink}
</f:link.external>
</div>
</f:if>
</div>
</div>

<!-- theme_t3kit: Templates/ContentElements/ContactsCard.html [end] -->
Expand Down
54 changes: 54 additions & 0 deletions Resources/Public/css/main.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 12092f5

Please sign in to comment.