Kolorowe powiadomienia (Colored Notifications) w Invision Community

[Lisownik]

Cześć!  Prosty poradnik na kolorowanie powiadomień, dzięki temu zostaną one posegregowane na kategorie jakie chcesz. Przykład poniżej.

Na początek dodajemy poniższy fragment kodu do dwóch szablonów od powiadomień.

data-lkNotify='{$notification['data']['title']}'

 

W tym celu przechodzimy do:

Style Edytuj HTML/CSS Szablony core front system  notificationsAjax i notificationsRows

 

notificationsAjax - popup z powiadomieniami

Dodajemy powyższy fragment kodu w miejsce jak na poniższym zrzucie.

 

Gotowiec dla domyślnego szablonu:

Spoiler

{{if empty( $notifications )}}
	<li class='ipsDataItem ipsDataItem_unread'>
		<div class='ipsPad ipsType_light ipsType_center ipsType_normal'>{lang="no_results_notifications"}</div>
	</li>
{{else}}
	{{foreach $notifications as $notification}}
		<li class='ipsDataItem {{if !$notification['notification']->read_time}}ipsDataItem_unread{{endif}}' data-lkNotify='{$notification['data']['title']}'>
			<div class='ipsDataItem_icon'>
				{{if isset( $notification['data']['author'] )}}
					{template="userPhoto" app="core" group="global" params="$notification['data']['author'], 'mini'"}
				{{endif}}
			</div>
			<div class='ipsDataItem_main'>
				<a href="{$notification['data']['url']}">
					<span class='ipsDataItem_title'>{$notification['data']['title']}</span>
					<br>
					<span class="ipsType_light">{datetime="$notification['notification']->updated_time"}</span>
				</a>
			</div>
		</li>
	{{endforeach}}
{{endif}}

 

 

 

notificationsRows - podstrona z powiadomieniami

Dodajemy ten sam fragment kodu w miejsce jak na poniższym zrzucie.

 

Gotowiec dla domyślnego szablonu:

Spoiler

{{if \count( $rows )}} 
	{{foreach $rows as $notification}}
		{{if isset( $notification['data']['title'] )}}
			<li class='ipsDataItem {{if $notification['data']['unread']}}ipsDataItem_unread{{endif}} ipsClearfix' data-lkNotify='{$notification['data']['title']}'>
				<div class='ipsDataItem_icon'>
					{{if isset( $notification['data']['author'] )}}
						{template="userPhoto" app="core" group="global" params="$notification['data']['author'], 'tiny'"}
					{{endif}}
				</div>
				<div class='ipsDataItem_main'>
					{{if !$notification['data']['unread']}}
						<span class="ipsItemStatus ipsItemStatus_small ipsItemStatus_read">
							<i class="fa fa-circle"></i>
						</span>
						<strong>
					{{endif}}
							<a href="{$notification['data']['url']}" class='ipsDataItem_title'>{$notification['data']['title']}</a>
					{{if !$notification['data']['unread']}}
						</strong>
					{{endif}}
					<br>
					<span class="ipsType_light">{datetime="$notification['notification']->updated_time"}</span>
				</div>
			</li>
			{{endif}}
	{{endforeach}}
{{endif}}

 

 

 

Pozostało dodać kod CSS do szablonu. W tym celu przechodzimy do:

Style Edytuj HTML/CSS CSS core front custom custom.css

 

Dodajemy kolory według poniższego schematu:

[data-lkNotify*="zareagował na"],
[data-lkNotify*="reacted to a"] {
    background-image: linear-gradient(to right, #ffeaea, transparent)!important;
}

[data-lkNotify*="wspomniał o tobie"],
[data-lkNotify*="mentioned you in a"] {
    background-image: linear-gradient(to right, #eaffea, transparent)!important;
}

[data-lkNotify*="zacytował cię"],
[data-lkNotify*="quoted you in a"] {
    background-image: linear-gradient(to right, #eaeaff, transparent)!important;
}

[data-lkNotify*="zaczął cię obserwować"],
[data-lkNotify*="is now following you"] {
    background-image: linear-gradient(to right, #eaffff, transparent)!important;
}

 

 

Plusy

• Posegregowane powiadomienia
• Prosta implementacja

Minusy

• Dodatkowe linijki kodu w CSS dla obsługi wielu języków.

 

I to tyle, koniec! Proste, prawda?

 

Poradnik na prawie CC by SA 4.0 creativecommons.org/licenses/by-sa/4.0/deed.pl

[Lisownik]

Dla leniwców zrobiłem wtyczkę, która wspiera wszystkie języki i koloruje wszystkie domyślne powiadomienia, które są podzielone na 4 kolory. Jak ktoś się zna troszkę na CSS to i sam doda, zmieni kolory i nawet pogrupuje według własnego uznania.

forum.invisionize.pl/files/file/785-kolorowe-powiadomienia

[Weak. Online]

data-lkNotify='{$notification['data']['title']}'

Zmieniłbym na:

data-lkNotify='{$notification['notification']->notification_key}'

Następnie w CSS.

[data-lkNotify*="new_likes"] {
	background-image: linear-gradient(to right, #ffeaea, transparent)!important;
}

Przykłady:

• new_likes
• new_comments
• new_private_messag
• trophy
• profile_comment
• new_status
• mention
• new_note
• profile_reply
• quote

[Lisownik]

@Weak. Tak działa to we wtyczce, kombinowałem jak znaleźć klucze od powiadomień i tak zrobiłem  Jest tego trochę więcej niż podałeś

[NervousReckless | FG]

Działa to na zasadzie grupy powiadomienia albo wyłapania tekstu, a czy jest możliwość jakoś dodania tego do danego typu notatki? Szukałem w kodzie ale niestety nie znalazłem czegoś takiego jak ID grupy powiadomienia.

Szczególnie interesowałoby mnie dodanie koloru do powiadomienia o otrzymaniu notatki natomiast, kiedyś działało to w ten sposób że nadając notatkę dostawałeś informację typu "%s dodał notatkę ostrzegającą..; %s dodał notatkę pozytywną do.." a teraz jest jedynie informacja "%s dodał notatkę do.."

Koniec końców, sposobem wyżej dodaję kolor do powiadomienia o dodaniu notatki ale ten sam kolor będzie do każdego typu notatki a moim celem jest utworzenie różnych kolorów w zależności od jej typu.