Jump to content
Sign in to follow this  
recursiveElk

Styling Tw3Dialog

Recommended Posts

Hi there, I've been attempting to restyle the TW3Dialog component so that it fits more in theme with the rest of our program. However since the changes in the last alpha(2.9.9.59) the construction of this component has changed somewhat. 

This is what i have so far: 
ZgQNmEn.png
 

but i can't seem to get the text to center correctly.

I have tried using things like

TW3Dialog > TW3Label {
	text-align:center;
}

or

TW3Dialog > p {
	text-align:center;
}

or 

TW3Dialog > * {
	text-align:center;
}

Here is the code that i found in the external css relevant to the TW3Dialog Box that i have been editing.

/* overwritten css for dialog box - F */
.TW3DialogButtonBackground {
  background-color: #A6DCE5;
  background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtWebkit1)?>;
  background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtWebkit2)?>;
  background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtMoz)?>;
  background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtMs)?>;
  background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtIE)?>;
  background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtAny)?>;
}

.TW3DialogButtonBorder {
	border-radius:  <?pas=EdgeRounding?>;
  border-top:     1px solid rgba(250, 250, 250, 0.7);
  border-left:    1px solid rgba(250, 250, 250, 0.7);
  border-right:   1px solid rgba(240, 240, 240, 0.5);
  border-bottom:  1px solid rgba(240, 240, 240, 0.5);
  -webkit-box-shadow: 0px 0px 1px 1px <?pas=GetRGBA(clDlgShadowBaseColor, 0.8)?>;
     -moz-box-shadow: 0px 0px 1px 1px <?pas=GetRGBA(clDlgShadowBaseColor, 0.8)?>;
      -ms-box-shadow: 0px 0px 1px 1px <?pas=GetRGBA(clDlgShadowBaseColor, 0.8)?>;
       -o-box-shadow: 0px 0px 1px 1px <?pas=GetRGBA(clDlgShadowBaseColor, 0.8)?>;
          box-shadow: 0px 0px 1px 1px <?pas=GetRGBA(clDlgShadowBaseColor, 0.8)?>;
}

/* ######################################################################### */
/* TW3DialogButton                                                           */
/* ######################################################################### */

.TW3DialogButton {
  min-width:   80px;
  min-height:  32px;
  margin: 5px;
  font-size: <?pas=fntMediumSize?>;
  font-weight: bold;
        color: <?pas=clDlgButtonText?>;
  text-shadow: 1px 1px 1px <?pas=GetRGBA(clDlgButtonTextShadow, 0.8) ?>;
}

.TW3DialogButton:active:enabled {
        color: <?pas=clDlgButtonTextSelect?>;
  text-shadow: -1px -1px 1px <?pas=GetRGBA(clDlgButtonTextShadow, 0.8) ?>;
}

.TW3DialogButton > * {
  font-family: inherit !important;
  font-name: inherit !important;
  font-size: inherit !important;
  background-color: #A6DCE5;
}


/* ######################################################################### */
/* TW3Dialog                                                                 */
/* ######################################################################### */

.TW3Dialog {
  padding:  0px;
  border-radius: 8px;
	z-index: 1000;
	box-shadow: 0 8px 19px rgba(0,0,0,.9);
  background : #69c3d3;
	color: #fff;
  font-size:<?pas=fntMediumSize?>;
}

/* ######################################################################### */
/* TW3DialogHeader                                                           */
/* ######################################################################### */

.TW3DialogHeader {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  height: 48px;
  background-color: #A6DCE5;
  background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtWebkit1)?>;
  background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtWebkit2)?>;
  background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtMoz)?>;
  background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtMs)?>;
  background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtIE)?>;
  background-image: <?pas=GradientTopBottom('#A6DCE5','#95c6ce', gtAny)?>;
}

/* ######################################################################### */
/* TW3DialogButtonPanel                                                      */
/* ######################################################################### */

.TW3DialogButtonPanel {
  height: 64px;
}

 

Share this post


Link to post
Share on other sites

Hi!

The dialog has a second control, which is why the text is pushed to the right.

This control contains the "alert glyph" from font-awesome. Make sure that this is visible and it should look more normal.
Or just inherit from the dialog, set with width of the glyph panel to 0 and that should do the trick.

Share this post


Link to post
Share on other sites

It should already be included. It fails because you now have it in two places.

PS: You can add webfonts in the project dialog, but font-awesome is a permanent part of the system. Its standard for JS based products like Indy is to delphi. When we go out of alpha we will drop the cloudflair link and include the actual file instead.

The easiest way to set the color for the font, is to change the font color either in the themefile or in the font-awesome tag. If you look in the SmartCl.GlyphContainer unit you will see how i have done it there. 

Share this post


Link to post
Share on other sites

Hi,

Quote

It should already be included. It fails because you now have it in two places.

Odd as i can't find the link anywhere else and the glyphs don't show up. This might be because i made my css file external before the patch and therefore it's missing potentially crucial additions.

Quote

The easiest way to set the color for the font, is to change the font color either in the themefile or in the font-awesome tag. If you look in the SmartCl.GlyphContainer unit you will see how i have done it there. 

I tried this with all sorts of methods in the external sheet, such as applying to the following:

.TW3Dialog > .TW3Glyph { color: #ffffff; }
.TW3Dialog > * { color: #ffffff; }
.TW3Dialog { color: #ffffff; }
.TW3Glyph { color: #ffffff; }
.TW3Dialog > a { color: #ffffff; }

 

Quote

Ill add a callback with the dialog so things like this is easier to change

That would be brilliant, If i somehow had access to the sub-components of the dialog without rewriting a showDialog myself, i could make all these customisations largely just in sms which would be ideal.

Not sure how applicable but would be cool if TW3Dialog was also a component i could inherit out of but then also call something like myDialog.ShowDialog( .. ) or something similar. 

eg. just a rough example

var MyDialog := TW3Dialog.Create(self);
MyDialog.Header.Title := 'Dialog Title';
MyDialog.Description := 'Dialog Message';
MyDialog.Glyph.Visible := 'false';
MyDialog.Glyph.Font.Color := $ffffff;
MyDialog.OnDialogSelect := procedure(const Dialog: TW3Dialog; const DialogResult: TW3DialogResult) begin
  // ..
end;

OtherComponent.OnClick := procedure(Sender:TObject) begin
  MyDialog.Show;
end;

 

Share this post


Link to post
Share on other sites

I sincerely appreciate a new non-visual TW3Dialog component with(Alert / Confirm / Prompt / Action Buttons / Preloader actions / Custom Modals) features. When we use modal/dialogs feature in SMS, we have greatly increased the file output size. In my experimental framework with SmartMS, see those features in ProjectSMSDialog

Example: confirm modal dialog with alert

    myApp.confirm('Are you sure?', 'Custom Title',
      procedure ()
      begin
        myApp.alert('You clicked Ok button');
      end,
      procedure ()
      begin
        myApp.alert('You clicked Cancel button');
      end);

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×