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

Список разделов phpBBex 1.x (поддерживается) Пожелания 1.x

Описание: В phpBBex 1.x чего-то не хватает? Напишите об этом здесь, и мы постараемся исправиться.
Правила раздела: Одна тема — один запрос новой возможности. Обязательно формируйте внятный заголовок, максимально отражающий суть вашей идеи. Также приведите примеры, где предлагаемая вами возможность будет актуальна.
Модератор: Поддержка

Надобно?

Да
5
ЖЪРЧИК, Sumanai, nightpatrol, Andrey1990, HD321kbps
100%
Не против
0
Голосов нет
Нет
0
Голосов нет
Это уже есть в 3.1.1!
0
Голосов нет
 
Всего проголосовавших: 5

Сообщение #1 ЖЪРЧИК » 23.11.2014, 06:13

Изображение

Справа снизу возможно ли? Без центральных окон и блокирования действий на странице "всплытия". :think:
ЖЪРЧИК
Автор темы
Аватара
Репутация: 174
С нами: 9 лет 7 месяцев

Сообщение #2 Sumanai » 23.11.2014, 06:24

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

Плевок в Артемия Татьяновича

Сообщение #3 ЖЪРЧИК » 11.12.2014, 04:09

:think:
Внесу еще одно более оригинальное предложение по этой части. Надеюсь 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 минут:
:think:
ЖЪРЧИК
Автор темы
Аватара
Репутация: 174
С нами: 9 лет 7 месяцев

Сообщение #4 Sumanai » 12.12.2014, 01:00

ЖЪРЧИК:а уведомления в 3.1.2 на аяксе как мы знаем.

Уведомления там обычные, и не приходят посреди просмотра страницы. Только по загрузке или нажатию на ссылку.
В общем я думаю, учитывая вышеизложенное, последнее предложение лишнее.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 1 месяц

Сообщение #5 ЖЪРЧИК » 12.12.2014, 05:45

Sumanai, жаль, идея годная. Ну можно хотя бы для ЛС тогда делать кнопку "Вверх" красной или "пульсирующей CSS" при его поступолении. А при обновлении страницы ведь скролл не изменяется (шапку юзер все равно не видит), так что почему бы и нет даже без аякса, а при нажатии на нее она прокручивает к шапке и просто пропадает? :smoke:
ЖЪРЧИК
Автор темы
Аватара
Репутация: 174
С нами: 9 лет 7 месяцев

Сообщение #6 nightpatrol » 12.12.2014, 09:31

Не надо мигание на кнопке делать :fie:
nightpatrol
Репутация: 16
С нами: 9 лет 6 месяцев

Сообщение #7 Sumanai » 12.12.2014, 16:28

ЖЪРЧИК:Ну можно хотя бы для ЛС

Для ЛС на весь экран, пропустить сложно.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 1 месяц

Сообщение #8 ЖЪРЧИК » 12.12.2014, 18:17

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

Добавлено спустя 1 минуту 28 секунд:
nightpatrol, можно цвет сменить без анимации - вместо серой красненькая будет. 2 варианта еще же
ЖЪРЧИК
Автор темы
Аватара
Репутация: 174
С нами: 9 лет 7 месяцев

Сообщение #9 nightpatrol » 12.12.2014, 22:14

Не все поймут... На мой взгляд всплывающее сообщение лучше всего, но вот желательно не посреди экрана :biggrin:
nightpatrol
Репутация: 16
С нами: 9 лет 6 месяцев

Сообщение #10 ЖЪРЧИК » 12.12.2014, 22:22

nightpatrol, я разжевал вроде все, даже самое не очевидное :)
ЖЪРЧИК
Автор темы
Аватара
Репутация: 174
С нами: 9 лет 7 месяцев

Сообщение #11 nightpatrol » 13.12.2014, 00:56

Ну не знаю, на мой взгляд неэффективно :smile: Лучше сообщение... Но это моё видение! :smile:
nightpatrol
Репутация: 16
С нами: 9 лет 6 месяцев

Сообщение #12 ЖЪРЧИК » 13.12.2014, 01:28

Это естественно. Просто надо сравнить. Потыкаться.
ЖЪРЧИК
Автор темы
Аватара
Репутация: 174
С нами: 9 лет 7 месяцев

Сообщение #13 Sumanai » 13.12.2014, 05:47

ЖЪРЧИК:мы же выше сказали, что это с блокировкой :fie:
Sumanai:Я собираюсь сделать их как вы указали, справа снизу. Но это именно для уведомлений.
Для ЛС будет так же, как сейчас, это важная вещь. Для простых уведомлений место в углу экрана.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 1 месяц

Сообщение #14 ЖЪРЧИК » 13.12.2014, 16:35

Sumanai:Для ЛС будет так же, как сейчас, это важная вещь.
А если подряд будут слать 20 лс в течении получаса? Не очень удобно лок на весь экран.
ЖЪРЧИК
Автор темы
Аватара
Репутация: 174
С нами: 9 лет 7 месяцев

Сообщение #15 Sumanai » 13.12.2014, 17:06

ЖЪРЧИК:А если подряд будут слать 20 лс в течении получаса?

В бан такого :twisted:
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 1 месяц

Сообщение #16 ЖЪРЧИК » 13.12.2014, 17:38

Sumanai, не один человек, а обычные пользователи... если это администратор ресурса или еще что то крупное. Лочить экран не нужно.
ЖЪРЧИК
Автор темы
Аватара
Репутация: 174
С нами: 9 лет 7 месяцев

Сообщение #17 rbooze » 14.12.2014, 21:57

ЖЪРЧИК:если это администратор ресурса или еще что то крупное

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

Сообщение #18 ЖЪРЧИК » 14.12.2014, 22:15

rbooze, да пофиг что, глупо лочить экран при ЛС.
А предложение твое разумно, но это частный случай.
ЖЪРЧИК
Автор темы
Аватара
Репутация: 174
С нами: 9 лет 7 месяцев


Вернуться в Пожелания 1.x