Новая дизайн-система Webasyst 2 — уже на GitHub [UPD: теперь и в Инсталлере!] Есть решение
UPD 08.04.2021: Webasyst 2.0.0 и приложение UI опубликованы и доступны в Инсталлере для всех пользователей:
https://developers.webasyst.ru/download/
https://www.webasyst.ru/store/app/ui/
UPD 02.04.2021: Ветка webasyst2, в которой мы показали альфа-версию дизайн-системы Webasyst 2 в конце прошлого года (все подробности ниже в посте), была влита в dev. Это значит, что уже через несколько дней wa-2.0.css будет в master и у всех в Инсталлере.
Мы переходим ко второму шагу план внедрения Webasyst 2 (см. все пункты плана и таймлайн ниже в посте). Задача этого шага в том, чтобы сделать wa-2.0.css доступным всем пользователям и открыть разработчикам возможность публиковать новые версии интерфейса своих приложений.
Сразу после обновления фреймворка до версии 2.0.0 пользователи не увидят каких-либо внешних изменений. Однако если установить приложение, которое декларирует поддержку нового интерфейса у себя в конфиге, то внутри этого приложения появится переключатель режима, позволяющий пользователю работать в новом интерфейсе — как с этим приложением, так и всеми «соседними» приложениями, поддерживающими Webasyst 2. И всегда вернуться в старый интерфейс при необходимости.
Среди первых приложений в Инсталлере, которые будут поддерживать новый интерфейс Webasyst 2 — UI (документация по новой дизайн-системе и примеры кода), Фото, Cash Flow. Дашборд и «Настройки» тоже поддерживают wa-2.0.css (пока в статусе беты) и будут работать новом интерфейсе, если его включить внутри любого из вышеперечисленных приложений.
Под капотом в серверной части фреймворка поменялось не так много. Основное изменение касается поддержки двух режимов работы интерфейса — старого (wa-1.3.css) и нового (wa-2.0.css). Если вы еще не успели проверить работу своего приложения или плагина в рамках ветки webasyst2 в течение последних трех месяцев, сейчас самое время попробовать это сделать. Либо на последней версии из dev, либо из все той же webasyst2.
Подробности и документация обо всем связанным с Webasyst 2 — в приложении UI: https://github.com/webasyst/webasyst-framework/tree/webasyst2/wa-apps/ui
* * *
25 декабря 2020
Пару лет назад мы рассказывали о планах полностью обновить интерфейс бекенда Webasyst. И теперь наконец-то рады сообщить, что новая дизайн-система Webasyst 2 (wa-2.0.css) доступна на GitHub в отдельной ветке webasyst2: https://github.com/webasyst/webasyst-framework/tree/webasyst2
Главная новая фича — это, конечно, полностью новый внешний вид. Новый стиль, новая CSS-библиотека, поддержка светлого и темного режимов, масса инструментов для адаптации интерфейса для мобильных устройств, отказ от старых браузеров (пока, IE!) и куча документации и примеров кода.
Текущий релиз на GitHub — это альфа-версия. Это значит, что в wa-2.0.css еще возможны изменения, и переводить на эту ветку продакшн-установки не нужно. Но смотреть, щупать, читать об общих планах внедрения, начинать переводить свои приложения и плагины в новую дизайн-систему — можно и нужно!
В ветке webasyst2 по сравнению с основной версией фреймворка (веткой master) доступны:
- wa-2.0.css: непосредственно сама CSS-библиотека нового интерфейса, новые стили, необходимые JS-инструменты и т.д.;
- приложение UI: документация, примеры кода, демонстрация работы всех компонентов, планы внедрения и т.д.;
- '-legacy': система поддержки работы приложения в двух режимах — и в wa-1.3.css, и в wa-2.0.css — для максимального мягкого перехода каждого приложения;
- переключатель режима интерфейса (1.3 / 2.0 светлый / 2.0 темный) для удобного тестирования и разработки;
- дашборд: перестилизованный и функционально обновленный дашборд с поддержкой десктопов и мобильных устройств (альфа-версия; работа над дашбордом еще продолжается);
- приложения «Настройки» и «Фото», перестилизованные на новый интерфейс в качестве примера (работа по ним тоже пока продолжается).
Посмотреть Webasyst в новом интерфейсе можно следующим образом:
- Переключите свою копию фреймворка на в ветку webasyst2 https://github.com/webasyst/webasyst-framework/tree/webasyst2
- Включите в конфиге wa-config/apps.php приложение UI: 'ui' => true
- В правом нижнем углу включите режим интерфейса 2.0.
Скорее всего, сейчас вы запостите много скриншотов того, как интерфейс Shop-Script «поехал» в рамках интерфейса Webasyst 2... Такое поведение вполне нормально — пугаться не нужно! Shop-Script пока доступен только в рамках старой версии интерфейса (wa-1.3.css). Сейчас следует смотреть, в первую очередь, само приложение UI (это самое главное, что следует смотреть :), а также дашборд, Фото и Настройки. Скоро будут новые перестилизованные приложения — Блог, Команда, Задачи, Cash Flow, Pocket Lists и другие.
* * *
Общий план перехода всего Webasyst (всех приложений) на новый интерфейс:
- Webasyst 2.0.0 alpha @ GitHub: открытая альфа-версия для всех разработчиков на GitHub. Прямо сейчас (25 декабря 2020) мы на этом этапе.
- Webasyst 2.0.0 для всех в «Инсталлере» (когда появятся первые красивые приложения, поддерживающие новый интерфейс — даже в статусе беты): общедоступное бесплатное обновление фреймворка Webasyst 2.0.0 для пользователей, доступное, как обычно, в «Инсталлере». Особенность (и прелесть!) данного этапа в его визуальной незаметности и, следовательно, безопасности для пользователя. wa-1.3.css остается используемым по умолчанию. Сам бекенд, дашборд, форма авторизации в бекенде — все в старом стиле. И только если конкретное приложение декларирует поддержку нового интерфейса, то на страницах этого конкретного приложения у пользователей появляется опция попробовать приложение в новом интерфейсе (режиме wa-2.0.css) с возможностью вернуться обратно к старому (wa-1.3.css). Переключатель работает на уровне одного конкретного приложения (в отличие от этапа 2.0 alpha на «Гитхабе», в течение которого переключатель действует на уровне всего бекенда для текущего пользователя).
- Webasyst 2.X.0 для всех (когда Shop-Script и все самые популярные приложения начнут поддерживать новый интерфейс — пока тоже в статусе беты): wa-1.3.css все так же остается стандарным вариантом дизайна, бекенд по умолчанию выглядит по-старому, форма входа в бекенд по-прежнему старая. Но теперь контрол перехода но новый интерфейс становится общесистемным и показывается во всех приложениях вне зависимости от декларации поддержки ими нового интерфейса. Если конкретное приложение заявляет, что еще не поддерживает новый интерфейс, то пользователь не может переключиться на априори сломанный 2.0, но будет постоянно видеть сообщение о том, что данное приложение не поддерживает новый интерфейс, и поэтому рекомендуется обратиться к разработчику приложения по поводу обновления дизайна. Сам переключатель интерфейса «старый/новый» становится общесистемным, и действует не на уровне каждого приложения, а на уровне общих предпочтений пользователя в бекенде. То есть, если пользователь включил новый интерфейс, скажем, в Cash Flow, то, перейдя в «Блог», он увидит, что там тоже автоматически включился новый интерфейс — как на этапе 2.0 alpha.
- Webasyst 2.Y.0 (как только новый интерфейс Shop-Script и всех ключевых приложений выйдет из беты и станет основным): все — почти так же, только теперь wa-2.0.css является вариантом, включенным по умолчанию, а на wa-1.3 можно возвращаться только явно — по собственному желанию или при необходимости. Запрета на работу с конкретным приложением в рамках wa-1.3.css нет. Форма входа в бекенд и все прочие элементы окружения на этом этапе становятся новыми — в стиле Webasyst 2 (хотя возможно, что частично это случится и на предыдущих этапах).
- Webasyst 2.Z.0: В какой-то момент позже нужно будет полностью отказаться от wa-1.3.css, оставив старые стили во фреймворке, но всегда включая wa-2.0.css и не предлагая переключаться обратно на -legacy.
--
Итак, все приглашаются в ветку webasyst2 — https://github.com/webasyst/webasyst-framework/tree/webasyst2
В первую очередь — разработчики приложений Webasyst. Разработчикам плагинов для Shop-Script сегодняшний анонс нужно просто принять к сведению. Делать пока ничего не надо. Но ваше участие потребуется, когда мы сообщим о планах и сроках перевода основной версии Shop-Script на новый интерфейс Webasyst 2. Это будет уже в 2021 году. Всех с наступающим Новым годом!
15 ответов
Темную тему точно еще надо доработать т.к. нужно больше различий по цветам.
Будем рады увидеть вашу версию цветовой палитры темного режима wa-2.0-dark.css (или wa-2.0-dark-demollc.css?) в виде пул-реквеста. Или же просто так в виде прикрепленного файла.
Пока что не попробовал, но есть предложение сделать возможность отрисовки плоских кнопочек без градиента.
Мне лично не нравится в них градиент. Не хочется везде таскать свои стили, удаляющие градиент. Предлагаю добавить класс .flat, или .no-gradient, или что-нибудь в этом духе.
Спасибо за предложение!
В ходе рестайлинга приложений тоже замечаем, что плоские кнопки часто действительно более уместны, чем градиентные... Вероятно, ближе к официальному релизу сплошная заливка станет дефолтным вариантом, а градиент будет опцией.
Добрый день. А почему вы не используете bootstrap? Это ведь очень удобно, интуитивно понятно и сводит к минимуму вёрстку сайта.
И можно примерные даты релизов озвучить?
Только мне новые иконки стандартных приложений кажутся ужасными?
Карандаш «вид спереди» для блога ... Ну нет интуитивности в этом. Воспринимается просто как шестиугольник с черным кругом внутри. Нет ассоциативности.
Иконка приложения «Сайт» — окно из Mac Os X Panther (т.е. по дизайну — привет начало 2000-х, устарело уже).
У всех иконок разная плотность, что вводит беспорядок в верхнюю панель. Владимир, ну посмотрите на стандартные иконки новой macOS — всё в одном стиле, всё аккурантенько и понятненько. Не нужно ломать голову «А это что за приложение».
Или это не финальный вид иконок?
UPD 08.04.2021: Webasyst 2.0.0 и приложение UI опубликованы и доступны в Инсталлере для всех пользователей:
https://developers.webasyst.ru/download/
https://www.webasyst.ru/store/app/ui/
* * *
2 апреля 2021
Ветка webasyst2, в которой мы показали альфа-версию дизайн-системы Webasyst 2 в конце прошлого года (все подробности ниже в посте), была влита в dev. Это значит, что уже через несколько дней wa-2.0.css будет в master и у всех в Инсталлере.
Мы переходим ко второму шагу план внедрения Webasyst 2 (см. все пункты плана и таймлайн ниже в посте). Задача этого шага в том, чтобы сделать wa-2.0.css доступным всем пользователям и открыть разработчикам возможность публиковать новые версии интерфейса своих приложений.
Сразу после обновления фреймворка до версии 2.0.0 пользователи не увидят каких-либо внешних изменений. Однако если установить приложение, которое декларирует поддержку нового интерфейса у себя в конфиге, то внутри этого приложения появится переключатель режима, позволяющий пользователю работать в новом интерфейсе — как с этим приложением, так и всеми «соседними» приложениями, поддерживающими Webasyst 2. И всегда вернуться в старый интерфейс при необходимости.
Среди первых приложений в Инсталлере, которые будут поддерживать новый интерфейс Webasyst 2 — UI (документация по новой дизайн-системе и примеры кода), Фото, Cash Flow. Дашборд и «Настройки» тоже поддерживают wa-2.0.css (пока в статусе беты) и будут работать новом интерфейсе, если его включить внутри любого из вышеперечисленных приложений.
Под капотом в серверной части фреймворка поменялось не так много. Основное изменение касается поддержки двух режимов работы интерфейса — старого (wa-1.3.css) и нового (wa-2.0.css). Если вы еще не успели проверить работу своего приложения или плагина в рамках ветки webasyst2 в течение последних трех месяцев, сейчас самое время попробовать это сделать. Либо на последней версии из dev, либо из все той же webasyst2.
Подробности и документация обо всем связанным с Webasyst 2 — в приложении UI: https://github.com/webasyst/webasyst-framework/tree/webasyst2/wa-apps/ui
ошибка в wa.js, надо бы раскомментировать строки
// if (xhr.responseText.indexOf('Exception') !== -1) { $.wa.notice({ title: "AJAX Error", text: "<div>" + xhr.responseText + "</div>", button_name: "Close" }); return true; // } document.open("text/html");открыл посмотреть html страницы, а там на 5 тянет с натяжкой
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />добавьте отображение для disabled полей, а то выглядят одинаково:
у вас есть заброшенное приложение developer, его давно прокачали т.ч. имеет смысл обновить его место еще одного бесполезного приложения.
Первое коммерческое приложение на основе дизайн-системы Webasyst 2 — Cash Flow — уже доступно в Инсталлере: https://www.webasyst.ru/store/app/cash/
Под капотом — клиентская часть на Vue.js (Single Page Application). Взаимодействие с сервером — через REST API приложения.
Скоро покажем, как все это интегрируется и работает в нативных мобильных приложениях для iOS и Android :)
Привет!
Полистал документацию. Как там ваш верстальщик? :D
Новый интерфейс пока не поддерживается.
Вы включили режим нового интерфейса Webasyst 2, но это приложение его пока не поддерживает. Пожалуйста, свяжитесь с разработчиком приложения и узнайте, когда новый интерфейс станет доступен.
/webasyst/site/#/personal/settings/