Skip to content

Commit 9fd37a6

Browse files
olimsaidovolimsaidov
committed
Fix set theme
1 parent af25881 commit 9fd37a6

File tree

4 files changed

+54
-32
lines changed

4 files changed

+54
-32
lines changed

‎aidbox-forms-renderer-angular-controlled/index.html

+8-2
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ <h3 class="text-lg font-semibold">Questionnaires</h3>
113113
questionnaire="{{ questionnaire }}"
114114
ng-on-change="handleChange($event)"
115115
ng-on-ready="handleReady($event)"
116-
theme='{{ theme }}'
116+
config='{{ config }}'
117117
>
118118
</aidbox-form-renderer>
119119
</main>
@@ -9109,7 +9109,13 @@ <h3 class="text-lg font-semibold">Questionnaires</h3>
91099109
};
91109110

91119111
$scope.changeTheme = function() {
9112-
$scope.theme = JSON.stringify(theme);
9112+
$scope.config = JSON.stringify({ theme });
9113+
const [element] = document.getElementsByTagName('aidbox-form-renderer');
9114+
const parent = element.parentNode;
9115+
parent.removeChild(element);
9116+
setTimeout(() => {
9117+
parent.appendChild(element);
9118+
}, 0);
91139119
};
91149120

91159121
$scope.questionnaire = JSON.stringify($scope.questionnaires[$scope.currentQuestionnaireIndex], null, 2);

‎aidbox-forms-renderer-angular/index.html

+9-3
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ <h3 class="text-lg font-semibold">Questionnaires</h3>
112112
base-url="https://form-builder.aidbox.app"
113113
style="width: 100%; border: none; align-self: stretch; display: flex"
114114
questionnaire-id="{{ id }}"
115-
theme='{{ theme }}'
115+
config='{{ config }}'
116116
>
117117
</aidbox-form-renderer>
118118
</main>
@@ -138,7 +138,7 @@ <h3 class="text-lg font-semibold">Questionnaires</h3>
138138
];
139139

140140
$scope.id = $scope.questionnaires[0].id;
141-
$scope.theme = '';
141+
$scope.config = '';
142142
$scope.sidebarOpen = false;
143143

144144
$scope.selectQuestionnaire = function (id) {
@@ -161,7 +161,13 @@ <h3 class="text-lg font-semibold">Questionnaires</h3>
161161
};
162162

163163
$scope.changeTheme = function() {
164-
$scope.theme = JSON.stringify(theme);
164+
$scope.config = JSON.stringify({ theme });
165+
const [element] = document.getElementsByTagName('aidbox-form-renderer');
166+
const parent = element.parentNode;
167+
parent.removeChild(element);
168+
setTimeout(() => {
169+
parent.appendChild(element);
170+
}, 0);
165171
};
166172
}]);
167173
</script>

‎aidbox-forms-renderer-react-controlled/index.html

+14-11
Original file line numberDiff line numberDiff line change
@@ -8988,7 +8988,7 @@
89888988
const questionnaires = window.questionnaires;
89898989

89908990
const [sidebarOpen, setSidebarOpen] = React.useState(false);
8991-
const [theme, setTheme] = React.useState();
8991+
const [config, setConfig] = React.useState();
89928992

89938993
const formRendererRef = React.useRef();
89948994

@@ -9109,15 +9109,17 @@ <h3 className="text-lg font-semibold">Questionnaires</h3>
91099109
</div>
91109110
<button
91119111
className="mt-auto border rounded text-sm text-orange-600 hover:text-orange-500 hover:border-orange-500 active:bg-orange-600 active:text-white border-orange-600 p-2 pr-4"
9112-
onClick={() => setTheme(JSON.stringify({
9113-
"base-font-size": "12px", // Base font size for the theme
9114-
background: {
9115-
"toolbar-color": "#2c3e50", // Background color of the toolbar
9116-
},
9117-
button: {
9118-
"accent-color": "#27ae60", // General accent color for buttons
9119-
},
9120-
}))}
9112+
onClick={() => setConfig({
9113+
theme: {
9114+
"base-font-size": "12px", // Base font size for the theme
9115+
background: {
9116+
"toolbar-color": "#2c3e50", // Background color of the toolbar
9117+
},
9118+
button: {
9119+
"accent-color": "#27ae60", // General accent color for buttons
9120+
},
9121+
}
9122+
})}
91219123
>
91229124
Apply custom theme
91239125
</button>
@@ -9126,7 +9128,8 @@ <h3 className="text-lg font-semibold">Questionnaires</h3>
91269128
<aidbox-form-renderer
91279129
ref={formRendererRef}
91289130
questionnaire={questionnaire}
9129-
theme={theme}
9131+
key={JSON.stringify(config)}
9132+
config={JSON.stringify(config)}
91309133
style={{width: '100%', border: 'none', alignSelf: 'stretch', display: 'flex'}}
91319134
>
91329135
</aidbox-form-renderer>

‎aidbox-forms-renderer-react/index.html

+23-16
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,12 @@
3939

4040
const [id, setId] = React.useState(questionnaires[0].id);
4141
const [sidebarOpen, setSidebarOpen] = React.useState(false);
42-
const [theme, setTheme] = React.useState({
43-
button: {
44-
"accent-color": "#e34001", // General accent color for buttons
45-
},
42+
const [config, setConfig] = React.useState({
43+
theme: {
44+
button: {
45+
"accent-color": "#e34001", // General accent color for buttons
46+
},
47+
}
4648
});
4749

4850

@@ -51,8 +53,9 @@
5153
<header
5254
className="sticky top-0 z-20 flex flex-shrink-0 h-16 w-full items-center justify-between bg-white px-4 shadow-sm md:px-6">
5355
<nav className="flex items-center gap-6">
54-
<button className={`md:hidden text-2xl h-8 w-8 grid place-items-center leading-none rounded-full ${sidebarOpen ? 'bg-gray-200' : ''}`}
55-
onClick={() => setSidebarOpen(!sidebarOpen)}>
56+
<button
57+
className={`md:hidden text-2xl h-8 w-8 grid place-items-center leading-none rounded-full ${sidebarOpen ? 'bg-gray-200' : ''}`}
58+
onClick={() => setSidebarOpen(!sidebarOpen)}>
5659
<div className="-mt-1.5">
5760
☰
5861
</div>
@@ -107,7 +110,8 @@
107110
</div>
108111
</header>
109112
<div className="flex flex-1 relative">
110-
<div className={`flex flex-col bg-gray-100 p-4 w-[260px] z-10 max-w-full transition-all duration-100 top-0 bottom-0 absolute md:relative -left-full md:left-0 ${sidebarOpen ? 'left-0 shadow-lg' : ''}`}>
113+
<div
114+
className={`flex flex-col bg-gray-100 p-4 w-[260px] z-10 max-w-full transition-all duration-100 top-0 bottom-0 absolute md:relative -left-full md:left-0 ${sidebarOpen ? 'left-0 shadow-lg' : ''}`}>
111115
<div className="mb-4 flex items-center justify-between">
112116
<h3 className="text-lg font-semibold">Questionnaires</h3>
113117
</div>
@@ -136,14 +140,16 @@ <h3 className="text-lg font-semibold">Questionnaires</h3>
136140
</div>
137141
<button
138142
className="mt-auto border rounded text-sm text-orange-600 hover:text-orange-500 hover:border-orange-500 active:bg-orange-600 active:text-white border-orange-600 p-2 pr-4"
139-
onClick={() => setTheme({
140-
"base-font-size": "12px", // Base font size for the theme
141-
background: {
142-
"toolbar-color": "#2c3e50", // Background color of the toolbar
143-
},
144-
button: {
145-
"accent-color": "#27ae60", // General accent color for buttons
146-
},
143+
onClick={() => setConfig({
144+
theme: {
145+
"base-font-size": "12px", // Base font size for the theme
146+
background: {
147+
"toolbar-color": "#2c3e50", // Background color of the toolbar
148+
},
149+
button: {
150+
"accent-color": "#27ae60", // General accent color for buttons
151+
},
152+
}
147153
})}
148154
>
149155
Apply custom theme
@@ -154,7 +160,8 @@ <h3 className="text-lg font-semibold">Questionnaires</h3>
154160
base-url="https://form-builder.aidbox.app"
155161
style={{width: '100%', border: 'none', alignSelf: 'stretch', display: 'flex'}}
156162
questionnaire-id={id}
157-
theme={JSON.stringify(theme)}
163+
key={JSON.stringify(config)}
164+
config={JSON.stringify(config)}
158165
disable-load-sdc-config={true}
159166
>
160167
</aidbox-form-renderer>

0 commit comments

Comments
 (0)