From b4d6b6320a2a28a2b55feed5b109a6419a0f3861 Mon Sep 17 00:00:00 2001 From: Liu Date: Sun, 18 Aug 2019 16:54:56 +0800 Subject: [PATCH] feat: add checkbox --- demo/app/assets/views/documentation.xml | 5 + docs/components/checkbox.md | 20 ++++ include/LCDesign/ui/components.h | 1 + include/LCDesign/ui/components/checkbox.h | 41 +++++++ main.vcxproj | 4 +- main.vcxproj.filters | 4 +- src/main.c | 1 + src/scss/_checkbox.scss | 49 +++++++++ src/scss/_variables.scss | 10 ++ src/scss/lc-design.scss | 1 + src/ui/components/checkbox.c | 126 ++++++++++++++++++++++ 11 files changed, 260 insertions(+), 2 deletions(-) create mode 100644 docs/components/checkbox.md create mode 100644 include/LCDesign/ui/components/checkbox.h create mode 100644 src/scss/_checkbox.scss create mode 100644 src/ui/components/checkbox.c diff --git a/demo/app/assets/views/documentation.xml b/demo/app/assets/views/documentation.xml index bcc8aeb..806e35c 100644 --- a/demo/app/assets/views/documentation.xml +++ b/demo/app/assets/views/documentation.xml @@ -65,6 +65,11 @@ Buttons + + + Checkbox + + Dropdowns diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md new file mode 100644 index 0000000..cc96143 --- /dev/null +++ b/docs/components/checkbox.md @@ -0,0 +1,20 @@ +# Checkbox + +Make multiple selections in a set of options, or mark the status of an option. + +## Basic + +``` checkbox-basic-demo-xml +CheckBox +``` + +## Disabled + +``` checkbox-disabled-demo-xml +

+ Disabled +

+

+ Disabled Checked +

+``` diff --git a/include/LCDesign/ui/components.h b/include/LCDesign/ui/components.h index 0c18ebd..d53ffe8 100644 --- a/include/LCDesign/ui/components.h +++ b/include/LCDesign/ui/components.h @@ -35,6 +35,7 @@ #include #include #include +#include #include #include #include diff --git a/include/LCDesign/ui/components/checkbox.h b/include/LCDesign/ui/components/checkbox.h new file mode 100644 index 0000000..6f471fe --- /dev/null +++ b/include/LCDesign/ui/components/checkbox.h @@ -0,0 +1,41 @@ +/* + * checkbox.h -- Checkbox, used to make multiple selections in a set of + * options, or mark the status of an option. + * + * Copyright (c) 2019, Liu chao All rights reserved. + * + * Redistribution and use in source and binary forms, with or without + * modification, are permitted provided that the following conditions are met: + * + * * Redistributions of source code must retain the above copyright notice, + * this list of conditions and the following disclaimer. + * * Redistributions in binary form must reproduce the above copyright + * notice, this list of conditions and the following disclaimer in the + * documentation and/or other materials provided with the distribution. + * * Neither the name of LCUI nor the names of its contributors may be used + * to endorse or promote products derived from this software without + * specific prior written permission. + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" + * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE + * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE + * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE + * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR + * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF + * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS + * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN + * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) + * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE + * POSSIBILITY OF SUCH DAMAGE. + */ + +#ifndef LCDESIGN_CHECKBOX_H_ +#define LCDESIGN_CHECKBOX_H_ + +LCUI_API void LCDesign_InitCheckBox(void); + +LCUI_API LCUI_BOOL CheckBox_IsChecked(LCUI_Widget w); + +LCUI_API void CheckBox_SetChecked(LCUI_Widget w, LCUI_BOOL checked); + +#endif diff --git a/main.vcxproj b/main.vcxproj index d750c74..f86c431 100644 --- a/main.vcxproj +++ b/main.vcxproj @@ -1,4 +1,4 @@ - + @@ -162,6 +162,7 @@ + @@ -180,6 +181,7 @@ + diff --git a/main.vcxproj.filters b/main.vcxproj.filters index b7e9896..e62a264 100644 --- a/main.vcxproj.filters +++ b/main.vcxproj.filters @@ -1,4 +1,4 @@ - + @@ -15,6 +15,7 @@ + @@ -33,6 +34,7 @@ + \ No newline at end of file diff --git a/src/main.c b/src/main.c index 3653d9a..115654a 100644 --- a/src/main.c +++ b/src/main.c @@ -34,6 +34,7 @@ void LCDesign_Init(void) { LCDesign_InitAlert(); + LCDesign_InitCheckBox(); LCDesign_InitLabel(); LCDesign_InitIcon(); LCDesign_InitImg(); diff --git a/src/scss/_checkbox.scss b/src/scss/_checkbox.scss new file mode 100644 index 0000000..88bfcdb --- /dev/null +++ b/src/scss/_checkbox.scss @@ -0,0 +1,49 @@ +.checkbox-inner { + width: $checkbox-size; + height: $checkbox-size; + border: $checkbox-border-width solid $checkbox-border-color; + display: inline-block; + vertical-align: middle; +} + +.checkbox-inner-icon { + color: #fff; + font-size: $checkbox-size - 2px; + text-align: center; + line-height: $checkbox-size - $checkbox-border-width * 2; + display: none; +} + +.checkbox-text { + margin-left: map-get($spacers, 2); +} + +checkbox { + display: inline-block; + + &:hover .checkbox-inner { + border-color: $checkbox-checked-color; + } + + &.checked { + .checkbox-inner { + border-color: $checkbox-checked-color; + background-color: $checkbox-checked-color; + } + .checkbox-inner-icon { + display: block; + } + } + &:disabled { + .checkbox-inner { + border-color: $checkbox-border-color; + background-color: $checkbox-disabled-bg; + } + .checkbox-inner-icon { + color: $checkbox-disabled-color; + } + .checkbox-text { + color: $checkbox-disabled-color; + } + } +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 5f3b9ac..56e7207 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -576,3 +576,13 @@ $switch-bar-width: $switch-icon-width * 2 + $switch-slider-width; $switch-width: $switch-icon-width + $switch-slider-width + $switch-border-width * 2; $switch-checked-color: $primary; $switch-color: $text-muted; + + +// CheckBox + +$checkbox-size: $font-size-base + 2px; +$checkbox-border-width: 1px; +$checkbox-border-color: $border-color; +$checkbox-checked-color: $primary; +$checkbox-disabled-bg: $gray-100; +$checkbox-disabled-color: $gray-600; diff --git a/src/scss/lc-design.scss b/src/scss/lc-design.scss index a977b78..8bfce9b 100644 --- a/src/scss/lc-design.scss +++ b/src/scss/lc-design.scss @@ -11,6 +11,7 @@ @import "nav"; @import "navbar"; @import "buttons"; +@import "checkbox"; @import "dropdown"; @import "list-group"; @import "rate"; diff --git a/src/ui/components/checkbox.c b/src/ui/components/checkbox.c new file mode 100644 index 0000000..205b227 --- /dev/null +++ b/src/ui/components/checkbox.c @@ -0,0 +1,126 @@ +/* + * checkbox.c -- Checkbox, used to make multiple selections in a set of + * options, or mark the status of an option. + * + * Copyright (c) 2019, Liu chao All rights reserved. + * + * Redistribution and use in source and binary forms, with or without + * modification, are permitted provided that the following conditions are met: + * + * * Redistributions of source code must retain the above copyright notice, + * this list of conditions and the following disclaimer. + * * Redistributions in binary form must reproduce the above copyright + * notice, this list of conditions and the following disclaimer in the + * documentation and/or other materials provided with the distribution. + * * Neither the name of LCUI nor the names of its contributors may be used + * to endorse or promote products derived from this software without + * specific prior written permission. + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" + * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE + * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE + * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE + * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR + * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF + * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS + * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN + * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) + * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE + * POSSIBILITY OF SUCH DAMAGE. + */ + +#include +#include +#include +#include +#include +#include + +typedef struct CheckBoxRec_ { + LCUI_Widget inner; + LCUI_Widget content; + LCUI_BOOL checked; +} CheckBoxRec, *CheckBox; + +static struct CheckBoxModule { + LCUI_WidgetPrototype prototype; +} self; + +static void CheckBox_OnClick(LCUI_Widget w, LCUI_WidgetEvent e, void *arg) +{ + LCUI_WidgetEventRec ev; + CheckBox data = Widget_GetData(w, self.prototype); + + if (w->disabled) { + return; + } + CheckBox_SetChecked(w, !data->checked); + LCUI_InitWidgetEvent(&ev, "change"); + ev.cancel_bubble = TRUE; + Widget_TriggerEvent(w, &ev, NULL); +} + +static void CheckBox_OnInit(LCUI_Widget w) +{ + LCUI_Widget icon; + CheckBox data = Widget_AddData(w, self.prototype, sizeof(CheckBoxRec)); + + data->checked = FALSE; + data->content = NULL; + data->inner = LCUIWidget_New(NULL); + icon = LCUIWidget_New("icon"); + Icon_SetName(icon, "check"); + Widget_AddClass(w, "checkbox"); + Widget_AddClass(icon, "checkbox-inner-icon"); + Widget_AddClass(data->inner, "checkbox-inner"); + Widget_Append(data->inner, icon); + Widget_Append(w, data->inner); + Widget_BindEvent(w, "click", CheckBox_OnClick, NULL, NULL); +} + +static CheckBox_OnSetText(LCUI_Widget w, const char *text) +{ + CheckBox data = Widget_GetData(w, self.prototype); + + if (!data->content) { + data->content = LCUIWidget_New("span"); + Widget_AddClass(data->content, "checkbox-text"); + Widget_Append(w, data->content); + } + TextView_SetText(data->content, text); +} + +static void CheckBox_OnSetAttribute(LCUI_Widget w, const char *name, + const char *value) +{ + if (strcmp(name, "checked") == 0) { + CheckBox_SetChecked(w, strcmp(value, "checked") == 0); + } +} + +LCUI_BOOL CheckBox_IsChecked(LCUI_Widget w) +{ + CheckBox data = Widget_GetData(w, self.prototype); + + return data->checked; +} + +void CheckBox_SetChecked(LCUI_Widget w, LCUI_BOOL checked) +{ + CheckBox data = Widget_GetData(w, self.prototype); + + data->checked = checked; + if (data->checked) { + Widget_AddClass(w, "checked"); + } else { + Widget_RemoveClass(w, "checked"); + } +} + +void LCDesign_InitCheckBox(void) +{ + self.prototype = LCUIWidget_NewPrototype("checkbox", NULL); + self.prototype->init = CheckBox_OnInit; + self.prototype->settext = CheckBox_OnSetText; + self.prototype->setattr = CheckBox_OnSetAttribute; +}