Описание CSS-стилей в Showcase

Материал из Course Orchestra
Перейти к: навигация, поиск
Showcase

Создание решений на КУРС:Showcase

Общая информация

Все используемые CSS-стили можно разделить на 4 группы, описанные ниже в порядке их загрузки на страницу:

  1. внутренние стили компонента DataGrid - эти стили обеспечивают базовые аспекты поведения или отображения DataGrid и в общем случае не предназначены для использования в прикладных случаях (эти стили задаются в файле internalGrid.css, который входит в состав библиотеки DataGrid);
  2. внутренние стили Showcase - эти стили необходимы для корректной работы Showcase и в общем случае не предназначены для использования в прикладных случаях (эти стили задаются в файле internalShowcase.css);
  3. пользовательские стили DataGrid – это стили, которыми настраивается внешний вид DataGrid для конкретного решения (эти стили задаются в файле solutionGrid.css, находящегося в каталоге userdata\css);
  4. стили решения - это стили для конкретного решения для всех модулей Showcase за исключением GRID (эти стили задаются в файле solution.css, находящегося в каталоге userdata\css, причем дополнительные файлы стилей могут подключаться в данный файл с помощью директивы import).

Разделение на внутренние и пользовательские стили несколько условное, так как одни и те же имена стилей могут использоваться и для внутренних, и для пользовательских стилей, но для разных целей.

Внутренние стили Showcase

Задание стиля индикатора загрузки элементов и навигатора Showcase ("progress bar")

По умолчанию индикатор загрузки элемента примет следующий вид: динамичная картинка, где белые и синие полосы "движутся":

Для задания собственного индикатора загрузки элементов и навигатора ("progressbar") в папке перспективы, библиотеки или системной библиотеки (например, default, common.obfi или comman.sys), которые находятся в папке пользовательских данных, необходимо задать или модифицировать соответствующий класс - стиль (.progress-bar). Этот стиль задается в файле solution.css папки css. Итак:

.progress-bar - должен содержаться в файле solution.css папки css соответствующей перспективы, 
библиотеки или системной библиотеки


Например, для задания собственного progress bar в виде gif-картинки (в общем случае не обязательно gif, можно также задавать и другие форматы и текст, пользуясь стандартными настройками css) необходимо: положить картинку в папку resources той же перспективы или библиотеки и прописать к ней путь в стиле progress-bar. См. пример:

.progress-bar
{
  	background: url(../resources/scs_progress_bar.gif) no-repeat;
  	width: 114px; 
  	height: 14px; 
}

Стили отображения пунктов дерева в навигаторе Showcase

Для настройки стиля отображения пунктов меню навигатора Showcase необходимо определить в файле solution.css папки пользовательских данных (в папке css соответствующей перспективы, библиотеки или системной библиотеки) стили с предопределенными именами:

1. clickable - стиль, который будет применен к кликабельным элементам навигатора (те элементы, при нажатии на которые выполняется действие Showcase, например загружается информационная панель)

2. nonclickable - стиль, который будет применен к некликабельным элементам навигатора (те элементы, при нажатии на которые не выполняется никакого действия)

3. withoutChildren - стиль, для отображения пунктов навигатора, у которых нет дочерних child объектов

4. withChildren - стиль, для отображения пунктов навигатора, у которых есть дочерние child объекты.

При наличии в файле solution.css вышеупомянутых стилей они будут применены к элементам дерева автоматически.

Обратите внимание, что каждому пункту навигатора присваивается уникальный идентификатор вида: "gwt-uid-[Number]_navigator_{$id}", где {$id} - id пункта навигатора, при его задании. Этот факт позволяет прописать стили для отображения пунктов навигатора с определенным идентификатором. Данные стили также необходимо прописывать в solution.css

Стили, задающие вид компоненты для загрузки данных на сервер

.sc-uploader-form - HTML форма с компонентой загрузки
.sc-uploader-comp - HTML input (панель, содержащая кнопку вызова диалога и имя загруженного файла)

Внутренние стили DataGrid

.webmain-SmartGrid .headerCell  заголовок столбца
.webmain-SmartGrid .headerGap  промежуток между заголовками столбцов
.webmain-SmartGrid .headerCheck  чекбокс в заголовке
.webmain-SmartGrid .headerCheckGap  промежуток между заголовком с чекбоксом и первым столбцом
.webmain-SmartGrid .dataCheck  чекбокс в записи данных
.webmain-SmartGrid .dataCheckGap  промежуток между чекбоксом и первым столбцом в записи данных
.webmain-SmartGrid .dataCell  ячейка с данными
.webmain-SmartGrid .dataGap  промежуток между ячейками с данными

Форматирование содержимого ячеек

.webmain-DataGrid .align-left  выравнивание по левому краю
.webmain-DataGrid .align-center  выравнивание по центру
.webmain-DataGrid .align-right  выравнивание по правому краю
.webmain-DataGrid .nowrap  предотвращение переноса строк
.webmain-DataGrid .singleline, .webmain-DataGrid .singleline td  стили для обеспечения вывода данных в одну строку
.webmain-DataGrid .multiline, .webmain-DataGrid .multiline td  стили для обеспечения вывода данных в несколько строк

Прочие стили

.webmain-DataGrid-ColumnGroupItemList  здесь используется для задания вида курсора для 
элементов-столбцов на форме управления группами столбцов
.webmain-DataGrid-SmartGridWrapper, .webmain-DataGrid-SmartGridWrapper-noscroll  стили для обеспечения работы 
режима с горизонтальной прокруткой

Пользовательские стили DataGrid

Общие стили DataGrid

.webmain-DataGrid  стиль главного div-a компонента
.webmain-DataGrid .headerRow  строка заголовка
.webmain-DataGrid .headerCheck  ячейка с чекбоксом заголовка
.webmain-DataGrid .headerCell  ячейка заголовка
.webmain-SmartGrid .headerGap  ячейка промежутка заголовка
.webmain-DataGrid .dataRow0  четные строки с данными
.webmain-DataGrid .dataRow1  нечетные строки с данными
.webmain-DataGrid .dataCheck  ячейка с чекбоксом в строке данных
.webmain-DataGrid .dataCell  ячейка промежутка после чекбокса
.webmain-DataGrid .dataGap  ячейка промежутка между ячейками с данными
.webmain-DataGrid .selectedRow td  выделенная строка (если как здесь с td, то  ячейка выделенной строки)
.webmain-DataGrid .selectedCell, .webmain-DataGrid .selectedCell td  выделенная ячейка с данными
.webmain-DataGrid .selectedGap  промежуток выделенной ячейки с данными
.webmain-DataGrid .sortingAsc  заголовок столбца с сортировкой по возрастанию
.webmain-DataGrid .sortingDesc  заголовок столбца с сортировкой по возрастанию
.webmain-DataGrid-ToolPanel  панель с элементами управления (постраничной навигацией, кнопками)

Постраничная навигация

.webmain-DataGridPager  вся панель постраничная навигация
.webmain-DataGridPager-NavigationPanel  панель со стрелочками влево/вправо и номерами страниц
.webmain-DataGridPager-NavigationPanel td  ячейка панели NavigationPanel
.webmain-DataGridPager-NavigationPanel a  ссылка (стрелочка или номер страницы)
.webmain-DataGridPager-NavigationPanel a.currentPage  текущая страница
.webmain-DataGridPager-NavigationPanel a.disabled  недоступная ссылка (например, стрелки влево при текущей первой странице)
.webmain-DataGridPager-PageSizePanel  панель "Записей на странице"
.webmain-DataGridPager-PageSizePanel .gwt-TextBox  поле ввода количества записей на странице

Форма настройки столбцов

.webmain-DataGrid-ColumnsPanel  форма управления столбцами
.webmain-DataGrid-ColumnsPanel-ColumnsList  список столбцов
.webmain-DataGrid-ColumnsPanel-ColumnsList .columnListItem .gwt-Label  стиль написания названия столбца в списке столбцов
.webmain-DataGrid-ColumnsPanel-ColumnsList .columnListItem-selected  выделенный столбец
.webmain-DataGrid-ColumnsPanel-ColumnsList .columnListItem-indent  столбец в группе (отображаемый с отступом, например)
.webmain-DataGrid-ColumnsPanel-Actions  панель с кнопками действий
.webmain-DataGrid-ColumnsPanel-Buttons  панель с кнопками "Готово" и "Отменить"

Форма настройки групп столбцов

.webmain-DataGrid-ColumnGroupsPanel  форма управления группами столбцов
.webmain-DataGrid-ColumnGroupsPanel-Buttons  панель с кнопками "Готово" и "Отменить"
.webmain-DataGrid-ColumnGroupPanelButton  стиль кнопок "Добавить группу" и "Удалить группу"
.webmain-DataGrid-ColumnGroupItemList .gwtQuery-draggable  стиль написания названия столбца в списке столбцов
.webmain-DataGrid-ColumnGroupItemList .gwtQuery-draggable-dragging  стиль перетаскиваемого столбца
.webmain-DataGrid-ColumnGroupItemList .acceptDraggable  стиль перетаскиваемого столбца, добавляемого в группу