Jump to content

recursiveElk

Members
  • Content count

    115
  • Joined

  • Last visited

  • Days Won

    5

recursiveElk last won the day on October 31

recursiveElk had the most liked content!

1 Follower

About recursiveElk

  • Rank

Recent Profile Visitors

138 profile views
  1. Onclick failure when switching TW3Editbox on iOS.

    @jarto I can't recreate Bug #1 anymore
  2. [2.9.9.67] TW3 Components event CSS handlers

    Added a video showing difference between tapping and clicking on Bug 2
  3. Hi, Bug #1 - tw3panel vs tw3button I've encountered a discrepancy with how the css is applied to different components. In this example the :active selector in the css doesn't work on the button but does work for other selectors like :hover. :active also works on tw3panel for example. :active -> green :hover -> red normal -> blue Bug #2 - toggle button As a work around of not being able to use :selected in the past I was using two css classes and switching the StyleClass of the component onClick to create essentially a Toggle Button. This has now broken for some reason in the latest patch on android but not iOS devices. The android issue can be recreated on a computer as well using the demo link and chrome mobile dev tools. It seems to be that to get the onclick to fire properly and switch the css as intended one must hold down on the button for some time, tapping doesn't work, this is not an issue on iOS or Desktop use. An example of the onclick: procedure TNWToggleButton.CheckBoxClick(Sender: TObject); begin // sets css class and checked boolean to Mark toggle status if TNWToggleButton(Sender).Checked then begin // On TNWToggleButton(Sender).StyleClass := OffCssClass; Checked := False; end else begin TNWToggleButton(Sender).StyleClass := OnCssClass; // Off Checked := True; end; end; Please also let me know if there is a better way of achieving what i'm trying to do here. Demo Source
  4. Alpha 2.9.9.59 InsertRule CSS Error

    See link for best practice implementation of css injection.
  5. Onclick failure when switching TW3Editbox on iOS.

    @jarto #1 Will draw up a test and get back to you when i return to work.
  6. [FIXED] ShowDialog - anonymous procedure issue

    @jarto https://i.imgur.com/Hfh70hH.gifv
  7. Onclick failure when switching TW3Editbox on iOS.

    @lennart Was there any progress on this? TW3EditBoxes (and custom classes derived from it) are still very slow to enter on some iOS devices. Some recreate-able bugs on iOS found are the following: Bug #1: iPhone iOS 11 When clicking into a TW3EditBox, keyboard shows. If you then click on a button while the keyboard is still showing (and input still has focus) then the button's onClick will NOT fire if the component was generated via TW3Editbox.Create(self) in InitializeForm but WILL fire if generated through the GUI "drop in" method. Bug #2: iPad Mini 2 iOS 9 When clicking into an input, keyboard shows. If you then click on a button while the keyboard is still showing, then the button's onclick will fire. If you then click anywhere on the screen on any control or any space the button's onclick will fire a second time. NOTE: This does NOT happen as far as I can tell on the iPhone.
  8. Alpha 2.9.9.59 InsertRule CSS Error

    There is an issue that is very obscure with the IDE/RTL which seems to glitch out only when Project Options is not entered. The Exact steps to reproduce are shown in the demo but are also outlined here: Create New Project Add the code into InitializeObject: writeln("entered intialize object of form"); var s := #' .TW3EditBox { color: #0000ff; }'; writeln("After multi-line css"); browserapi.document.styleSheets[0].insertRule(s, 0); writeln("After insert rule css"); Compile and Run Error will show, now go to Project > Default Project Options If you do nothing but press CANCEL then it will remain broken If you do nothing but press OK then it will fix itself and successfully run every time afterwards. Demo Demo 2 showing Css is applied successfully Not sure what's going on here, very strange behaviour. Recreate able on two separate computers at Work. Luckily this is not critical.
  9. New Themes ?

    Thanks for the info! I do agree creating a new custom theme-file would be the way to go. I'm just in the process of working out what's the best way to adapt an existing program that was around before this was possible to do.
  10. Styling Tw3Dialog

    Hi, 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. 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; } 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;
  11. New Themes ?

    I'd love a way to set a default or turn off border for all components as since the latest update every panel i have has an extra border that wasn't there before.
  12. Styling Tw3Dialog

    Also when i try add this line to the top of my existing css: /* And we use font-awesome for inline glyphs */ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'); it throws this error:
  13. Styling Tw3Dialog

    What's the easiest way i can change the color of this icon to say, white? Seems the general consensus is to simply change the color : #ffffff; but i can't get access to the FGlyph sub component when i'm just using ShowDialog();
  14. Styling Tw3Dialog

    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: 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; }
  15. Force a late Resize

    Hi sorry i realise that, it's just the scope of the problem is a bit big to link code. However this is the crux of the problem. under Form Activated of Form B i call: // Load Retrieved Student Data // If there are more new students than panels if FamilyDataArray.count-1 > studentarray.count then begin // add students until it matches the students you load in. for var i := 0 to (FamilyDataArray.count - 1 - studentarray.count - 1) do begin myCustomControl.AddStudent(myCustomControl); end; end else begin // If there are more existing panels than new students // remove students until it matches the students you load in. for var i := 0 to (studentarray.count + 1 - FamilyDataArray.count - 1) do begin studentarray[StudentArray.Count-1].RemoveStudent(studentarray[StudentArray.Count-1]); end; end; -> this basically compares how many "student" components are on the form already with how many students i need to show for the chosen family. If it is greater than the number i need to import i call 'RemoveStudent' to remove them until they are equal. If it is lesser then i call 'AddStudent' to add the components till there are enough to match the number of students i'm importing. AddStudent: procedure TNWControlPanel.AddStudent(Sender: TObject); // Add Student and reposition layout begin // Create Panel var PrevPanel := mycustomparent.fpanel; var NewStudent := TNWStudentPanel.Create(fParent,fPanel.Left,PrevPanel.Top-PanelHeight,fPanel.Width,PanelHeight); newstudent.Resize(fPanel.Width,PanelHeight); NewStudent.MathCheckBox.Enabled := gEnabledCheckBoxFlag; NewStudent.EnglishCheckBox.Enabled := gEnabledCheckBoxFlag; if assigned(mycustomparent) then RepositionPanels(studentArray, myCustomControl, DEFAULT_HEIGHT,PrevPanel.height); // Add Json Object for Last Student added. Initialise to '' for all fields. // but only if it is required. if FamilyDataArray.Count-1 < StudentArray.Count then begin FamilyDataArray.Add(CreateTNWStudent); end; myCustomParent.UpdateStudentBox(); // move position of form when activated var h := Application.FormByName('Form1').handle; var k := mycustomparent.fpanel.top+mycustomparent.fpanel.height; if Sender.ClassName = 'TW3Button' then begin ScrBox.ScrollController.MomentumScrollTo(0,-(mycustomparent.fpanel.top+mycustomparent.fpanel.height-ScrBox.ScrollInfo.ScrollTop)); end; resizeFormScrBox; {TW3Dispatch.SetTimeout(resizeFormScrBox,600);} end; RemoveStudent: procedure TNWStudentPanel.RemoveStudent(Sender: TObject); // Remove Student and reposition layout begin var index := StudentArray.IndexOf(self); if StudentArray.Length>1 then begin // Remove Panel StudentArray[index].fPanel.fxFadeOut(1.0); var dstudent:= StudentArray[index]; StudentArray.Delete(index); dstudent.fpanel.free; var PrevPanel := mycustomparent.fpanel; if assigned(mycustomparent) then RepositionPanels(studentArray, myCustomControl, DEFAULT_HEIGHT,PrevPanel.height); end; if FamilyDataArray.Count > 2 then begin //FamilyDataArray[StudentArray.IndexOf(self)] := nil; FamilyDataArray.Delete(index+1); // Remove Json Object for Last Student end; myCustomParent.UpdateStudentBox(); resizeFormScrBox; end; resizeFormScrBox: procedure resizeFormScrBox begin // ( TForm1.TW3ScrollBox.TW3ScrollContent.TW3CustomControl.Width/Height ) var scrW := tform1(((fParent).Parent).Parent.Parent).Width; var scrH := tform1(((fParent).Parent).Parent.Parent).Height; if assigned(scrbox) then begin ScrBox.BeginUpdate; try ScrBox.Content.Width:=self.Width; var scrHeight := mycustomparent.fPanel.height + mycustomcontrol.fPanel.height; for var i:=0 to StudentArray.Length-1 do begin scrHeight += StudentArray[i].fpanel.height; end; ScrBox.Content.Height:= scrheight; ScrBox.ScrollController.Refresh; ScrBox.Setbounds(0,0,scrW,scrH); finally ScrBox.EndUpdate; end; Scrbox.UpdateContent; end; end; The main problem is that when there need to be students added, it works fine and resizes correctly. But when i need to remove students to match the number being imported, the form will successfully remove the students but scrbox.content.height wont update and therefore will be too big for the components meaning one can overscroll. (maybe Scrbox.UpdateContent is firing too early?) I realise this is a bit of a code dump and am sorry, there isn't a "nice" way i can ask this question! But i do think i can narrow it down to my resizeFormScrBox procedure which was written a while ago.
×