Публикация

Как добавить или изменить CSS стиль

Рогова Татьяна

20 июня 2018 02:23

Вопрос

Ответ

Чтобы добавить любой необходимый стиль необходимо:

1) Создать новый модуль. Добавить css стиль на вкладку Less. Рекомендуется использовать следующую структуру:

body[OldUI=false][CustomUI="true"] {
    .control-width-15 .t-label {
        color: #7FFF00;
    }
}

2) Создайте необходимую замещающую страницу используя пункт "Замещающий клиентский модуль". Например, необходимо заместить модуль BasePageV2. Добавьте модуль из первого шага в define замещающей страницы.

Переопределите метод init() и вызовите метод setAttributeToBody() чтобы добавить ваш стиль к body.

define("BasePageV2", ["css!UsrBasePageV2CSS"],
    function() {
        return {
            messages: {},
            mixins: {},
            attributes: {},
            methods: {
                init: function() {
                    this.callParent(arguments);
                    this.initializeCustomCss();
                },
                initializeCustomCss: function() {
                    Terrasoft.utils.dom.setAttributeToBody("CustomUI", true);
                }
            },
            diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/
        };
});

3) Обновите страницу.

Нравится

2 комментария

Егор Нехаенко

14 октября 2020 11:42

Это применяется во всех разделах. Если это необходимо в одном разделе, этот вариант не работает

Ответить

Зверев Александр

14 октября 2020 12:18

А если замещать не BasePageV2, а свою страницу?

В конфигурации достаточно схем с названиями, оканчивающимися на CSS, в которых вносятся изменения стилей для конкретных схем. Например, AccountRelationshipDetailCss добавляет стили, специфичные для этой детали:

.account-relationship.detail {
	.relationship-mode-button {
		border-top-right-radius: 1px;
		border-bottom-right-radius: 1px;
	}
	.datagrid-mode-button {
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
	}
	.relationship-mode-button, .datagrid-mode-button {
		padding-left: 0.308em;
		padding-right: 0.462em;
	}
	.mode-button-pressed {
		background: #e4eaf9;
	}
	.account-relationship-chart {
		height: 450px;
	}
}

Затем в основной схеме этой детали AccountRelationshipDetailV2 подключается эта схема со стилями:

define("AccountRelationshipDetailV2", ["AccountRelationshipDetailV2Resources", "MiniPageUtilities",
	"ConfigurationDiagramGenerator", "RelationshipDiagramViewModel", "RelationshipDiagram",
	"LookupQuickAddMixin", "RelationshipChartGenerator", "RelationshipChart",
	"css!AccountRelationshipDetailCss"
], function() {

И так для конкретного элемента, например, кнопки, использовать стили оттуда:

{
 "operation": "insert",
 "name": "RelationshipModeButton",
 "parentName": "Detail",
 "propertyName": "tools",
 "values": {
	"itemType": this.Terrasoft.ViewItemType.BUTTON,
	"hint": {"bindTo": "Resources.Strings.DiagramViewButtonHint"},
	"click": {
		"bindTo": "setRelationshipMode"
	},
	"visible": {
		"bindTo": "getModeButtonsVisible"
	},
	"pressed": {
		"bindTo": "getRelationshipButtonPressed"
	},
	"classes": {
		"wrapperClass": ["relationship-mode-button"],
		"pressedClass": ["mode-button-pressed"]
	},
	"controlConfig": {
		"imageConfig": {
 "bindTo": "Resources.Images.RelationshipViewIcon"
		}
	},
	"markerValue": relationshipMode.Relationship
 }
{

Ответить

Показать все комментарии