92 lines
5.1 KiB
Plaintext
92 lines
5.1 KiB
Plaintext
Для работы скрипта сборки спрайта картинок нужен python версии 3.6+
|
||
|
||
Для добавления картинки общей для всех языков
|
||
1. Откройте папку web-apps/apps/common/main/resources/help/images/src, если картинка используется как минимум в двух редакторах
|
||
или web-apps/apps/{редактор}/main/resources/help/images/src, если картинка используется только в одном редакторе:
|
||
a) изображение кнопки или иконки положите в папку"icons". название картинки будет соответствовать названию селектора для css;
|
||
b) более крупное изображение положите в папку "big";
|
||
c) символ в папку "symbols".
|
||
|
||
2. Запустите терминал(командную строку)
|
||
|
||
3. Передите в папку web-apps/translation/help c помощью команды: cd путь_к_папке
|
||
(ВНИМАНИЕ! [для windows] ecли папка лежит не на дике С, перейти на другой диск можно комадой "cd Буква_диска:" после нажать "enter" ([Пример:] cd F:))
|
||
|
||
4. Запустить скрипт командой: python helpsprite.py
|
||
|
||
если команда выдаст ошибку "ModuleNotFoundError: No module named 'PIL'", нужно выполнить в терминале
|
||
для windows: python -m pip install Pillow
|
||
для остальных os: python pip install Pillow
|
||
|
||
если при выполнении появилась ошибка "ImportError: cannot import name '_imaging' from 'PIL'....", нужно выполнить
|
||
для windows:
|
||
python -m pip uninstall Pillow
|
||
python -m pip install Pillow
|
||
|
||
для остальных os:
|
||
python pip uninstall Pillow
|
||
python pip install Pillow
|
||
|
||
5. Пример использования картинки из спрайта
|
||
Чтобы добавить картинку в текст страницы нужно вставить:
|
||
a) Для изображений из папки icons:
|
||
<div class="icon icon-имя_файла_без_расширения"></div>
|
||
b) Для изображений из папки big:
|
||
<div class="big big-имя_файла_без_расширения"></div>
|
||
c) Для изображений из папки big:
|
||
<div class="smb smb-имя_файла_без_расширения"></div>
|
||
|
||
6. Внутри абзацев <p></p> вместо <div> надо использовать <span>, иначе строчка разбивается на части. В пунктах списков <li> и ячейках таблицы <td> можно использовать <div>
|
||
7. Только для helpcenter. После добавления картинок по принципу div class необходимо копировать новые стили в help.less
|
||
Т.к. стили из sprite.css применяются только к страницам htm, но не к страницам aspx,
|
||
перед тем, как выкладывать правки на test-helpcenter, надо скопировать стили из
|
||
\Web\OfficeWeb\apps\documenteditor\main\resources\help\images\sprite.css
|
||
\Web\OfficeWeb\apps\presentationeditor\main\resources\help\images\sprite.css
|
||
\Web\OfficeWeb\apps\spreadsheeteditor\main\resources\help\images\sprite.css
|
||
в help.less (в секции
|
||
/*document editor icon styles*/
|
||
/*presentation editor icon styles*/
|
||
/*spreadsheet editor icon styles*/)
|
||
иначе картинки, добавленные как <div class="icon icon-имя_файла_без_расширения"></div> и др. на страницах aspx отображаться не будут.
|
||
Также надо учитывать, что пути к картинкам big.png и icons.png в help.less будут отличаться от тех, что указаны в sprite.css
|
||
document editor
|
||
|
||
.big{
|
||
background-image: url(../OfficeWeb/apps/documenteditor/main/resources/help/images/big.png);
|
||
background-repeat: no-repeat;
|
||
display: inline-block;
|
||
}
|
||
|
||
.icon{
|
||
background-image: url(../OfficeWeb/apps/documenteditor/main/resources/help/images/icons.png);
|
||
background-repeat: no-repeat;
|
||
display: inline-block;
|
||
}
|
||
|
||
presentation editor
|
||
|
||
.big{
|
||
background-image: url(../OfficeWeb/apps/presentationeditor/main/resources/help/images/big.png);
|
||
background-repeat: no-repeat;
|
||
display: inline-block;
|
||
}
|
||
|
||
.icon{
|
||
background-image: url(../OfficeWeb/apps/presentationeditor/main/resources/help/images/icons.png);
|
||
background-repeat: no-repeat;
|
||
display: inline-block;
|
||
}
|
||
|
||
spreadsheet editor
|
||
|
||
.big{
|
||
background-image: url(../OfficeWeb/apps/spreadsheeteditor/main/resources/help/images/big.png);
|
||
background-repeat: no-repeat;
|
||
display: inline-block;
|
||
}
|
||
|
||
.icon{
|
||
background-image: url(../OfficeWeb/apps/spreadsheeteditor/main/resources/help/images/icons.png);
|
||
background-repeat: no-repeat;
|
||
display: inline-block;
|