Make styling configurable

[00:00 - 00:08] In the previous lesson, we have made the resume editable. The user can change the text and add or remove sections.

[00:09 - 00:17] In this lesson, we will also make the styling configurable. This way, every user can create their own unique resume look.

[00:18 - 00:31] We will give the user the following options. Changing colors, changing the width of the left column, changing the headline thickness, and choosing if the photo is round or square.

[00:32 - 00:41] First, we want to add a sidebar where the user can find all the editing options . We want this sidebar to appear on the left side of the screen.

[00:42 - 01:34] For this, we need to create a new component called sidebar. We must import and register it in the app component.

[01:35 - 02:18] I will add it to the top of the main element. In order to prevent overlap with the resume, we will move the resume diff to the very right of the container with margin left auto.

[02:19 - 02:35] Starting from a bigger screen size, however, this will create too much distance between the sidebar and the resume. Starting from 1,600 pixels width, we center the resume in the container.

[02:36 - 02:45] We created the sidebar, but now it is time to add the content. The first component we want to display in the sidebar is the edit toggle.

[02:46 - 03:01] To display elements within the sidebar, we add slot tags. In the app component, we can move the edit toggle in between the sidebar tags.

[03:02 - 03:05] And there we have it. One more thing I noticed here.

[03:06 - 03:17] The resume content is overflowing the resume in edit mode because of the edit buttons. Let's tie the height CSS rule for the resume to the edit mode.

[03:18 - 03:39] We only need a fixed height when the edit mode is off. To make the colors adjustable, we start by moving the hex codes of the colors used in the resume in the app component state.

[03:40 - 03:54] The left and the right column can be styled differently. So we create a nested object, colors, with the left and right property, that each holds values for highlight, text and background.

[03:55 - 04:05] We also provide a set of values for highlight. We also provide a set of values for highlight.

[04:06 - 04:19] We also provide a set of values for highlight. We provide a set of values for highlight, text and background.

[04:20 - 04:27] We provide a set of values for highlight. We provide a set of values for highlight.

[04:28 - 04:35] We provide a set of values for highlight. We provide a set of values for highlight.

[04:36 - 04:40] We provide a set of values for highlight. We provide a set of values for highlight.

[04:41 - 04:49] We provide a set of values for highlight. We set CSS variables for these colors and main CSS on the root element.

[04:50 - 05:08] We are able to reference these in our CSS roots anywhere, such as in our section headline component. While it is a common practice to declare the CSS variables on the root pseudo class, we could also define the variables on any element.

[05:09 - 05:23] We provide the children of the element, we'll have access to those variables. Since we need the children of the resume element to have access, we can define the variables on the div with the idea resume element.

[05:24 - 05:32] This is the outer wrapper for all resume content. We want to set the CSS variables with an inline style.

[05:33 - 05:47] Let's use a static value to test it out first. We can delete or comment out the variable from main CSS, and you see that the primary color is red from the div resume.

[05:48 - 06:00] In order to type values from the data object to inline style, we can use the v bind style or just colon style. The value needs to be a JavaScript object.

[06:01 - 06:35] Now, the color is displayed dynamically. We need a color input so that the user can adjust the color.

[06:36 - 07:07] To isolate the markup and styling of this color input, we create a new component, color input.view. Even though it is not often used, HTML actually has an input element of type color that we can use in our component.

[07:08 - 07:34] In the new component, we add a template section with an input element of type color and a label. By wrapping the input in the label, we don't need to add the four attribute to the label element.

[07:35 - 08:09] Let's import this component into the app component and display it within the sidebar. Since our sidebar component contains a slot, we can edit and between the component tags.

[08:10 - 08:43] The default styling does not look great, so let's add a scoped style section and give the input element the class color picker. In the default styling in the browser, we can figure out which styling we need to override.

[08:44 - 09:02] We can use the default styling to make sure that it is not the same. We can use the default styling to make sure that the color is not the same.

[09:03 - 09:42] Since we will reuse this component for configuring the other colors as well, we have to make the text adjustable. We can use a prop for this. We create a script section and add a prop with the name "Labor to it".

[09:43 - 10:05] Let's give the prop a type of string and a default value of choose a color. We print out the label prop after the color input.

[10:06 - 10:20] To override the default value, we pass the label prop with the value "Highlight Color" to the color input component. Make sure to never use VBIND when you are passing a static string value.

[10:21 - 10:42] Otherwise, you will try to interpret the value as a JavaScript variable and throw an arrow. Once the color changes, our color input component should inform the parent component.

[10:43 - 10:53] Let's first check how we can access the color. With dollar sign event.target.value, we can access the hex code of the newly picked color.

[10:54 - 11:18] Once my mouse leaves the color input picker, the change event fires. The problem with using the change event is that we don't see the effect while we move the color picker.

[11:19 - 11:30] Only once we have chosen a color and left the input field, the change becomes visible. By using the input event, instead of the change event, the event fires with every move of the color picker.

[11:31 - 11:47] And we can preview the effect as we drag the color picker. We lock the value to understand when the event fires, but what we actually need is for our component to emit the value.

[11:48 - 12:07] You will call the custom event color changed. In the parent component, we can listen to the event with kibob case.

[12:08 - 12:30] Let's not change this event handler to adjust the value and the data object. By dragging the color picker, we can see that the color updates.

[12:31 - 12:45] Our color input element currently doesn't show the default color. Once the color is chosen, the color is shown, but in order to also show the default color, we need to set the value property of the input element.

[12:46 - 13:27] For that, we want to accept the prop with the default color. In the parent component, this prop needs to be passed.

[13:28 - 13:38] As you can see, the default color is now shown. Now we want to add all CSS variables to the dynamic inline styling.

[13:39 - 13:46] So far, we have just done that for one of the variables. Adding all variables inline will make it hard to read.

[13:47 - 14:01] For that reason, we will now learn another important concept in view, computed properties, with which we can move the inline object into the script section. A computer property is like a property that computes its value.

[14:02 - 14:12] It's actually a method that returns a value. For the computation, it often uses the value of data properties.

[14:13 - 14:29] All computed properties are methods that you add to the computed property. This is how it looks.

[14:30 - 14:57] The method should return a value. Now we can use this computed property as the value for our inline dynamic style attribute.

[14:58 - 15:13] You simply reference it like a normal data property. Whenever you're in template expressions are getting too long or complex, it makes sense to move them to computed property.

[15:14 - 15:27] The nice part about computed properties is that they are reactive. You can bind their values in the template and an update will be triggered as soon as any of the underlying data values change.

[15:28 - 15:41] Let's make all six colors adjustable by adding the remaining five color input components in the sidebar. Make sure to change the label and replace the data property in the event handler.

[15:42 - 16:26] Try out the color change component and see how the colors and the resume update . One thing that still needs to be updated is the item colors and the contact component.

[16:27 - 16:52] To fix that, we add item color as a prop. Add the dynamic attribute colon fill or rebind fill equals to the prop item color to the SVG elements.

[16:53 - 17:52] Of course, we also need to pass the prop to the component. We bind the prop to the value of colors left highlight so that the items get the same highlight color that the border underline and headlines of the left column get.

[17:53 - 18:07] Next up is making the column width adjustable. Some users might prefer a 40 to 60 division and others a 30 to 70 for example.

[18:08 - 18:16] If you want to practice what you have learned so far, you can make the column width adjustable. Pause here and try it out.

[18:17 - 18:26] Here is how I solved this exercise. There are different ways of making the column width adjustable. Don't worry if you have a different solution.

[18:27 - 24:15] Same as before, we start by moving the default values in the data object of the app component. We create a select input.view file, and add a template, script, and style section.

[24:16 - 24:48] Usually, a select element would require us to list every option like this. With view, you can use an array and iterate over it with v4.

[24:49 - 25:02] For that, we will need to pass a prop of the type array that contains objects with the properties name and value. In our app component, we import and register our select input component.

[25:03 - 25:44] For each option, we add a label prop and an options prop. The label prop does not get be bind because we pass an aesthetic string.

[25:45 - 25:55] The option prop needs to be been directive because the array in there should be interpreted as a JavaScript expression. Otherwise, the prop would be read as a string and not an array.

[25:56 - 27:26] In the select input component, we need to declare that we expect a label and an options props. Next, we can reference them in the template.

[27:27 - 28:11] With v4, we iterate over the options prop array and we dynamically assign the value and the name. Remember to add a key attribute. For that, we use the option .value.

[28:12 - 28:22] Now, both select elements are rendered, but changing them has no effect yet. We need to omit a custom event once the change event fires.

[28:23 - 28:43] I will call it update selection, but you are free to come up with a better name . By sending a long . sign event.target.value, the parent component will get the value of the chosen option.

[28:44 - 28:58] For example, 300 if the user chooses thin for headline thickness. We need to listen for this value in the parent component and update the data properties to the value that the event sent along.

[28:59 - 29:35] For default, the select element will display the first option. We need to pre- select the actual default option though. For that, we need to pass in the default option value. Let's call it default option.

[29:36 - 30:36] If the value of the default option equals the value of the current option, we set the option to selected. This way, the browser knows which option should be selected as the default option.

[30:37 - 30:59] If you check the view def tools in the browser, you see that it now updates. Finally, we need to render the resume based on these data properties. For the headline font weight, we can solve this the same way we did for colors.

[31:00 - 31:17] We add another CSS variable to the CSS variable's computed property in the app component. Now, every element in our resume will know what this variable in their CSS.

[31:18 - 31:49] Let's use it in the section headline component, where we define the style for the section headlines. This way font weight is whatever value the variable currently holds. For the image, we need a different approach. We will create the CSS class circle and apply it only if the image shape holds the value around.

[31:50 - 32:20] We set the class circle to border_radius equals 50%. If square is selected, this expression will evaluate to false, and the circle class won't be added.

[32:21 - 32:38] If you are unsure about how class bindings work, feel free to take a look at the previous lesson, toggling edit mode, where I covered this in more detail. Awesome! As you can see in the browser, the image shape gets updated.

[32:39 - 33:14] Now we have made all the stylings configurable. You can play around with it and adjust the styling to how you like it.