Skip to content

Commit

Permalink
feat: add checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
lc-soft committed Aug 18, 2019
1 parent b28c219 commit b4d6b63
Show file tree
Hide file tree
Showing 11 changed files with 260 additions and 2 deletions.
5 changes: 5 additions & 0 deletions demo/app/assets/views/documentation.xml
Expand Up @@ -65,6 +65,11 @@
Buttons
</a>
</w>
<w class="nav-item">
<a class="nav-link" href="components/checkbox.xml" target="demo-content">
Checkbox
</a>
</w>
<w class="nav-item">
<a class="nav-link" href="components/dropdowns.xml" target="demo-content">
Dropdowns
Expand Down
20 changes: 20 additions & 0 deletions 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>CheckBox</checkbox>
```

## Disabled

``` checkbox-disabled-demo-xml
<p>
<checkbox disabled="disabled">Disabled</checkbox>
</p>
<p>
<checkbox disabled="disabled" checked="checked">Disabled Checked</checkbox>
</p>
```
1 change: 1 addition & 0 deletions include/LCDesign/ui/components.h
Expand Up @@ -35,6 +35,7 @@
#include <LCDesign/ui/components/alert.h>
#include <LCDesign/ui/components/label.h>
#include <LCDesign/ui/components/icon.h>
#include <LCDesign/ui/components/checkbox.h>
#include <LCDesign/ui/components/img.h>
#include <LCDesign/ui/components/rate.h>
#include <LCDesign/ui/components/spinner.h>
Expand Down
41 changes: 41 additions & 0 deletions 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 <lc-soft@live.cn> 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
4 changes: 3 additions & 1 deletion main.vcxproj
@@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<Project DefaultTargets="Build" ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<ItemGroup Label="ProjectConfigurations">
<ProjectConfiguration Include="Debug|Win32">
Expand Down Expand Up @@ -162,6 +162,7 @@
<ItemGroup>
<ClCompile Include="src\main.c" />
<ClCompile Include="src\ui\components\alert.c" />
<ClCompile Include="src\ui\components\checkbox.c" />
<ClCompile Include="src\ui\components\dropdown.c" />
<ClCompile Include="src\ui\components\icon.c" />
<ClCompile Include="src\ui\components\img.c" />
Expand All @@ -180,6 +181,7 @@
<ClInclude Include="include\LCDesign.h" />
<ClInclude Include="include\LCDesign\ui\components.h" />
<ClInclude Include="include\LCDesign\ui\components\alert.h" />
<ClInclude Include="include\LCDesign\ui\components\checkbox.h" />
<ClInclude Include="include\LCDesign\ui\components\dropdown.h" />
<ClInclude Include="include\LCDesign\ui\components\icon.h" />
<ClInclude Include="include\LCDesign\ui\components\img.h" />
Expand Down
4 changes: 3 additions & 1 deletion main.vcxproj.filters
@@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<ItemGroup>
<ClCompile Include="src\main.c" />
Expand All @@ -15,6 +15,7 @@
<ClCompile Include="src\ui\dismiss.c" />
<ClCompile Include="src\ui\toggle.c" />
<ClCompile Include="src\ui\components\tooltip.c" />
<ClCompile Include="src\ui\components\checkbox.c" />
<ClCompile Include="src\ui\components\switch.c" />
</ItemGroup>
<ItemGroup>
Expand All @@ -33,6 +34,7 @@
<ClInclude Include="include\LCDesign\ui\dismiss.h" />
<ClInclude Include="include\LCDesign\ui\toggle.h" />
<ClInclude Include="include\LCDesign\ui\components\tooltip.h" />
<ClInclude Include="include\LCDesign\ui\components\checkbox.h" />
<ClInclude Include="include\LCDesign\ui\components\switch.h" />
</ItemGroup>
</Project>
1 change: 1 addition & 0 deletions src/main.c
Expand Up @@ -34,6 +34,7 @@
void LCDesign_Init(void)
{
LCDesign_InitAlert();
LCDesign_InitCheckBox();
LCDesign_InitLabel();
LCDesign_InitIcon();
LCDesign_InitImg();
Expand Down
49 changes: 49 additions & 0 deletions 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;
}
}
}
10 changes: 10 additions & 0 deletions src/scss/_variables.scss
Expand Up @@ -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;
1 change: 1 addition & 0 deletions src/scss/lc-design.scss
Expand Up @@ -11,6 +11,7 @@
@import "nav";
@import "navbar";
@import "buttons";
@import "checkbox";
@import "dropdown";
@import "list-group";
@import "rate";
Expand Down
126 changes: 126 additions & 0 deletions 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 <lc-soft@live.cn> 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 <LCUI.h>
#include <LCUI/timer.h>
#include <LCUI/gui/widget.h>
#include <LCUI/gui/widget/textview.h>
#include <LCDesign/ui/components/icon.h>
#include <LCDesign/ui/components/checkbox.h>

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;
}

0 comments on commit b4d6b63

Please sign in to comment.