You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+146-1
Original file line number
Diff line number
Diff line change
@@ -33,6 +33,151 @@ $ composer install
33
33
$ php artisan serve
34
34
```
35
35
36
+
# Project Settings
36
37
38
+
The `AppConfig` component is a React component designed to provide a user interface for configuring the layout settings of the project. It utilizes the PrimeReact library for UI components and leverages context provided by the `LayoutContext` and `PrimeReactContext` to manage and apply configuration changes.
37
39
38
-
**NB: This project is still under development please report any bugs to the issue section of this repo**
40
+
41
+
## Table of Contents
42
+
43
+
-[Usage: Accessing AppConfig Button on the Dashboard](#usage-accessing-appconfig-button-on-the-dashboard)
44
+
-[Configuration Options](#configuration-options)
45
+
-[Scale](#scale)
46
+
-[Menu Type](#menu-type)
47
+
-[Input Style](#input-style)
48
+
-[Ripple Effect](#ripple-effect)
49
+
-[Themes](#themes)
50
+
-[Usage: Applying Selected Theme to App.blade.php](#usage-applying-selected-theme-to-appbladephp)
51
+
52
+
53
+
Usage: Accessing AppConfig Button on the Dashboard
The `AppConfig` component provides a convenient way to access and customize the layout settings directly from the dashboard interface. Follow these steps to utilize the AppConfig button:
57
+
58
+
1. Navigate to the Dashboard:
59
+
60
+
2. Locate AppConfig Button:
61
+
62
+
- Look for the configuration button represented by a cog icon typically positioned on the right center of the screen.
63
+
3. Click the AppConfig Button:
64
+
65
+
- Once you've located the AppConfig button, click on it to open the configuration sidebar.
66
+
4. Adjust Configuration Options:
67
+
68
+
- The sidebar will reveal various configuration options:
69
+
- Scale: Adjust the font size of the application.
70
+
- Menu Type: Choose between "Static" and "Overlay" menu types.
71
+
- Input Style: Select between "Outlined" and "Filled" input styles.
72
+
- Ripple Effect: Toggle the ripple effect on user interactions.
73
+
- Themes: Choose from a variety of themes categorized by design systems (Bootstrap, Material Design, etc.).
74
+
5. Preview Changes:
75
+
76
+
- Visualize the changes in real-time as you adjust the configuration options.
77
+
6. Apply Theme:
78
+
79
+
- For theme changes, click on the theme button of your choice to apply the selected theme and color scheme to the entire application.
80
+
7. Close AppConfig Sidebar:
81
+
82
+
- After configuring the settings, you can close the AppConfig sidebar by clicking outside the sidebar or using any provided close button.
83
+
84
+
Configuration Options
85
+
---------------------
86
+
87
+
The `AppConfig` component provides a sidebar with various configuration options that can be adjusted to customize the project's layout and appearance. These options include:
88
+
89
+
### Scale
90
+
91
+
The "Scale" section allows users to adjust the font size of the application. Users can increment or decrement the scale and visualize the changes in real-time.
92
+
93
+
### Menu Type
94
+
95
+
The "Menu Type" section provides options to select the layout's menu mode. Users can choose between "Static" and "Overlay" menu types, influencing the navigation experience.
96
+
97
+
### Input Style
98
+
99
+
The "Input Style" section lets users choose between "Outlined" and "Filled" input styles, influencing the appearance of input fields in the application.
100
+
101
+
### Ripple Effect
102
+
103
+
The "Ripple Effect" section includes a toggle switch to enable or disable the ripple effect on user interactions.
104
+
105
+
### Themes
106
+
107
+
The "Themes" section categorizes available themes into different design systems:
108
+
109
+
- Bootstrap
110
+
- Material Design
111
+
- Material Design Compact
112
+
- Tailwind
113
+
- Fluent UI
114
+
- PrimeOne Design - 2022
115
+
- PrimeOne Design - 2021
116
+
117
+
For each design system, multiple theme options are provided, each represented by a button with a preview image. Clicking on a theme button applies the selected theme and color scheme to the application.
118
+
119
+
Feel free to explore and customize these options according to the desired look and feel of the "use client" project.
120
+
121
+
122
+
Usage: Applying Selected Theme to App.blade.php
123
+
-----------------------------------------------
124
+
125
+
Once you have chosen a preferred theme, follow these steps to integrate the selected theme into the `app.blade.php` file:
126
+
127
+
1. Choose a Theme:
128
+
129
+
- Using the AppConfig sidebar, select your preferred theme from the available options.
130
+
131
+
2. Navigate to app.blade.php:
132
+
133
+
- Locate the `app.blade.php` file in your project's `resources/views` directory.
134
+
3. Paste Link in Head Section:
135
+
136
+
- Open the `app.blade.php` file and locate the `<head>` section.
137
+
- Paste the `<link>` tag with `id="theme-css"` within the `<head>` section. It should look something like this with your selected theme:
4. Set the Chosen theme inside the `LayoutProvider` within the `layoutcontext` component
162
+
```jsx
163
+
const [layoutConfig, setLayoutConfig] =useState({
164
+
ripple:false,
165
+
inputStyle:'outlined',
166
+
menuMode:'static',
167
+
colorScheme:'light',
168
+
theme:'tailwind-light',
169
+
scale:14
170
+
});
171
+
```
172
+
173
+
4. Delete Unwanted Themes:
174
+
175
+
- In the public directory, navigate to the `images/layout/themes` folder.
176
+
- Delete the CSS files of the themes you no longer need. This step helps in keeping your project clean and reduces unnecessary file clutter.
177
+
5. Save Changes:
178
+
179
+
- Save the changes to the `app.blade.php` file.
180
+
181
+
By following these steps, you have successfully integrated the selected theme into the main layout of your application. Remember to clean up the unwanted themes to maintain a tidy project structure.
182
+
183
+
**NB: This project is still under development please report any bugs to the issue section of this repo**
0 commit comments