Размер кнопки на вкладке PageControl

[x11]

Пытаюсь с помощью CSS увеличить размер кнопки (.x-tab-default .x-tab-close-btn), т.к. кнопка очень маленькая и мышкой на нее трудно попадать.

Но вместо увеличения размера, появляется 4 кнопки.

Подскажите, как правильно увеличить размер кнопки?

Спасибо.

[Sherzod]

7 hours ago, x11 said:

Пытаюсь с помощью CSS увеличить размер кнопки (.x-tab-default .x-tab-close-btn), т.к. кнопка очень маленькая и мышкой на нее трудно попадать.

Но вместо увеличения размера, появляется 4 кнопки.

Подскажите, как правильно увеличить размер кнопки?

Здравствуйте.

1. UniTabSheet2 -> ClientEvents -> ExtEvents ->

function afterrender(sender, eOpts)
{
    if (sender.closable) {
        let el = Ext.get(sender.tab.getEl().select('.x-tab-close-btn').elements[0]);
        if (el) {
            el.setStyle('background', null); 
            el.setStyle('background-size', '20px 20px');
            el.setStyle('right', '0'); 
            el.setStyle('top', '0');
            el.setStyle('width', '20px');
            el.setStyle('height', '20px');
            el.setStyle('background-image', 'files/close.png')
        }
    }
}

2. (files/close.png)

3. Результат:

[x11]

Не помогает.

Проблема в том, что вкладки создаются динамически, в run-time.

[Sherzod]

4 hours ago, x11 said:

Проблема в том, что вкладки создаются динамически, в run-time.

Ну, в принципе, это не является преградой. 

[Sherzod]

6 hours ago, x11 said:

Не помогает.

Проблема в том, что вкладки создаются динамически, в run-time.

    with TUniTabSheet.Create(Self) do
    begin
      Caption:='Page-1';
      PageControl:=TUniPageControl(C);
      Closable := True;
      Name := 'Page1'; //<-----
      ClientEvents.ExtEvents.Values['afterrender'] :=
        'function afterrender(sender, eOpts)'+
        '{                                  '+
        '    if (sender.closable) {         '+
        '        let el = Ext.get(sender.tab.getEl().select(".x-tab-close-btn").elements[0]);'+
        '        if (el) {                  '+
        '            el.setStyle("background", null);'+
        '            el.setStyle("background-size", "20px 20px");'+
        '            el.setStyle("right", "0");'+
        '            el.setStyle("top", "0");  '+
        '            el.setStyle("width", "20px");'+
        '            el.setStyle("height", "20px");'+
        '            el.setStyle("background-image", "files/close.png")'+
        '        }'+
        '    }'+
        '}'
    end;

 

[x11]

получается вот так:

 

[Sherzod]

8 minutes ago, x11 said:

Result.PageIndex

= -1 ?

[x11]

это я уже исправил

нужно было имя назначать после строки:

pgMain.ActivePage := Result;
Result.Name := 'Page' + Result.TabIndex.ToString;

 

[Sherzod]

10 minutes ago, x11 said:

Нужен тестовый случай.

[Sherzod]

13 minutes ago, x11 said:

Также попробуйте это правило CSS, no-repeat

https://www.w3schools.com/cssref/pr_background-repeat.asp

[x11]

17 hours ago, Sherzod said:

Нужен тестовый случай.

вот

uniGUI_PageClose.zip

[x11]

17 hours ago, Sherzod said:

Также попробуйте это правило CSS, no-repeat

 

добавил строку, но результат плохой

        '            el.setStyle("background-repeat", "no-repeat");'+

 

[Sherzod]

On 7/24/2021 at 9:08 PM, Sherzod said:

el.setStyle("top", "0");

?

[Sherzod]

4 minutes ago, x11 said:

Добавьте это правило:

background-position: 0;

 

[x11]

Спасибо помогло.

Кстати, иконка отрисовывается не та, что указана в коде,

el.setStyle("background-image", "files/close.png")

а по умолчанию, маленькая, стандартная, поэтому она "расплывается"

[Sherzod]

9 hours ago, x11 said:

Кстати, иконка отрисовывается не та, что указана в коде,

Да.

Попробуйте это решение.

1. CustomCSS:

.customSheet .x-tab-close-btn {
  background-image: url("files/close.png");
  background-size: 24px auto;
  background-repeat: no-repeat;
  background-position: 3px -5px !important;
  width: 24px;
  height: 24px;
}

2. 

function TMainForm.CreateTabSheet(Node: TUniTreeNode): TUniTabSheet;
const
  constBeforeClose                = 'beforeclose';
  funcBeforeClose                 = 'function (panel, eOpts){panel.uniFMask={beforeclose: false};}';

begin
  Result := TUniTabSheet.Create(Self);

  Result.PageControl      := pgMain;
  Result.AlignmentControl := uniAlignmentClient;
  Result.Layout           := 'fit';

  Result.JSInterface.JSAddListener(constBeforeClose, funcBeforeClose);
  Result.Caption     := Node.Text;
//  Result.ImageIndex  := 0;
  Result.Closable    := True;
  Result.Data := Node;

  Result.OnClose     := TabSheetClose;
  Node.Data  := Result;
  Result.Data        := Node;

  if Result.Closable then
    Result.JSInterface.JSAddListener('afterlayout', 'function(){this.tab.addCls("customSheet")}'); //<-------
//  Result.ClientEvents.ExtEvents.Values['afterrender'] :=
//        'function afterrender(sender, eOpts)'+
//        '{                                  '+
//        '    if (sender.closable) {         '+
//        '        let el = Ext.get(sender.tab.getEl().select(".x-tab-close-btn").elements[0]);'+
//        '        if (el) {                  '+
//        '            el.setStyle("background", null);'+
//        '            el.setStyle("background-size", "20px 20px");'+
//        '            el.setStyle("right", "0");'+
//        '            el.setStyle("top", "0");  '+
//        '            el.setStyle("width", "20px");'+
//        '            el.setStyle("height", "20px");'+
//        '            el.setStyle("background-image", "files/close.png")'+
//        '        }'+
//        '    }'+
//        '}';

  CreateFrame(Result, TFrame4);
  pgMain.ActivePage := Result;
  Result.Name := 'page' + Result.TabIndex.ToString;
end;

 

[x11]

Получилось. Спасибо большое.

Единственное, что правильно подставить путь к картинке нужно с ведущим символом наклонной черты:

background-image: url("/files/close.png");

иначе путь будет вот таким, как на второй картинке:

[x11]

On 7/26/2021 at 11:02 PM, Sherzod said:

Попробуйте это решение.

оказалось, что подходит не для всех тем, вот на теме uni_sencha2 выглядит некрасиво

[Sherzod]

Да, поскольку это связано с CSS.

[x11]

Ну так может есть другой способ? Универсальный, более правильный?

Может быть, опять же, с помощью CSS можно эту кнопку чуть-чуть растянуть? А не накладывать на нее другую.

[x11]

например, так?

[x11]

Я так понял, что прикол в том, что в разных темах кнопка - по-разному отображается. В одних - это картинка, в других - это иконка шрифта.

[x11]

/*увеличить кнопку Закрыть на вкладках главной формы fmMain.pgMain для тем по умолчанию*/
/*
.customSheet .x-tab-close-btn {
  background-image: url("/files/close.png");
  background-size: 24px auto;
  background-repeat: no-repeat;
  background-position: 3px -5px !important;
  width: 24px;
  height: 24px;
}*/

/*или*/
/*иконка Закрыть на вкладках главной формы в темах типа uniSencha2*/
/*.x-tab-default .x-tab-close-btn{
	font-size: 20px;
	height: auto;
    width: 19px;
}*/

а можно как-то определить и понять программно, какой тип темы используется?

По названию определять нельзя, это неправильно.