Изменения места всплывающих уведомлений.

[ЖЪРЧИК]

Справа снизу возможно ли? Без центральных окон и блокирования действий на странице "всплытия".

[Sumanai]

Согласен, в 3.1 просто ужасная практика использование уведомлений, блокирующих работу со страницей. Я собираюсь сделать их как вы указали, справа снизу. Но это именно для уведомлений.

[ЖЪРЧИК]

Внесу еще одно более оригинальное предложение по этой части. Надеюсь Sumanai, пока ничего не делал.
После поступления уведомления юзеру, которое он не видит пока к шапке не пролистнет и не заметит цифру числа уведомлений. Так? Или то же ЛС если пришло. Если он находится в скролле не у шапки, а уведомления в 3.1.2 на аяксе как мы знаем.

Что я предлагаю?
Я предлагаю в кнопке "Вверх" создать два разноцветных индикатора. Где красный фон (вместо серого) будет означать ЛС, а желтый (блеклый песчаный хаки) фон означать обычные уведомления. Либо даже мигающий фон тоже средствами CSS и оператором animation (образцы есть в гайдах как раз по смене фона) - тут можно понять при мигании даже два уведомление (мигание красного на желтом или желтого на красном - в зависимости от частоты миганий одного цвета понять, что последним поступило)


Также если что то срочное, то можно создать даже пульсирующий индикатор "Вверх" средствами CSS

Вот код "пульсаторов" (цвета и другие характеристики подогнать под стилистику):

Код: Выделить всё

<div id="holder">
   <div class="dot"></div>
   <div class="pulse"></div>
</div>

Код: Выделить всё

#holder {
   margin: 50px auto;
   width: 50px;
   height: 50px;
   position: relative;

}
.pulse {
   width: 10px;
   height: 10px;
   border: 5px solid #f7f14c;
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
   border-radius: 30px;
   background-color: #716f42;
   z-index: 10;
   position: absolute;
   left: 15px;
   top: 15px;
}
.dot {
   border: 10px solid #fff601;
   background: transparent;
   -webkit-border-radius: 60px;
   -moz-border-radius: 60px;
   border-radius: 60px;
   height: 50px;
   width: 50px;
   -webkit-animation: pulse 3s ease-out;
   -moz-animation: pulse 3s ease-out;
   animation: pulse 3s ease-out;
   -webkit-animation-iteration-count: infinite;
   -moz-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   position: absolute;
   top: -10px;
   left: -10px;
   z-index: 1;
   opacity: 0;
}
@-moz-keyframes pulse {
 0% {
   -moz-transform: scale(0);
   opacity: 0.0;
 }
 25% {
   -moz-transform: scale(0);
   opacity: 0.1;
 }
 50% {
   -moz-transform: scale(0.1);
   opacity: 0.3;
 }
 75% {
   -moz-transform: scale(0.5);
   opacity: 0.5;
 }
 100% {
   -moz-transform: scale(1);
   opacity: 0.0;
 }
}
@-webkit-keyframes "pulse" {
 0% {
   -webkit-transform: scale(0);
   opacity: 0.0;
 }
 25% {
   -webkit-transform: scale(0);
   opacity: 0.1;
 }
 50% {
   -webkit-transform: scale(0.1);
   opacity: 0.3;
 }
 75% {
   -webkit-transform: scale(0.5);
   opacity: 0.5;
 }
 100% {
   -webkit-transform: scale(1);
   opacity: 0.0;
 }
}

Еще одну нашел:

Код: Выделить всё

 <div class="pulse_holder">
<div class="pulse_marker">
<div class="pulse_rays"></div>
</div>
</div>

Код: Выделить всё

 @-webkit-keyframes pulse
{
0% {-webkit-transform: scale(0); opacity: 0;}
8% {-webkit-transform: scale(0); opacity: 0;}
15% {-webkit-transform: scale(0.1); opacity: 1;}
30% {-webkit-transform: scale(0.5); opacity: 1;}
100% {opacity: 0; -webkit-transform: scale(1);}
}
@-moz-keyframes pulse
{
0% {-moz-transform: scale(0); opacity: 0;}
8% {-moz-transform: scale(0); opacity: 0;}
15% {-moz-transform: scale(0.1); opacity: 1;}
30% {-moz-transform: scale(0.5); opacity: 1;}
100% {opacity: 0; -moz-transform: scale(1);}
}
.pulse_holder
{
display: block;
position: absolute;
top: 100px;
left: 350px;
}
.pulse_holder .pulse_marker
{
width: 16px;
height: 16px;
background: #099;
border-radius: 28px;
}
.pulse_holder .pulse_rays
{
margin: 0 auto;
border-radius: 100px;
position: absolute;
right: -26px;
top: -26px;
z-index: 10;
background-color: transparent;
opacity: 0.1;
width: 64px;
height: 64px;
border: 2px solid rgba(0, 128, 64, 1);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-o-border-radius: 100px;
-ms-border-radius: 100px;
border-radius: 100px;
/* Giving Animation Function */
-webkit-animation: pulse 2s linear infinite;
-moz-animation: pulse 2s linear infinite;
border-image: initial;
}

Коды можно проверить и посмотреть тут: http://cssdeck.com/labs/css3-pulsating-dot

Вот собственно три варианта визуальной индикации. И не нужно никакого всплывающего окна справа снизу и тем более посередине. Юзер сам решит отвечать на ЛС (заодно глянув всю шапку) или нет, ориентируясь на этот индикатор.
Да, при наведении курсора на кнопку нужно подписать эти режимы или можно изменять всплывающее уведомление тоже?

Хотел бы добавить, возможно ли отображение (дублирование) числа уведомлений из шапки в эту кнопку числом до 99 (мелким шрифтом и не ярким)?

Считаю данный метод наиболее понятным, информативным и интуитивно простым, а для тупых есть всплывающее сообщение при наведении курсора. Значок "Вверх" вроде бы гифка, почему же его нельзя заменить CSS: круг+символ треугольника в центре круга?

Добавлено спустя 14 часов 47 минут:

[Sumanai]

а уведомления в 3.1.2 на аяксе как мы знаем.

Уведомления там обычные, и не приходят посреди просмотра страницы. Только по загрузке или нажатию на ссылку.
В общем я думаю, учитывая вышеизложенное, последнее предложение лишнее.

[ЖЪРЧИК]

Sumanai, жаль, идея годная. Ну можно хотя бы для ЛС тогда делать кнопку "Вверх" красной или "пульсирующей CSS" при его поступолении. А при обновлении страницы ведь скролл не изменяется (шапку юзер все равно не видит), так что почему бы и нет даже без аякса, а при нажатии на нее она прокручивает к шапке и просто пропадает?

[nightpatrol]

Не надо мигание на кнопке делать

[Sumanai]

Ну можно хотя бы для ЛС

Для ЛС на весь экран, пропустить сложно.

[ЖЪРЧИК]

Sumanai, не надо на весь! мы же выше сказали, что это с блокировкой

Добавлено спустя 1 минуту 28 секунд:
nightpatrol, можно цвет сменить без анимации - вместо серой красненькая будет. 2 варианта еще же

[nightpatrol]

Не все поймут... На мой взгляд всплывающее сообщение лучше всего, но вот желательно не посреди экрана

[ЖЪРЧИК]

nightpatrol, я разжевал вроде все, даже самое не очевидное :)

[nightpatrol]

Ну не знаю, на мой взгляд неэффективно Лучше сообщение... Но это моё видение!

[ЖЪРЧИК]

Это естественно. Просто надо сравнить. Потыкаться.

[Sumanai]

мы же выше сказали, что это с блокировкой

Я собираюсь сделать их как вы указали, справа снизу. Но это именно для уведомлений.

Для ЛС будет так же, как сейчас, это важная вещь. Для простых уведомлений место в углу экрана.

[ЖЪРЧИК]

Для ЛС будет так же, как сейчас, это важная вещь.

А если подряд будут слать 20 лс в течении получаса? Не очень удобно лок на весь экран.

[Sumanai]

А если подряд будут слать 20 лс в течении получаса?

В бан такого

[ЖЪРЧИК]

Sumanai, не один человек, а обычные пользователи... если это администратор ресурса или еще что то крупное. Лочить экран не нужно.

[rbooze]

если это администратор ресурса или еще что то крупное

Работать под другим аккаунтом с правами администратора. У себя я администратору вообще отключил личку и создал топик "вопросы к администрации".

[ЖЪРЧИК]

rbooze, да пофиг что, глупо лочить экран при ЛС.
А предложение твое разумно, но это частный случай.