Documentation

Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision Both sides next revision
visionx:invoice_application [2020/06/08 11:13]
cduncan [Changing the Application Style]
visionx:invoice_application [2020/06/08 11:17]
cduncan [Changing the Invoice Screen]
Line 205: Line 205:
 ===== Changing the Invoice Screen ===== ===== Changing the Invoice Screen =====
  
-As the next step we are going to style our buttons. Starting off with the "​Insert"​ and "​Delete"​ buttons above our invoice table. To do that we press the "​Edit"​ button (1) on our button and set the foreground color to white (2) and the background color to a nice blue (2) for the "​Add"​ button and red for the "​Delete"​ button. Additionally we are going to turn off the border of our button (3). We're also going to change the text from "​Insert"​ to "​Add"​+As the next stepwe are going to style our buttons ​beginning ​with the "​Insert"​ and "​Delete"​ buttons above our invoice table. To do thatwe press the "​Edit"​ button (1) on our button and set the foreground color to white (2)the background color to a nice blue (2) for the "​Add"​ buttonand red for the "​Delete"​ button. Additionallywe are going to turn off the border of our button (3). We're also going to change the text from "​Insert"​ to "​Add"​.
  
 {{:​visionx:​invoice_application:​style-button.png?​nolink|Styling the buttons}} {{:​visionx:​invoice_application:​style-button.png?​nolink|Styling the buttons}}
  
-The "Add Article"​ and "Add new item" buttons are getting a new style as well. Press the "​Edit"​ button (1), uncheck "Show border"​ (2) and check "​Border on Mouseover"​ (2). Additionally we set the foreground color to the same color of our "​Add"​ button (3) and the background to transparent (3).+The "Add Article"​ and "Add new item" buttons are getting a new style as well. Press the "​Edit"​ button (1), uncheck "Show border"​ (2)and check "​Border on Mouseover"​ (2). Additionallywe set the foreground color to the same color as our "​Add"​ button (3) and the background to transparent (3).
  
 {{:​visionx:​invoice_application:​style-button-add.png?​nolink|Styling the add buttons}} {{:​visionx:​invoice_application:​style-button-add.png?​nolink|Styling the add buttons}}
  
-Now we style the "​Delete"​ button of the component table. We remove the text altogether (1) and set the foreground to the same red we used at the "​Delete" ​Button ​(2). Uncheck "Show border"​ (2) and check "​Border on Mouseover"​ (2) and as the last step select the "​minus-circle"​ icon with a size of 24 for this button (3).+Now we style the "​Delete"​ button of the component table. We remove the text altogether (1) and set the foreground to the same red we used for the "​Delete" ​button ​(2). Uncheck "Show border"​ (2)check "​Border on Mouseover"​ (2)andas the last stepselect the "​minus-circle"​ icon with a size of 24 for this button (3).
  
 {{:​visionx:​invoice_application:​style-button-delete.png?​nolink|Styling the delete button}} {{:​visionx:​invoice_application:​style-button-delete.png?​nolink|Styling the delete button}}
  
-The last button we are going to style is the "​+"​ button of the component table. We remove the text altogether (1) and set the foreground to the same blue we used at the "​Add" ​Button ​(2). Uncheck "Show border"​ (2) and check "​Border on Mouseover"​ (2) and as the last step select the "​plus-circle"​ icon with a size of 24 for this button (3).+The last button we are going to style is the "​+"​ button of the component table. We remove the text altogether (1) and set the foreground to the same blue we used for the "​Add" ​button ​(2). Uncheck "Show border"​ (2)check "​Border on Mouseover"​ (2)and select the "​plus-circle"​ icon with a size of 24 for this button (3).
  
 {{:​visionx:​invoice_application:​stle-button-add-article.png?​nolink|Styling the add article button}} {{:​visionx:​invoice_application:​stle-button-add-article.png?​nolink|Styling the add article button}}
  
-To make the component table look like a real table we have to line up the labels with the editors. To do that you select the label in the editor and set the anchors to your desired positions. In the "​Edit"​ menu of the labels we set them to bold as well. Next up we are going to add a title to the right side of the screen. To do that we change the type of our panel in its "​Edit"​ menu. To do that we select the left side icon under the "​Margins"​ of the panel. After that we add a label "Edit Invoice"​ and add an icon in front of it with the Font Awesome Icon "​file-text-o"​.+To make the component table look like a real tablewe have to line up the labels with the editors. To do thatyou select the label in the editor and set the anchors to your desired positions. In the "​Edit"​ menu of the labelswe set them to bold as well. Next upwe are going to add a title to the right side of the screen. To do thatwe change the type of our panel in its "​Edit"​ menu. To do thatwe select the left side icon under the "​Margins"​ of the panel. After thatwe add a label "Edit Invoice"​ and add an icon in front of it with the Font Awesome Icon "​file-text-o"​.
  
 {{:​visionx:​invoice_application:​web-preview-2.png?​nolink|The current application}} {{:​visionx:​invoice_application:​web-preview-2.png?​nolink|The current application}}
This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information